ES6（一）

一、es6声明变量以及声明特性

1.let

• 变量不能重复声明
• 块级作用域
• 不会挂载在window中
• 新增块级作用域

2.const

• 与let一样
• 一定要赋初始值
• 常量的值不能修改
• 对数值和对象的元素修改，不算对常量的修改，不会报错

二、变量的解构赋值

按照一定的模式从数组和对象中提取值，对变量进行赋值。

1.数组的解构

        let arr = ['aaa', 'bbb', 'ccc']
        let [a, b, c] = arr
        console.log(a); //aaa
        console.log(b); //bbb
        console.log(c); //ccc

2.对象的解构

   let obj = {
            name: '张三',
            age: 18,
            say: function() {
                console.log('你好');
            }
        }
        let {
            name,
            age,
            say
        } = obj
        console.log(name); //张三
        console.log(age); //18
        say() //你好

解构赋值等号两边的结构要一致

三、模板字符串

es6引入新的字符串的方式：`str `

        // 1.声明
        let str = `你好!`;
        // 2.内容中可以直接出现换行符
        let htmlStr = `
            <ul>
                <li>111</li>
                <li>222</li>
                <li>333</li>
            </ul>
        `;
        // 3.变量拼接${}
        let obj = {
            name: '张三',
            age: 18,
            sex: '女'
        }
        let str1 = `
            <ul>
                <li>${obj.name}</li>
                <li>${obj.age}</li>
                <li>${obj.sex}</li>
            </ul>
        `

四、对象简化写法

允许在对象的大括号里，直接写入变量和函数，作为对象的属性和方法；

        let name = '张三'
        let say = function() {
            console.log('你好！');
        }
        const obj = {
            name,
            say,
            run() {
                console.log('我会跑');
            }
        }
        console.log(obj);
        obj.say()
        obj.run()

• 属性值和属性名相同时，可以简化成一个，方法名和方法值一样；
• 对象中写一个函数可以省略function关键字

五、箭头函数以及声明特点

1.声明

        let fn = function() {}

        function fn1() {}
        // 箭头函数
        let fn2 = (a, b) => {
            return a + b
        }
        console.log(fn2(1, 2)); //3

2.箭头函数中的this

箭头函数的this指向始终指向函数声明所在作用域下的this指向（相当于使用父级的this）

       window.name = '张三'

        function getName() {
            console.log(this.name);
        }
        let getName2 = () => {
            console.log(this.name);
        }
        getName(); //张三
        getName2(); //张三
        const obj = {
            name: '李四'
        }
        getName.call(obj) //李四
        getName2.call(obj) //张三

3.不能作为构造函数去实例化对象

4.不能使用arguments

5.箭头函数的简写

        // 1. 省略小括号, 形参只有一个时
        let getName = name => {
            console.log(name);
        };
        // 2.如果函数体中只有一个返回语句，可以省略花括号和return关键字
        let add = (n) => {
            return n + n
        };
        //简化后
        let add1 = n => n + n
        console.log(add(1));
        console.log(add1(1));

六、函数参数赋初始值

      function add(num1, num2, num3) {
            return num1 + num2 + num3
        }
        console.log(add(1, 2, 3)); //6

        //一遍初始值位置靠后
        function add1(num1, num2, num3 = 10) {
            return num1 + num2 + num3
        }
        console.log(add1(1, 2, 3)); //6
        console.log(add1(1, 2)); //13

七、rest参数【...】

rest用于获取函数实参，用来代替arguments，将收集好的参数放入真数组中

        function add() {
            console.log(arguments);
        }
        add(1, 2, 3) //Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

        // rest 参数
        function data(...arg) {
            console.log(arg);
        }
        data(1, 2, 3); //[1, 2, 3]
        
        //rest参数必须放在最后
        function data(a, b, ...arg) {
            console.log(a); //张三
            console.log(b); //18
            console.log(arg); //[4, 4, 1, 2, 3]
        }
        data('张三', 18, 4, 4, 1, 2, 3);

八、扩展运算符【...】

用于展开可迭代对象（数组，类数组）（es7可以展开对象）

        let arr = [1, 2, 3]
        let arr2 = [...arr, 4, 5, 6]
        console.log(arr2); //[1, 2, 3, 4, 5, 6]