JavaScript 数组迭代：5 个致命错误及如何避免

如何在 JavaScript 中遍历数组：常见错误及如何避免

您是否曾经编写过一段代码，本应简单地遍历待办事项列表或购物车中的商品，却输出了 undefined、陷入无限循环，或者更糟的是，悄悄地损坏了数据？这种痛苦很熟悉。问题 "How to loop through the items of an array in JavaScript?" 是 Stack Overflow 上最热门的问题之一。看起来还能更简单吗？但魔鬼，一如既往，藏在细节中。

今天，我们不仅仅要分析 如何在 JavaScript 中遍历数组。我们将深入探究初学者（以及不仅仅是初学者）最常踩的坑。您将了解为什么 for...in 可能会坑您，forEach 与 map 有何不同，以及如何在 for 循环中避免陷入无限循环。

准备好了吗？让我们开始修复错误并编写优雅的代码。

错误 #1：对数组使用 for...in

这可能是新手最容易犯的隐蔽错误。开发者看到单词 for 和单词 in，就会想：“哦，这是用来遍历所有东西的！”。从技术上讲，这是对的。但对于数组来说，这 是一场灾难。

for...in 循环旨在遍历 对象的属性，而不是数组的元素。是的，JS 中的数组也是一个对象，但其索引只是字符串键（"0", "1", "2"）。

陷阱如下：

\n
• 顺序无法保证。 虽然浏览器通常遵循顺序，但不能依赖于此。
\n
• 它会遍历所有原型继承的属性。 如果您或某个库向 Array.prototype 添加了方法（例如，Array.prototype.myCustomMethod = function() {}），for...in 也会将其包含进来。
\n

代码示例（错误做法）：

const arr = [10, 20, 30];\nArray.prototype.customMethod = () => {};\n\nfor (let index in arr) {\n  console.log(arr[index]); // 输出：10, 20, 30, ƒ () => {}\n}\n

看到了吗？最后出现了我们的自定义函数。代码出错了。

正确做法：

使用 for...of（用于值）或经典的 for（用于索引）。for...of 只遍历 值，并忽略原型。

// 正确且安全\nfor (let value of arr) {\n  console.log(value); // 10, 20, 30\n}\n

错误 #2：忘记 forEach 中的回调

arr.forEach(callback) 是在 JavaScript 中遍历数组的一种优雅方式。但许多人将其与 map 或 filter 混淆。主要错误是认为 forEach 会返回某些内容。它返回 undefined。

第二个常见错误是忘记回调的第二和第三个参数（索引和数组本身）。有时这很关键。

错误示例：

const numbers = [1, 2, 3];\nconst doubled = numbers.forEach(num => num * 2);\nconsole.log(doubled); // undefined！错误。\n

正确做法：

如果您需要基于旧数组创建一个新数组，请使用 map()。如果您只需要执行某个操作（例如，输出到控制台或发送数据），请使用 forEach()。

// 用于创建新数组\nconst doubled = numbers.map(num => num * 2); // [2, 4, 6]\n\n// 用于副作用\nnumbers.forEach((num, index) => {\n  console.log(`元素 ${index}: ${num}`);\n});\n

错误 #3：for 循环中的无限循环

经典错误。您编写了 for (let i = 0; i < arr.length; i++)，但忘记了递增 i++，或者更糟的是，在循环内部修改了数组。

假设您正在实时过滤数组，使用 splice() 删除元素。如果您没有正确调整索引，就会跳过元素或导致无限循环。