ES6知识点总结

一、var let const

        var let 变量     const 常量

        const必须赋值

                const a;    //会报错！！

                const a = undefined；

---

作用域：

        var 作用域：全局作用域 函数作用域

        let 作用域：全局作用域 块级作用域   { for循环每次循环重新声明   出循环undefined }

        const 作用域：块级作用域

---

重复声明：

        var可以被重复声明

                var a = 1；

                var a = 10；

        let  const不能重复声明：

        let在同一作用域不能重复声明 会报错 

        const 不能再重新赋值 但是对象中属性可以  (深冻结)

---

预解析：

        var进行预解析

                console.log(a);

                var a = 1;      //打印1

        let  const不进行预解析

                Error:a is undefined;

二、匿名函数自执行

        结构:   ( function ( ) {     } ) ( )

三、解构赋值

  对象

        let obj = {

                a: 1,

                b: 2

        }

解构赋值 

        let {a:renameA, b} = obj;           //重命名为renameA

相当于:

        let a = obj.a;

        let b = obj.b;

---

        let {a, b, c} = obj;       // c为undefined

        let {b, a} = obj;          //仍然a a对应

总结:  对象的解构赋值 要求变量名与属性名一致

---

  数组

        let arr = [ 'a', 'b', 'c' ];

        let [ e, f ] = arr;

        console.log(e, f);     //打印 a b

总结:  顺序对应，与变量名无关

---

面试题：

        let a = 1;

        let b = 2;

怎样快速交换ab的值?

        [a, b] = [b, a];

---

   其他类型 没有太大实际意义：

  字符串

        let str = 'abc';

        let [e, f] = str;

        console.log(e, f);        //打印a b

  数字

        let num = 123;

        let [c, d] = num;

        console.log(c, d);        //打印错误:  对象不是一个迭代器

总结:   一般可迭代对象都有解构赋值写法

四、展开运算符

  数组

1. 合并两个数组：

        let arr = [1, 2, 3, 4];

        let arr1 = [ 'a', 'b', ...arr, 'c', 'd']

2. 保存剩余参数：（代码延续上面的）

        let [a, b, ...c] = arr;           // c为 [ 3, 4 ]

---

  对象        

        

         打印:    

和数组一样

总结:   引用数据类型传递的是地址，修改值会影响到原来对象，

           所以 这里使用解构赋值可以解决此问题  

           let obj2 = {...obj};

五、Set的使用 Map

Set是一个构造函数 （对象的实例化）  一般首字母大写的都是构造函数

用于构建对象（如：Array、Date 都会返回，构建出一个对象）

构造函数都需要new

        let set = new Set();

1. 用于数组去重（返回一个对象）

        let arr = [1, 1, 2, 3, 4, 4];

        let s = new Set(arr);       // s 返回 Set(4)  {1, 2, 3, 4}

        arr = [...s];          //返回 (4) [1, 2, 3, 4]

---

其他方法

        s.size               数值的个数，长度length                      返回个数

        s.clear()           清空所有值                                    返回undefined

        s.delete(4)       删除某具体元素                             返回Boolean值

        s.add(5)           添加某一元素，具备去重              返回Set本身

        s.has('a')         查看是否存在a                              返回Boolean值 

Map add变成set

六、箭头函数

• 自带返回值：    形参=>返回值        形参为空或者多个时必须（），单个参数不用（）
• 箭头函数没有不定参  argument，但可以用展开运算符[...arg]/a, b, ...arg    剩余rest参数
• 普通函数fn未被某个事件/对象的方法调用，只是自调用fn（），this指向windows
• 箭头函数本身没有this，调用时指向声明时所在作用域的this

 

七、模板字符串： ``

p.innerHtml = `<span>可以换行，可以调函数，可以用三目表达式</span>

                        <strong>插值表达式${ name() }</strong> 

                        <p>{ age>18?"成年":age}</p> `

八、对象

参数默认值

---

（左）简洁表示法：属性、函数       （右）属性名表达式，可改变属性名

九、Babel是JavaScript的编译器 

https://www.babeljs.cn/        将新方法编译成兼容性强的