ES6语法及其知识点归纳——第四天

2.12 Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法。

1. size：返回集合的元素个数
2. add：增加一个新元素，返回当前集合
3. delete :删除元素，返回 boolean 值
4. has: 检测集合中是否包含某个元素，返回 boolean 值
5. clear:清空集合，返回 undefined

<script>
        let arr = [1,2,3,4,5,4,3,2,1];

        //1. 数组去重
        let result = [...new Set(arr)];
        console.log(result); //[1, 2, 3, 4, 5]
        //2. 交集
        let arr2 = [4,5,6,5,6];
        let result1 = [...new Set(arr)].filter(item => {
            let s2 = new Set(arr2); //4 5 6
            if(s2.has(item)){
                return true;
            }else {
                return false;
            }
        })
        console.log(result1);  //[4, 5]

        //简写形式
        let result2 = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        console.log(result2);

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

        //4. 差集
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff); // [1, 2, 3]
    </script>

2.13 Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法：

1. size:返回 Map 的元素个数
2. set:增加一个新元素，返回当前 Map
3. get:返回键名对象的键值
4. has:检测 Map 中是否包含某个元素，返回 boolean 值
5. clear:清空集合，返回 undefined

<script>
        // 声明 Map
        let m = new Map();
        // 添加元素
        m.set('name','刘海军');
        console.log(m);  //key: "name"  value: "刘海军"
        m.set('change', function (){
            console.log('你好!');
        });
        console.log(m);  

        let key = {
            school: '中学',
        };
        m.set(key, ['小学','中学','高中']);
        console.log(m);

        // size
        console.log(m.size);  //3
        // 删除
        m.delete('name');
        console.log(m);
        // 获取
        console.log(m.get('change'));
        // 清空
        // m.clear();
        // console.log(m);
        // 遍历
        for (const v of m) {
            console.log(v);
        }
    </script>

2.14 class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
知识点：

1. class 声明类
2. constructor 定义构造函数初始化
3. extends 继承父类
4. super 调用父级构造方法
5. static 定义静态方法和属性
6. 父类方法可以重写

 <script>
        // ES5 的语法
        // 手机
        function Phone(brand, price) {
            this.brand = brand;
            this.price = price;
        }

        // 添加方法
        Phone.prototype.call = function () {
            console.log("我可以打电话");
        }

        // 实例化对象
        let Vivo = new Phone ('vivo', 3000);
        Vivo.call();  //我可以打电话
        console.log(Vivo);

        class shouji {
            constructor (brand, price) {
                this.brand = brand;
                this.price = price;
            }

            call () {
                console.log("我也可以打电话");
            }
        }

        // 实例化对象
        let oppo = new shouji('oppo', 2000);
        oppo.call();  //我也可以打电话
        console.log(oppo);
    </script>

2.15 数值扩展

ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。
Number.isFinite() 用来检查一个数值是否为有限的。
Number.isNaN() 用来检查一个值是否为 NaN。
ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。
Math.trunc：用于去除一个数的小数部分，返回整数部分
Number.isInteger() 用来判断一个数值是否为整数。

2.16 对象扩展

ES6 新增了一些 Object 对象的方法

1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）
2. Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
3. proto、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

2.17 模块化

指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
好处：
防止命名冲突。
代码复用。
高维护性。

模块化语法:
模块功能主要由两个命令构成：export 和 import。
export 命令用于规定模块的对外接口。
import 命令用于输入其他模块提供的功能。