ES2015+学习笔记系列（三）—— 迭代器

迭代器

迭代器（Iterator）是一个接口，任何数据结构只要部署了Iterator 接口（即对象中的属性，Symbol.iterator），就可以完成遍历操作。

• ES6 创造的新的遍历命令 for…of 循环，Iterator 接口主要供 for…of 消费。（for…in 遍历键名，for…of 遍历键值）

• 原生具备 iterator 接口的数据（可用 for…of）：Array 、Arguments、Set、Map、String、TypedArray、NodeList

• 工作原理

  • 创建一个指针对象，指向当前数据结构的起始位置
    
  • 第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员

  

  • 接下来不断调用 next 方法，指针一直往后移动，知道指向最有一个成员
  • 每次调用 next 方法返回一个包含 value 和 done 属性的对象

  let iteratorArr = ['a', 'b', 'c'];
  console.log(iteratorArr);
  //获取Symbol.iterator对应的函数，用以创建对象，在可遍历对象的_proto_上
  let iteratorFunction = iteratorArr[Symbol.iterator];
  //创建指针对象，使用Symbol.iterator对应的函数创建
  let iteratorObj = iteratorArr[Symbol.iterator]();
  console.log(iteratorObj);
  //指针对象上有next方法,调用
  console.log(iteratorObj.next());//{value: "a", done: false}
  console.log(iteratorObj.next());
  console.log(iteratorObj.next());
  console.log(iteratorObj.next());//{value: undefined, done: true}

自定义迭代器遍历对象

 const iteratorData = {
            name: "二班",
            students: ["老二", "雅兴", "张超"],
            [Symbol.iterator]: function () {
                let index = 0;
                let _this = this;
                return {
                    next: function () {
                        if (index < _this.students.length) {
                            const result = { value: _this.students[index], done: false };
                            index++;
                            return result;
                        } else {
                            const result = { value: _this.students[index], done: true };
                            return result;
                        }
                    },
                };
            },
        };
        for (let v of iteratorData) {
            console.log(v);
        }