ES6 迭代器与可迭代对象的实现

ES6 新的数组方法、集合、for-of 循环、展开运算符（...）甚至异步编程都依赖于迭代器（Iterator ）实现。本文会详解 ES6 的迭代器与生成器，并进一步挖掘可迭代对象的内部原理与使用方法

一、迭代器的原理

在编程语言中处理数组或集合时，使用循环语句必须要初始化一个变量记录迭代位置，而程序化地使用迭代器可以简化这种数据操作

如何设计一个迭代器呢？

迭代器的本身是一个对象，这个对象有 next( ) 方法返回结果对象，这个结果对象有下一个返回值 value、迭代完成布尔值 done，模拟创建一个简单迭代器如下：

function createIterator(iterms) { let i = 0 return {  next() {   let done = (i >= iterms.length)   let value = !done ? iterms[i++] : undefined   return {    done,    value   }  } }}let arrayIterator = createIterator([1, 2, 3])console.log(arrayIterator.next()) // { done: false, value: 1 }console.log(arrayIterator.next()) // { done: false, value: 2 }console.log(arrayIterator.next()) // { done: false, value: 3 }console.log(arrayIterator.next()) // { done: true, value: undefined }

对以上语法感到困惑的，可参考： 【ES6】对象的新功能与解构赋值

每次调用迭代器的 next( ) 都会返回下一个对象，直到数据集被用尽。

ES6 中迭代器的编写规则类似，但引入了生成器对象，更简单的创建迭代器对象

二、创建迭代器

ES6 封装了一个生成器用来创建迭代器。显然生成器是返回迭代器的函数，这个函数通过 function 后的星号（*）表示，并使用新的内部专用关键字yield指定迭代器 next( ) 方法的返回值。

如何使用 ES6 生成器创建一个迭代器呢？一个简单的例子如下：

function *createIterator() { yield 123; yield 'someValue'}let someIterator = createIterator()console.log(someIterator.next()) // { value: 123, done: false }console.log(someIterator.next()) // { value: 'someValue', done: false }console.log(someIterator.next()) // { value: undefined, done: true }

使用yield关键字可以返回任意值或表达式，可以给迭代器批量添加元素：

// let createIterator = function *(items) { // 生成器函数表达式function *createIterator(items) { for (let i = 0; i < items.length; i++) {  yield items[i] }}let someIterator = createIterator([123, 'someValue'])console.log(someIterator.next()) // { value: 123, done: false }console.log(someIterator.next()) // { value: 'someValue', done: false }console.log(someIterator.next()) // { value: undefined, done: true }

由于生成器本身是函数，所以可添加到对象中，使用方式如下：

let obj = { // createIterator: function *(items) { // ES5 *createIterator(items) { // ES6  for (let i = 0; i < items.length; i++) {   yield items[i]  } }}let someIterator = obj.createIterator([123, 'someValue'])