ES6-迭代器

什么是迭代器

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

迭代器的原理

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

2、 原生具备 iterator 接口的数据(可用 for of 遍历)

  • Array
  • Arguments
  • Set
  • Map
  • String
  • TypedArray
  • Nodelist

Iterator 接口 指的就是对象里面的一个属性,这个属性的名字叫做Symbol.iterator

3、迭代器的工作原理

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

注意:需要自定义遍历数据的时候,要想到迭代器

let game = ['李白','典韦','张飞'];
let iterator = game[Symbol.iterator]();
// 调用对象的next方法
console.log(iterator.next());//{value: '李白', done: false}
console.log(iterator.next());//{value: '典韦', done: false}
console.log(iterator.next());//{value: '张飞', done: false}
console.log(iterator.next());//{value: undefined, done: true}

{value: undefined, done: true} done:true 表示遍历已经完成

自定义迭代器遍历对象

let game = {
    name: '王者荣耀',
    hero: ['刘备','关羽','张飞',
],
    //1. 创建一个迭代器
    [Symbol.iterator]() {
        let index = 0;
        let _this = this;
        // 2.创建一个指针对象
        return {
            // 创建next方法
            next: function () {
                if (index < _this.hero.length){
                    // 每次调用next方法,会返回一个包含value和done属性的对象
                    let res = {
                        value: _this.hero[index],
                        done: false
                    };
                    index++;
                    return res;
                }else{
                    return{value:undefined,done:true}
                }
            }
        };
    }
}
// 遍历对象
for (x of game) {
    console.log(x);
}
posted @ 2022-06-06 22:14  秋弦  阅读(48)  评论(0编辑  收藏  举报