ES6 中避免 Iterator 循环的错误-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，ES6 中引入的迭代器 (Iterator) 是非常强大的一项功能。然而，在使用迭代器进行循环遍历时，有一些常见的错误仍然需要我们注意和避免。

在本文中，我们将深入研究 ES6 迭代器的概念和用法，并介绍两种常见的 Iterator 循环错误，并提供修复和避免这些错误的指导意义和示例代码。

Iterator 简介

在 ES6 中，迭代器是一种可以迭代访问集合中的每个元素的对象。基本上，迭代器是一个可以返回一个元素序列的对象，而且它也具有使 JavaScript 中的 for...of 循环能够正常工作的 Iterator 接口。

它具有以下几个属性：

迭代器是一个对象。
迭代器返回一个值序列（可以是单个值或多个值）。
迭代器处于状态。在每次调用其 next() 方法时，迭代器都会返回序列中的下一个值。
迭代器在到达序列末尾时返回值是 undefined。

错误 #1 - 在循环中对同一个迭代器进行多次 next() 调用

这是一种常见的典型错误，它在 ES6 中的迭代器中最易犯的错误之一。

考虑以下的代码示例：

const fruits = ['apple', 'orange', 'pear'];
const iterator = fruits.entries();

for (let i = 0; i < fruits.length; i++) {
  console.log(iterator.next().value);
}

这个代码片段是有问题的，我们的预期输出应该是：

[0, 'apple']
[1, 'orange']
[2, 'pear']

但是实际的输出却是：

[0, 'apple']
[1, 'orange']
[2, undefined]

在第三次迭代时，我们收到了一个 undefined 值，而不是期望的 ['pear']。这是因为我们既在循环中使用了迭代器的 next() 方法，也在循环中调用了 fruits.length 的值，并且使用它来判断循环何时结束。由于我们在上一次迭代中已经到达了序列的末尾，再次调用 next() 方法会返回一个 undefined 值。

解决方法

修复这个问题很容易，只需在循环外保存迭代器。代码示例如下：

const fruits = ['apple', 'orange', 'pear'];
const iterator = fruits.entries();

for (const [index, fruit] of iterator) {
  console.log(index, fruit);
}

这种方法可以确保迭代器状态正确地被维护，而循环也可以正常终止。

错误 #2 - 在迭代器中使用 Array.prototype 的修改器方法

另一个常见的错误是在迭代器中使用修改器方法（Array.prototype.push()、Array.prototype.pop()、Array.prototype.shift()、Array.prototype.unshift() 和 Array.prototype.splice()）。

考虑以下示例代码：

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

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

这段代码预计会从 fruits 数组中删除 index 为 1 的元素，但实际输出是：

[0, 'apple']
[1, 'pear']

苹果已经正确地输出，但是此时 pear 仍然在输出。这是因为我们使用了 splice() 方法，这种修改器方法会改变数组的内容，在我们继续迭代之前就不再是一个正确的迭代对象了。

解决方法

避免这个问题的一个简单方法是使用不会修改原始数组的非修改器方法，比如 slice() 和 map()。

例如：

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

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

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

这个函数使用了 fruits 数组上的 splice() 方法，但是我们却使用了一个另外的数组来保存我们需要输出的内容。这个方法可以避免对原始迭代器进行修改，确保了程序的正确性。

结论

在本文中，我们深入研究了 ES6 中的迭代器，发现在使用它进行循环遍历时常常遇到的两个常见问题：在循环过程中多次对同一迭代器进行 next() 调用，以及在迭代器中使用修改器方法。本文提供了修复这些问题的指导意义和示例代码。为了在实际的代码开发过程中避免出现这两个问题，我们应该保持代码的简洁性、代码的易读性和使用非修改器方法而不是具有副作用的修改器方法。这不仅可以使代码运行更加准确和更加可读，还可以避免我们的代码在维护时遇到不必要的问题和调试。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/66f0d88c6fbf960197342ce0