在 ES7 中使用 Symbol.iterator 实现自定义迭代器
迭代器是 JavaScript 中非常有用的一个概念,它可以让我们以一种可控和可迭代的方式遍历一个数据集合。在 ES6 中引入了迭代器的新概念,它的出现使得遍历数据集合更加优雅简洁。在 ES7 中使用 Symbol.iterator 可以非常简单地实现自定义迭代器,本文章将详细阐述如何使用 Symbol.iterator 来实现自定义迭代器。
- 什么是迭代器
迭代器是一种让我们能够遍历数据集合的方法,简单来说,它就是一个迭代器对象,提供了一个 next 方法,每次调用该方法都会返回一个包含 value 和 done 属性的对象。
value 属性表示当前遍历到的值,done 属性表示是否遍历完成。如果 done 为 true,表示遍历完成,value 的值为 undefined。反之,如果 done 为 false,表示还有剩余的值可以遍历,value 的值为当前遍历到的值。
- 在 ES6 中的迭代器
在 ES6 中,引入了一个新的协议—— Iterable Protocol,它规定了一个数据结构必须实现的方法:Symbol.iterator。只要实现了该方法,就可以将数据结构变成可迭代的对象。
示例代码:
-- -------------------- ---- ------- ----- ---------- - --- --------------------------- - --------- -- - ----- -- ----- -- ----- -- -- --- ---- ----- -- ----------- - ------------------- - --------- - - -
在上面的示例中,我们定义了一个对象 myIterable,它实现了 Symbol.iterator 方法,并返回一个 Generator 函数。然后使用 for...of 循环遍历 myIterable,依次输出 1、2、3。
- 在 ES7 中实现自定义迭代器
在 ES7 中,我们可以使用 Symbol.iterator 来实现自定义迭代器,下面是一个示例代码,该示例从一个 API 获取数据,并将其转换成可迭代的对象:
-- -------------------- ---- ------- ----- ------- - - - --- -- ----- ------ -- - --- -- ----- ------ -- - --- -- ----- ------ - -- ----- ---------- - -------------------- - ------------ - -------- - -------------------- - --- ---- - - -- - - -------------------- ---- - ----- ---------------- - - - ----- --- - --- -------------------- --- ---- ----- -- ---- - ------------------- - --------- - --- -- ----- ------ -- --- -- ----- ------ -- --- -- ----- ------ -
在上面的示例中,我们定义了一个 ApiAdapter 类,它实现了 Symbol.iterator 方法,并返回了一个 Generator 函数。当我们使用 for...of 循环遍历 ApiAdapter 类的实例对象时,它会按照生成器函数的逻辑,依次输出 apiData 中的三个对象。
值得一提的是,在迭代器的生成器函数中,我们使用了 yield 关键字,这个关键字的作用是将数据返回给迭代器对象的 next 方法,并暂停函数执行,等待下一次迭代。
- 总结
在 ES7 中,我们可以使用 Symbol.iterator 来实现自定义迭代器,这使得我们在遍历数据集合时可以更加灵活和方便。迭代器的出现,在某种程度上统一了 JavaScript 中不同类型数据的遍历方式,使开发变得更加便捷。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c3f46883d39b48817cde73