一、什么是迭代器？

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口（对象中的一个属性，属性的名字叫做symbol.iterator），就可以完成遍历操作。

二、特性

ES6 创造了一种新的遍历命令 for...of 循环，Iterator 接口主要供 for...of使用。可以理解为迭代器就是方便遍历数据。
原生具备 iterator 接口的数据(可用 for of 遍历)：
1. Array；
2. Arguments；
3. Set；
4. Map；
5. String；
6. TypedArray；
7. NodeList；

三、工作原理

注：需要自定义遍历数据的时候，要想到迭代器；
1. 创建一个指针对象，指向当前数据结构的起始位置；
2. 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员；
3. 接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员；
4. 每调用 next 方法返回一个包含 value 和 done 属性的对象；

四、代码示例及相关说明

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>迭代器</title>
    </head>
    <body>
        <script>
            // 声明一个数组
            const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];
            // 使用 for...in 遍历数组
            for(let v in xiyou){
                console.log(v); //打印键名0 1 2 3
            }
            // 使用 for...of 遍历数组
            for(let v of xiyou){
                console.log(v); //打印键值
            }
            let iterator = xiyou[Symbol.iterator]();
            // 调用对象的next方法
            console.log(iterator.next());
            console.log(iterator.next());
            console.log(iterator.next());
            console.log(iterator.next());
            // 重新初始化对象，指针也会重新回到最前面
            let iterator1 = xiyou[Symbol.iterator]();
            console.log(iterator1.next());
        </script>
    </body>
</html>

五、迭代器自定义遍历对象

// 声明一个对象
const banji = {
    name: "终极一班",
    stus: [ 'xiaoming', 'xiaoning', 'xiaotian', 'knight' ],
    [Symbol.iterator]() { //添加迭代接口
        // 索引变量
        let index = 0;
        // 保存this
        let _this = this;
        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 (let v of banji) {
    console.log(v);
}
赏