<script>
        
        let str1 = '你好，世界！';
        //看清楚符号
        let str2 = `Hello
                    World!`;  // 可以直接换行
        let str3 = `Hello ${str1} World!`;  // 向模板中插入数据
</script>

<script>

        let colors1 = ['red', 'green', 'blue'];

        // 使用展开操作符输出数组中的元素，类似于：console.log('red', 'green', 'blue')
        console.log(...colors1)

        // 使用场景一：合并数组，将 colors1 中的元素合并到 colors2 中
        let colors2 = ['black', 'white', 'purple', ...colors1];

        // 使用场景二：复制数组    
        let colors3 = [...colors2]

</script>

 <script>

        // 实参 12 会被赋值给形参 a，剩余的所有实参都会被交给形参 bar，bar 会自动变成一个数组。
        function foo (a, ...bar) {
           console.log(a, bar)
        }

        foo(12, 34, 45, 67, 89)

        // 注意，剩余操作符只能应用到最后一个形参上，否则会抛出错误：Rest parameter must be last formal parameter
        // 下面的写法是错误的：
        // function foo (a, ...bar, b) {
        //    console.log(a, bar, b)
        // }

        // foo(12, 34, 45, 67, 89)

</script>

 <script>

        const obj = {
            firstName: '张康',
            lastName: '尼古拉斯',
            myAge: 30,
            phone: {
                number: 110,
                brand: '魅族',
                color: '黑色'
            }
        };

        // 1. 使用对象解构初始化同名变量
        // 告诉 obj 对象，把 firstName 属性的值赋值给同名变量 firstName，把 lastName 属性的值赋值给同名变量 lastName
        // let { firstName, lastName } = obj;
        // console.log(firstName, lastName)  // '张康' '尼古拉斯'

        // 2. 使用对象解构初始化非同名变量
        // 告诉 obj 对象，把 firstName 属性的值赋值给变量 first_name，把 lastName 属性的值赋值给变量 last_name

        // let { firstName: first_name, lastName: last_name } = obj;
        // console.log(first_name, last_name)  // '张康' '尼古拉斯'

        // 3. 为变量指定默认值
        // 当 obj 对象中没有 myAge 属性时，变量 myAge 默认会被赋值为 20
        // let { firstName, lastName, myAge = 20 } = obj;
        // console.log(firstName, lastName, myAge)  // '张康' '尼古拉斯' 30

        // 当 obj 对象中没有 myAge 属性时，变量 my_age 默认会被赋值为 20
        // let { firstName: first_name, lastName: last_name, myAge: my_age = 20} = obj;
        // console.log(first_name, last_name, my_age)  // '张康' '尼古拉斯' 30

        // 4. 使用对象解构为已有变量重新赋值
        // let first_name = '郭帅', last_name = '莱昂纳多';

        // JS 解析引擎不允许赋值操作符（=）左边出现花括号，但是可以使用小括号将整个赋值语句包裹起来，这样一来，整个赋值语句就变成了一个表达式。
        // ({ firstName: first_name, lastName: last_name } = obj);
        // console.log(first_name, last_name)  // '张康' '尼古拉斯'

        // 5. 嵌套对象解构
        // 告诉 obj 对象，把 phone 对象中的 number 属性的值赋值给变量 number，把 phone 对象中的 brand 属性的值赋值给变量 brand
        // let { phone: { number, brand } } = obj;
        // console.log(number, brand)
      
 </script>

 const colors = ['red', 'green', 'blue', 'orange', ['black', 'white']];

        // 1. 使用数组解构初始化变量
        // 数组中的元素会按照顺序赋值给这 3 个变量
        // let [ firstColor, secondColor, thirdColor ] = colors;
        // console.log(firstColor, secondColor, thirdColor)

        // 2. 使用数组解构为变量重新赋值
        // let firstColor = 'black', secondColor = 'white';
        // 数组中的元素会按照顺序赋值给这 2 个变量
        // [ firstColor, secondColor ] = colors;
        // console.log(firstColor, secondColor)

        // 3. 为变量指定默认值
        // 当数组中没有第 4 个元素时，变量 fourthColor 会被赋值成默认值 'pink'
        // let [ firstColor, secondColor, thirdColor, fourthColor = 'pink' ] = colors;
        // console.log(firstColor, secondColor, thirdColor, fourthColor)

        // 4. 跳过数组中的指定元素
        // let [ firstColor, , ,fourthColor ] = colors;
        // console.log(firstColor, fourthColor)

        // 5. 嵌套数组解构
        let [, , , , [nestedFirstColor, nestedSecondColor]] = colors;
        console.log(nestedFirstColor, nestedSecondColor)

</script>

<script>
        
        // 1. 在 ES5 语法中，为函数形参指定默认值的写法：
        // 写法一：
        // function foo (bar) {
        //     bar = bar || 'abc';
        //     console.log(bar)
        // }
        // foo('xyz')

        // 写法二：
        // function foo (bar) {
        //     if (typeof bar === 'undefined') {
        //         bar = 'abc';
        //     }
        //     console.log(bar)
        // }

        // foo('xyz');

        // 2. 使用 ES6 的语法为函数形参指定默认值
        function post (url, data = {}, timeout = foo * 1000) {
            console.log(arguments)
            console.log(url, data, timeout)
        }

        // post('xyz', {uname: 'zhangsan', upass: '123'}, 3000);
        post('xyz', null, 3000);

        // 注意事项：
        // 1> 除了为形参直接指定默认值以外，形参的默认值还可以是表达式，例如，timeout = 5 * 1000
        // 2> 在预编译阶段，形参表达式不会执行，只有在调函函数，并且没有为形参传递实参的情况下才执行。


</script>

//普通函数
function fun(){

  }
//箭头函数
//1.如果参数数量为0，则必须加上小括号，箭头函数后面的值会作为函数的返回值
// fun 为函数名 （）括号内为函数的形参 
    var fun  = () =>{}
//2.如果形参的数量为1，则可以省略小括号
    var fun  = greeting => {}
//3.如果形参大于1，则不能省略小括号
    var fun (a,b) => {}
//4.如果函数的执行体比较简单（直接量或表达式），可以省略大括号，箭头后面的直接量或表达式会被自动作为返回值。
    var fun (a,b) => a>b?a:b;
//5.如果函数的执行体比较复杂，则不能省略大括号。
        // var foo = (a, b) => {
        //     let max = a;
        //     if (b > a) {
        //         max = b;
        //     } 
        //     return max;
        // }

//【注意】 箭头函数中没有this绑定 使用call 等 方法时是无效的 ，
　　　　　　箭头函数也没有arguments， arguments指的是函数的传入的实参