对于前端开发者来说，JavaScript 是最重要的编程语言。ES6 是 JavaScript 的重要升级版本，它引入了许多新的语言特性和编程范式，使得编写 JavaScript 更加简单、高效。但是，ES6 中的 for…of 循环可能会引发一些错误，对于这些错误如何解决是我们需要学习的内容。
什么是 for…of 循环？
在 ES6 中，新增了一个 for…of 循环，用于遍历可迭代对象的元素。可迭代对象通常是数组、字串、Set、Map 等实现了 Symbol.iterator 方法的对象。for…of 循环替代了传统的 for 循环，使得代码更加简洁、易于维护。
const arr = [1, 2, 3, 4, 5];
for (const item of arr) {
console.log(item);
}
// output: 1 2 3 4 5for…of 循环可能出现的问题
虽然 for…of 循环是一个非常方便的方法，但有些情况下它会引发一些问题。在 for…of 循环中，变量会被声明为 const，表示每次迭代都会创建一个新的不可变量。这看起来是个好消息，但实际上却会因为变量作用域的问题引发一些错误。
const arr = [1, 2, 3, 4, 5];
const promises = [];
for (const item of arr) {
promises.push(new Promise((resolve) => setTimeout(() => resolve(item), 100)));
}
Promise.all(promises).then((result) => console.log(result));
// output: [1, 1, 1, 1, 1] or [1, 2, 3, 4, 5]在上面的示例中，我们将数组 arr 中每个元素包装成了一个 promise 对象，并存储在 promises 数组中。当所有的 promise 执行成功时，输出每个 promise 的返回值。然而，我们发现输出的结果不是预期的 [1, 2, 3, 4, 5]，而是 [1, 1, 1, 1, 1] 或者 [1, 2, 3, 4, 5]。这是因为在每次迭代中，都会创建一个新的不可变量 item，而包装的 promise 对象在执行时，引用的是同一个变量，因此当 promise 执行时，item 的值已经是最后一个元素的值。
解决方法
为了解决上述问题，我们需要在 for…of 循环的代码块作用域内封装一个新的作用域，将变量包装在其中。这样就可以在每次迭代中为每个 promise 创建一个新的变量，避免上述问题。
-- -------------------- ---- -------
----- --- - --- -- -- -- ---
----- -------- - ---
--- ------ ---- -- ---- -
------ -- -- -
----- ------ - ----- --- ----------------- -- ------------- -- -------------- ------
----------------------
-----
-
----------------------------------- -- ---------------------
-- ------- --- -- -- -- --在修复后的示例中，我们使用了一个立即执行的异步函数包裹了每个 promise 的创建和存储。这样，每个 promise 都在自己的作用域内，不会受到上一个迭代的影响，从而输出了正确的结果。
结论
JavaScript 中的 for…of 循环是为了解决传统 for 循环的麻烦，使得代码更加简洁、易于维护。然而，它也可能会在特定情况下引起错误。为了解决这些问题，我们需要封装一个新的作用域，并将变量包装在其中，以保护每次迭代中的变量不受前后迭代的影响。熟练掌握 for…of 循环的使用技巧，对于编写高质量的 JavaScript 代码会有很大帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66efe3646fbf960197313842