ES6 中的 iterator

Posted 2020-11-05 Back to Reff.

【简介】

遍历器/迭代器。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。这种数据结构是“可遍历的”（iterable）。

如何判断是否可遍历?  

 typeof target[Symbol.iterator] // function

【作用】

　　1. 为各种数据结构，提供一个统一的、简便的访问接口；

　　2. 使得数据结构的成员能够按某种次序排列；

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

【遍历】

const colors = ["red", "green", "blue"]
for (var i = 0, len = colors.length; i < len; i++) {
  console.log(colors[i])
}

1. 追踪下标位置，
2. 判断循环何时停止。

 【自定义 iterator】

function createIterator(items) {
  var i = 0
  return {
    next: function () {
      var done = (i >= items.length)
      var value = !done ? items[i++] : undefined
      return {
        done: done,
        value: value,
      }
    }
  }
}

var iterator = createIterator([1, 2, 3])
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())
console.log(iterator.next())

Iterator 的遍历过程：

1、创建一个指针对象，指向当前数据结构的起始位置。也就是说，遍历器对象本质上，就是一个指针对象。

2、第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。

3、不断调用指针对象的next方法，直到它指向数据结构的结束位置。

虽然是比 for 循环简单了些，但手动写个 iterator 太麻烦了，所以ES6 推出 generator ，方便创建 iterator。也就是说，generator 就是一个返回值为 iterator 的函数。

【generator 和 iterator】

function* createIterator() {
  yield 1
  yield 2
  yield 3
}

let iterator = createIterator()
console.log(iterator.next().value)
console.log(iterator.next().value)
console.log(iterator.next().value)

Generator：ES6 提供的一种异步编程解决方案。

执行 Generator 函数会返回一个 iterator 对象，通过这个对象可以依次遍历 Generator 函数内部的每一个状态。

【for…of 和 iterator】

const colors = ["red", "green", "blue"];
for (let color of colors) {
  console.log(color);
}

当使用for…of循环遍历某种数据结构时，该循环会自动去寻找 Iterator 接口，并调用Symbol.iterator方法，返回该对象的默认遍历器。

for…of循环可以使用的范围包括数组、Set 和 Map、类似数组对象（arguments、DOM NodeList、 Generator、字符串）。

【内置的 iterator】

ES6 的有些数据结构原生具备 Iterator 接口（比如数组），即不用任何处理，就可以被 for…of 循环遍历。

原因在于，这些数据结构原生部署了Symbol.iterator属性，另外一些数据结构没有（比如对象）。

凡是部署了Symbol.iterator属性的数据结构，就称为部署了遍历器接口。调用这个接口，就会返回一个遍历器对象。

 

原生具备 Iterator 接口的数据结构如下。

Array、Map、Set、String、arguments 、NodeList 

// Array iterator
const heros = [\'Tony\', \'Steve\', \'Natasha\', \'Banner\', \'Thor\']
for (const hero of heros) {
  console.log(hero)
}

// Map iterator
const sex = \'male\'
const userMap = new Map([
  [\'name\', \'Stark\'],
  [48, \'age\' ],
  [\'gender\', sex]
])

for (let entry of userMap.entries()) {
  console.log(entry)
}

for (let key of userMap.keys()) {
  console.log(key)
}

for (let value of userMap.values()) {
  console.log(value)
}

const numberSet = new Set([1, 2, 2, 3, 4, 4, 5])
for (let entry of numberSet.entries()) {
  console.log(entry)
}

for (let key of numberSet.keys()) {
  console.log(key)
}

for (let value of numberSet.values()) {
  console.log(value)
}

// String iterator
const str = \'ca 
以上是关于ES6 中的 iterator的主要内容，如果未能解决你的问题，请参考以下文章
 
 JS中的 ES6新类型iterable
 理解ES6中的Iterator
 ES6笔记-- SetMap结构和Iterator迭代器
 ES6中的迭代器(Iterator)和生成器(Generator)
 ES6中的Iterator和for...of
 ES6中的迭代器(Iterator)和生成器(Generator)