2.12 Set

ES6 provides a new data structure Set (collection). It is similar to an array, but the values of the members are all unique. The collection implements the iterator interface, so you can use the "spread operator" and "for...of..." to traverse, the properties and methods of the collection.

size: returns the number of elements in the collection
add: add a new element and return the current collection
delete: delete the element and return the boolean value
has: Check whether an element is contained in the collection and return a boolean value
clear: clear the collection and return 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 provides Map data structure. It is similar to an object and is also a collection of key-value pairs. However, the scope of "keys" is not limited to strings. Various types of values (including objects) can be used as keys. Map also implements the iterator interface, so you can use "spread operator" and "for...of..." to traverse. Properties and methods of Map:

size: returns the number of elements of the Map
set: add a new element and return the current Map
get: return the key value of the key name object
has: Check whether an element is contained in the Map, and return a boolean value
clear: clear the collection and return 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 provides a way of writing closer to traditional languages, introducing the concept of Class as a template for objects. Through the class keyword, you can define a class. Basically, ES6 class can be regarded as just a syntactic sugar. Most of its functions can be achieved by ES5. The new class writing method just makes the writing of object prototypes clearer and more like the syntax of object-oriented programming.
Knowledge points:

class declaration class
constructor defines constructor initialization
extends inherits the parent class
super calls the parent constructor
static defines static methods and properties
The parent method can be overridden

 <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 Numerical expansion

ES6 provides a new way of writing binary and octal values, which are represented by prefixes 0b and 0o respectively.
Number.isFinite() is used to check whether a value is finite.
Number.isNaN() is used to check whether a value is NaN.
ES6 transplants the global methods parseInt and parseFloat to the Number object, and the usage remains unchanged.
Math.trunc: Used to remove the decimal part of a number and return the integer part.
Number.isInteger() is used to determine whether a value is an integer.

2.16 Object extension

ES6 adds some new Object object methods

Object.is compares whether two values are strictly equal, which is basically the same as "===" (+0 and NaN)
Combination of Object.assign objects, copy all enumerable properties of the source object to the target object
proto , setPrototypeOf, setPrototypeOf can directly set the prototype of the object

2.17 Modularity

Refers to splitting a large program file into many small files, and then combining the small files.
Benefit:
Prevent naming conflicts.
Code reuse.
High maintenance.

Modular syntax: The
module function mainly consists of two commands: export and import.
The export command is used to specify the external interface of the module.
The import command is used to input functions provided by other modules.

ES6 grammar and summary of knowledge points-day four

ES6 grammar and its knowledge points summary (day 4)