随着 ES6 的发布，JavaScript 中引入了一种新的遍历方法——Iterator。Iterator 是一种统一的遍历机制，它可以遍历集合中的元素，包括数组、对象、Set、Map 等，在遍历过程中可以获取到每个元素的值以及对应的键。本文将介绍 Iterator 的基本用法和解决多元素遍历的问题。
Iterator 的基本用法
在 ES6 中，Iterator 通过迭代器（Iterator）来实现对集合的遍历。下面是 Iterator 的基本语法：
-- -------------------- ---- ------- -- ---- --- --- - --- -- --- --- ---- - ----------------------- ------------------------- -- - ------ -- ----- ----- - ------------------------- -- - ------ -- ----- ----- - ------------------------- -- - ------ -- ----- ----- - ------------------------- -- - ------ ---------- ----- ---- - -- ---- --- --- - - ---- ------ ---- ----- -- --- ---- - ----------------------- ------------------------- -- - ------ ------- ------- ----- ----- - ------------------------- -- - ------ ------- ------- ----- ----- - ------------------------- -- - ------ ---------- ----- ---- -
通过 arr[Symbol.iterator]() 或 obj[Symbol.iterator]() 方法获取到一个迭代器对象（Iterator），然后可以使用 next() 方法依次遍历集合中的元素，每次调用 next() 方法，都会返回一个包含当前元素的值和是否遍历完毕的状态对象 { value: currentValue, done: false/true }。
需要注意的是，当遍历完集合中所有元素之后，再次调用 next() 方法会返回一个 done 属性为 true 的状态对象，同时该对象的 value 属性值为 undefined。
解决多元素遍历的问题
在实际开发中，有时候需要同时遍历多个集合中的元素，那么该如何解决多元素遍历的问题呢？下面我们就来介绍两种解决多元素遍历的方法。
zip 方法
zip 方法可以将多个集合中相同位置的元素组合在一起，以数组的形式返回。下面是 zip 方法的示例代码：
-- -------------------- ---- -------
-------- ------------ -
------ -----------
-------- -- ----------------------
--- ---- -- ------------ -- ---------
--
-
--- ---- - --- -- ---
--- ---- - ----- ---- -----
--- ---- - ----- ---- -----
--- ---- --- -- -- -- --------- ----- ------ -
-------------- -- ---
-
-- ----
-- - --- ---
-- - --- ---
-- - --- ---在上面的示例代码中，我们定义了一个 zip 函数，该函数的参数是多个可迭代对象，我们首先以第一个可迭代对象的长度为基准，使用 Array.from 方法生成一个以 undefined 为值的新数组（长度和第一个可迭代对象一致），然后遍历这个新数组中的每个元素，使用 map 方法将每个元素对应位置的值组合在一起，最终返回一个新的数组。
在使用 zip 函数遍历多个可迭代对象时，我们可以使用 for ... of 循环，同时使用解构赋值获取到每个可迭代对象中对应位置的值，从而实现多个集合的可同时遍历。
生成器函数
相较于 zip 方法，生成器函数更加灵活，可以更加自定义化地定义多元素遍历的方式。下面是生成器函数的示例代码：
-- -------------------- ---- -------
--------- ------------ -
--- --------- - ------------ -- ------------------------
----- ------ -
--- ------- - ------------------ -- -------------
-- -------------------- -- ------------- -
-------
-
----- ------------------ -- --------------
-
-
--- ---- - --- -- ---
--- ---- - ----- ---- -----
--- ---- - ----- ---- -----
--- ---- --- -- -- -- --------- ----- ------ -
-------------- -- ---
-
-- ----
-- - --- ---
-- - --- ---
-- - --- ---在上面的示例代码中，我们定义了一个 zip 生成器函数，该函数的参数是多个可迭代对象。在函数体内，我们首先获取到每个可迭代对象的迭代器，然后使用 while (true) {} 循环逐个遍历每个迭代器的元素。当每个迭代器的 next() 方法返回的状态对象中的 done 属性均为 true 时，退出循环，函数执行完毕。
值得注意的是，在遍历过程中，我们使用 results.some(result => result.done) 语句判断是否所有迭代器均已遍历完毕。当某个迭代器的状态对象中的 done 属性为 true 时，说明该迭代器遍历完毕，这时我们需要退出整个循环。
当所有迭代器均未遍历完毕时，则使用 yield 语句返回一个组合了所有迭代器的当前元素的值的数组。在使用 for ... of 循环遍历生成器函数时，我们可以使用解构赋值获取到每个可迭代对象中对应位置的值，从而实现多个集合的可同时遍历。
总结
通过本文的介绍，我们学习了 Iterator 的基本用法和解决多元素遍历的问题。在实际开发中，Iterator 是一种非常实用的库，它用于遍历集合中的元素，能够极大地提高开发效率和代码可读性。在使用 Iterator 的过程中，我们需要注意遍历完所有元素之后再次调用 next() 方法会返回一个 done 属性为 true 的状态对象，同时该对象的值为 undefined；同时，我们还介绍了两种解决多元素遍历的方法——zip 方法和生成器函数。希望对读者们有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6517dc5495b1f8cacd002e04