迭代器自定义遍历对象

拼搏现实的明天。 2022-10-11 00:43 224阅读 0赞

### 要说起迭代器自定义遍历对象，首页要知道什么是迭代器？ ###

**生成器**概念在Java，Python等语言中都是具备的，ES6也添加到了JavaScript中。Iterator可以使我们**不需要初始化集合，以及索引的变量**，而是使用迭代器对象的 **next** 方法，返回集合的下一项的值，**偏向程序化**。

**迭代器**是带有特殊接口的对象。含有一个next()方法，调用返回一个包含两个属性的对象，分别是value和done，**value表示当前位置的值**，**done表示是否迭代完**，当为true的时候，调用next就无效了。

ES5中遍历集合通常都是**for循环**，数组还有 **forEach** 方法，对象就是 **for-in**，ES6 中又添加了 **Map** 和 **Set**，而迭代器可以统一处理所有集合数据的方法。迭代器是一个接口，只要你这个数据结构暴露了一个iterator的接口，那就可以完成迭代。ES6创造了一种新的遍历命令for...of循环，Iterator接口主要供for...of消费。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>迭代器</title>
    </head>
    <body>
        <script>
            //声明一个数组
            const xiyou = ['唐僧','孙悟空','猪八戒','沙僧'];
    
            //使用 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());
            console.log(iterator.next());
        </script>
    </body>
    </html>

如上图所示，可以使用 for...of 遍历数组，直接得到值的遍历。也可以使用迭代器的方式进行遍历。

### 迭代器自定义遍历对象遍历对象中的某一个属性？ ###

举例：使用for..of遍历banji中stus数组?

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义遍历数据</title>
    </head>
    
    <body>
        <script>
            //声明一个对象
            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);
            }
        </script>
    </body>
    
    </html>

如上所示，我们使用自定义的一个\[Symbol.iterator\]()\{ \}函数，在内部完成一个迭代器的操作，然后在外部通过for..of遍历，即可实现效果；