在 ES7 中使用 Symbol.iterator 实现自定义迭代器

阅读时长 3 分钟读完

在 ES7 中使用 Symbol.iterator 实现自定义迭代器

迭代器是 JavaScript 中非常有用的一个概念,它可以让我们以一种可控和可迭代的方式遍历一个数据集合。在 ES6 中引入了迭代器的新概念,它的出现使得遍历数据集合更加优雅简洁。在 ES7 中使用 Symbol.iterator 可以非常简单地实现自定义迭代器,本文章将详细阐述如何使用 Symbol.iterator 来实现自定义迭代器。

  1. 什么是迭代器

迭代器是一种让我们能够遍历数据集合的方法,简单来说,它就是一个迭代器对象,提供了一个 next 方法,每次调用该方法都会返回一个包含 value 和 done 属性的对象。

value 属性表示当前遍历到的值,done 属性表示是否遍历完成。如果 done 为 true,表示遍历完成,value 的值为 undefined。反之,如果 done 为 false,表示还有剩余的值可以遍历,value 的值为当前遍历到的值。

  1. 在 ES6 中的迭代器

在 ES6 中,引入了一个新的协议—— Iterable Protocol,它规定了一个数据结构必须实现的方法:Symbol.iterator。只要实现了该方法,就可以将数据结构变成可迭代的对象。

示例代码:

-- -------------------- ---- -------
----- ---------- - ---
--------------------------- - --------- -- -
  ----- --
  ----- --
  ----- --
--
--- ---- ----- -- ----------- -
  -------------------
-
--------- - - -

在上面的示例中,我们定义了一个对象 myIterable,它实现了 Symbol.iterator 方法,并返回一个 Generator 函数。然后使用 for...of 循环遍历 myIterable,依次输出 1、2、3。

  1. 在 ES7 中实现自定义迭代器

在 ES7 中,我们可以使用 Symbol.iterator 来实现自定义迭代器,下面是一个示例代码,该示例从一个 API 获取数据,并将其转换成可迭代的对象:

-- -------------------- ---- -------
----- ------- - -
  - --- -- ----- ------ --
  - --- -- ----- ------ --
  - --- -- ----- ------ -
--
----- ---------- -
  -------------------- -
    ------------ - --------
  -
  -------------------- -
    --- ---- - - -- - - -------------------- ---- -
      ----- ----------------
    -
  -
-
----- --- - --- --------------------
--- ---- ----- -- ---- -
  -------------------
-
--------- - --- -- ----- ------ -- --- -- ----- ------ -- --- -- ----- ------ -

在上面的示例中,我们定义了一个 ApiAdapter 类,它实现了 Symbol.iterator 方法,并返回了一个 Generator 函数。当我们使用 for...of 循环遍历 ApiAdapter 类的实例对象时,它会按照生成器函数的逻辑,依次输出 apiData 中的三个对象。

值得一提的是,在迭代器的生成器函数中,我们使用了 yield 关键字,这个关键字的作用是将数据返回给迭代器对象的 next 方法,并暂停函数执行,等待下一次迭代。

  1. 总结

在 ES7 中,我们可以使用 Symbol.iterator 来实现自定义迭代器,这使得我们在遍历数据集合时可以更加灵活和方便。迭代器的出现,在某种程度上统一了 JavaScript 中不同类型数据的遍历方式,使开发变得更加便捷。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64c3f46883d39b48817cde73

纠错
反馈