ES6学习之Iterator和For...of循环

Posted 2020-10-14 枫叶布

一.Iterator（它是一种接口，为各种不同的数据结构提供统一的访问机制。Iterator 接口主要供for...of消费）

默认Iterator接口（默认的 Iterator 接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”（iterable）。Symbol.iterator属性本身是一个函数）

• 部署Iterator 接口：

const obj = {
  [Symbol.iterator] : function () {　　//Symbol需要使用中括号括起来
    return {
      next: function () {
        return {
          value: 1,
          done: true
        };
      }
    };
  }
};

• 默认原始具有Iterator 接口的数据结构：Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象
• 对于类似数组的对象（存在数值键名和length属性），部署 Iterator 接口，有一个简便方法，就是Symbol.iterator方法直接引用数组的 Iterator 接口。

NodeList.prototype[Symbol.iterator] = Array.prototype[Symbol.iterator];
// 或者
NodeList.prototype[Symbol.iterator] = [][Symbol.iterator];

[...document.querySelectorAll(‘div‘)] // 可以执行了

二、For...of（循环遍历具有Symbol.iterator属性的数据结构：Array、Map、Set、String、TypedArray、函数的 arguments 对象、NodeList 对象及部署了Symbol.iterator属性的数据结构）

for...of循环调用遍历器接口，数组的遍历器接口只返回具有数字索引的属性。

let arr = [3, 5, 7];
arr.foo = ‘hello‘;

for (let i in arr) {
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  console.log(i); //  "3", "5", "7"
}

For...of可以与break、continue和return配合使用

for (var n of fibonacci) {
  if (n > 1000)
    break;
  console.log(n);
}