前端基础之《ECMAScript 6（6）—数组》

一、扩展运算符

1、【...】

扩展运算符能将【数组】转换为逗号分隔的【参数序列】

	//声明一个数组
    const school = ['张三','李四','王五'];
    //用...转换成逗号分隔的序列：'张三','李四','王五'

    //声明一个函数
    function biaoyan(){
        console.log(arguments);
    }
    biaoyan(school);

arguments里面只有一个参数，它是一个数组：

用扩展运算符写法：

	//声明一个数组
    const school = ['张三','李四','王五'];
    //用...转换成逗号分隔的序列：'张三','李四','王五'

    //声明一个函数
    function biaoyan(){
        console.log(arguments);
    }
    biaoyan(...school);

arguments里面变成了三个参数：

二、数组的合并

    //1. 数组的合并
    const kuaizi = ['小王','小肖'];
    const fenghuang = ['小曾','小玲'];

    //ES5写法
    const zuixuan = kuaizi.concat(fenghuang);
    console.log(zuixuan);

    //ES6写法
    const zuixuan2 = [...kuaizi, ...fenghuang];
    console.log(zuixuan2);

三、数组的克隆

    //2. 数组的克隆
    const sanzhihua = ['E','G','M'];
    const sanyecao = [...sanzhihua];
    console.log(sanyecao);

四、将伪数组转为真正的数组

    //3. 将伪数组转为真正的数组
    const divs = document.querySelectorAll('div');
    console.log(divs);
    const divArr = [...divs];
    console.log(divArr);

打印第一个对象，是NodeList：

打印第二个对象，是数组：

五、迭代器

1、什么是迭代器

迭代器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。
任何数据结构只要部署Iterator接口，就可以完成遍历操作。

2、ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费

3、原生具备Iterator接口的数据（可用for...of遍历）

（1）Array
（2）Arguments
（3）Set
（4）Map
（5）String
（6）TypedArray
（7）NodeList
这里说的Iterator接口，就是对象里的一个属性，属性名字叫Symbol.iterator。

4、迭代器工作原理

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

    //获取迭代器对象
    let iterator = xiyou[Symbol.iterator]();
    console.log(iterator);

    //调用对象的next方法
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());

当循环到第5次，done变为true，表示循环已经完成。value是undefined。

5、for...of循环和for...in循环的区别

	//声明一个数组
    const xiyou = ['唐僧','孙悟空','猪八戒','沙和尚'];

    //使用for...of遍历数组
    for (let v of xiyou){
        console.log(v);
    }

    //使用for...in循环
    for(let j in xiyou){
        console.log(j);
    }

for...of循环取数组的值，for...in循环取数组的索引。

六、迭代器应用

1、自定义遍历数据

	//声明一个对象
    const banji = {
        name: "一班",
        stus:[
            "小明",
            "小王",
            "小天",
            "king"
        ]
    }

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

报错：Uncaught TypeError: banji is not iterable

2、添加迭代器

	//声明一个对象
    const banji = {
        name: "一班",
        stus:[
            "小明",
            "小王",
            "小天",
            "king"
        ],
        [Symbol.iterator](){
            //索引变量
            let index = 0;
            //保存banji对象的this
            let _this = this;  //因为在return花括号里的this指向的是return这个对象
            return {
                next: function(){
                    if (index < _this.stus.length){
                        const result = {value: _this.stus[index], done: false};
                        //下标自增
                        index++;
                        //返回结果
                        return result;
                    }else{
                        return {value: undefined, done: true};
                    }
                    
                }
            }
        }
    }

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

实现按照我们自己的意愿，对对象的遍历。