在 JavaScript 中循环遍历数组的多种方法

最新推荐文章于 2025-12-11 16:09:33 发布

原创最新推荐文章于 2025-12-11 16:09:33 发布 · 1k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文详细介绍了JavaScript中遍历数组的各种方法，包括语法、、、传统循环、获取索引，以及不建议使用的遍历。对比了它们的优缺点，特别是在处理稀疏数组时的行为，帮助开发者选择合适的遍历策略。

在JavaScript编程中，遍历数组是一个非常常见的操作。根据不同的需求和JavaScript的不同版本，我们有多种方法来完成这一操作。本文将介绍几种有效的方法，包括现代的和传统的方式，同时分析每一种方法的优缺点。

1. 使用 `for...of` 语法

for...of 是在 ECMAScript 2015（ES6）中引入的一种新的迭代语法。它可以用来遍历任何可迭代对象，如数组、字符串、Map、Set 等。与传统的 for 循环相比，for...of 语法更加简洁，并且不需要手动管理循环索引。

示例代码：

// 需要 ECMASCRIPT 2015+ 支持
const myStringArray = ["Hello", "World"];
for (const s of myStringArray) {
  console.log(s); // 输出 Hello 和 World
}
// 循环结束后，s 不再定义

在上面的代码中，我们声明了一个 myStringArray 数组，然后使用 for...of 循环来遍历数组的每个元素，并在控制台输出。需要注意的是：每次迭代中的 s 都是一个新的变量，但在循环体内，它们不会被修改。

2. 稀疏数组的注意事项

在 JavaScript 中，数组的 length 属性表示数组的长度（即数组最大下标加1），但这并不意味着数组中实际存储了那么多元素。一个数组可能是稀疏的，即只有某些索引上有值，其它索引上没有任何值。

示例代码：

let a = [];
a[12] = 1; // 在索引12位置添加一个元素
console.log(a.length); // 输出 13
console.log(a); // 输出 [ <12 empty items>, 1 ]

在上面的例子中，我们创建了一个稀疏数组，只在索引12的位置添加了一个值，并且数组的长度是13。如果你尝试访问其它位置上的元素（比如 a[0]），你会得到 undefined。

当你遍历一个稀疏数组时，需要决定是遍历整个数组（包括那些不存在的元素）还是只遍历实际存在的元素。

3. 使用 `forEach` 方法

Array.prototype.forEach 是一种替代循环的方法。它接收一个回调函数，对数组中的每个元素执行该函数，非常方便且简洁。

示例代码：

const myStringArray = ["Hello", "World"];
myStringArray.forEach(function(s) {
  console.log(s); // 输出 Hello 和 World
});

你也可以使用箭头函数来简化代码：

myStringArray.forEach(s => {
  console.log(s); // 输出 Hello 和 World
});

与 for...of 不同，.forEach 只会对实际存在的元素执行回调函数，因此在稀疏数组中会显得特别有用。如果你有一个具有大量空洞的稀疏数组，并且只希望处理实际存在的元素，那么 forEach 是一个不错的选择。

4. 使用传统的 `for` 循环

最为传统且广泛兼容的方法是使用标准的 for 循环。它适用于所有版本的 JavaScript，并且可以灵活处理稀疏数组。

示例代码：

const myStringArray = ["Hello", "World"];
for (let i = 0; i < myStringArray.length; i++) {
  const s = myStringArray[i];
  console.log(s); // 输出 Hello 和 World
}

在上面的代码中，我们显式地管理索引 i 并使用 myStringArray[i] 来获取数组元素。这种方法的优势在于可以灵活处理各种情况，例如稀疏数组。

如果你只想处理实际存在的元素，可以添加一个条件判断：

for (let i = 0; i < myStringArray.length; i++) {
  if (i in myStringArray) {
    const s = myStringArray[i];
    console.log(s); // 输出 Hello 和 World
  }
}

5. 使用 `Array.prototype.entries` 获取索引

for...of 循环虽然简洁，但是不提供索引。如果你需要在遍历数组的同时获取索引，可以使用 Array.prototype.entries 方法。该方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引及其对应的元素。

示例代码：

const myStringArray = ["Hello", "World"];
for (const [i, s] of myStringArray.entries()) {
  console.log(`Index: ${i}, Value: ${s}`); // 输出 Index: 0, Value: Hello 和 Index: 1, Value: World
}

通过解构赋值，我们可以同时获取到索引和元素，达到遍历时需要索引的要求。

6. 不建议使用 `for...in` 遍历数组

虽然 for...in 可以遍历对象的属性名，但是并不推荐用于数组的遍历。因为数组在 JavaScript 中也是对象，for...in 会遍历数组的所有可枚举属性（包括自定义属性和方法），并且不保证顺序。

示例代码：

const myStringArray = ["Hello", "World"];
for (let key in myStringArray) {
  if (myStringArray.hasOwnProperty(key)) {
    console.log(myStringArray[key]);
  }
}