ES6~ES11新特性：扩展运算符，Symbol与迭代器

一.扩展运算符

1.扩展运算符的介绍

… 扩展运算符能将数组转化为逗号分割的参数序列

        const a = ['1','2','3'];

        function b(){
            console.log(arguments);
        }
        b(a);
        b(...a);

结果为

直接把a传过去它是一个数组，长度为1

利用扩展运算符则可以把a转换成一个长度为3的参数序列

相当于

b('1', '2', '3');

2.扩展运算符的应用

• 数组的合并

创建两个数组

        const a = ['学生1','老师1'];
        const b = ['学生2','老师2'];

老方法

const c = a.concat(b);

新方法

const d = [...a, ...b];

输出一下

        console.log(c);
        console.log(d);

结果是一样的

• 数组的克隆

        const a1 = ['学生3','老师3'];
        const b1 = [...a1];
        console.log(b1);

可见克隆成功

• 将伪数组转为真正的数组

    <div></div>
    <div></div>
    <div></div>

    const divs = document.querySelectorAll('div');
    console.log(divs)
    const divArr = [...divs];
    console.log(divArr)

由对象转换为了数组

二.Symbol

ES6引入了一种全新的数据类型Symbol，表示独一无二的值

1.特点

• 其值是唯一的
• 不能与其他数据进行运算
• 定义的对象属性不能进行循环遍历

2.创建Symbol

        let s = Symbol();
        console.log(s);

唯一性

        let s2 = Symbol("a");   //内容只是一个标志
        let s3 = Symbol("a");

        console.log(s2==s3)

非唯一性

        let s4 = Symbol.for("c");    //函数对象
        let s5 = Symbol.for("c");

        console.log(s4==s5)

Symbol.for() 方法会根据给定的值，从运行时的symbol注册表中找到对应的symbol，如果找到了，则返回它，否则，新建一个与该键关联的 symbol，并放入全局 symbol 注册表中。

3.Symbol的使用

可以很安全的向对象中添加属性或方法，防止命名冲突

• 第一种方式

        let game = {
            name:'学校',
            up:function(){},
            down:function(){}
        }

        let me = {
            up: Symbol(),
            down: Symbol()
        }

        game[me.up] = function(){     //添加方法up
            console.log("学生");
        }
        game[me.down] = function(){   //添加方法down
            console.log("老师");
        }
        console.log(game);

可见其避免了命名冲突

• 第二种方式

        let youxi = {
            name:'学习',
            [Symbol('ak')] : function(){
                console.log('4')
            }
        }

三.迭代器(Iterator)

1.介绍

ES6创建了一种新的原生命令，使用for…of遍历数组，Iterator接口主要就是供for…of来消费

const a = ['A','B','C','D']
// for...in遍历数组
for(let b of a){
    console.log(b);
}

区别： for…in保存的是键名，for…of保存的是键值

工作原理：
1.创建一个指针对象，指向当前数据结构的起始位置
2.第一次调用对象的next方法，指针自动指向数据结构的第一个成员
3.接下来不断调用next方法，指针一直向后移动，直到指向最后一个成员
4.每调用一次next方法返回一个包含value和done属性的对象

        const b = ['学习','吃饭','睡觉','玩'];
        let z = b[Symbol.iterator]();
        console.log(z.next());
        console.log(z.next());
        console.log(z.next());
        console.log(z.next());
        console.log(z.next());

2.应用

自定义遍历数据

        const array= {
            name:'学习',
            arr:['小王','小李','小赵','小刘'],

            [Symbol.iterator](){
                let index=0

                return{
                    next: () => {
                        if(index < this.arr.length){
                            const result = {value:this.arr[index], done: false}
                            index++;
                            return result;
                        }else{
                            return {value:undefined, done: true};
                        }  
                    }
                }
            }
        }

        // 遍历这个对象
        for(let v of array){
            console.log(v);
        }

选集为：13，14，15，16，18，19