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'])
生成器函数的一个特点是,当执行完一句 yield 语句后函数会自动停止执行,再次调用迭代器的 next( ) 方法才会继续执行下一个 yield 语句。
这种自动中止函数执行的能力衍生出很多高级用法。
三、可迭代对象
在 ES6 中常用的集合对象(数组、Set/Map集合)和字符串都是可迭代对象,这些对象都有默认的迭代器和Symbol.iterator属性。
通过生成器创建的迭代器也是可迭代对象,因为生成器默认会为Symbol.iterator属性赋值。
3.1 Symbol.iterator
可迭代对象具有Symbol.iterator属性,即具有Symbol.iterator属性的对象都有默认迭代器。
我们可以用Symbol.iterator来访问对象的默认迭代器,例如对于一个数组:
let list = [11, 22, 33] let iterator = list[Symbol.iterator]() console.log(iterator.next()) // { value: 11, done: false }
Symbol.iterator获得了数组这个可迭代对象的默认迭代器,并操作它遍历了数组中的元素。
反之,我们可以用Symbol.iterator来检测对象是否为可迭代对象:
function isIterator(obj) { return typeof obj[Symbol.iterator] === 'function' } console.log(isIterator([11, 22, 33])) // true console.log(isIterator('sometring')) // true console.log(isIterator(new Map())) // true console.log(isIterator(new Set())) // true console.log(isIterator(new WeakMap())) // false console.log(isIterator(new WeakSet())) // false
显然数组、Set/Map 集合、字符串都是可迭代对象,而 WeakSet/WeakMap 集合(弱引用集合)是不可迭代的。
3.2 创建可迭代对象
默认情况下,自定义的对象都是不可迭代的。
刚才讲过,通过生成器创建的迭代器也是一种可迭代对象,生成器默认会为Symbol.iterator属性赋值。
那如何将自定义对象变为可迭代对象呢?通过给Symbol.iterator属性添加一个生成器: