JavaScript 遍历数组

遍历数组就是把数组里的元素挨个取出来处理一遍。比如输出所有元素，或者把所有元素加起来。上一篇文章 JavaScript 数组基本操作讲了数组的读写，这一节学习两种遍历方式。

第一种是用 for 循环按索引遍历，第二种是 ES6 的 for…of，直接取元素值。

for 循环按索引遍历

数组的索引从 0 开始，到 length - 1 结束。用 for 循环让计数器走完整个范围，配合 数组名[索引] 就能拿到每个元素。for 循环的基本写法见 JavaScript for 循环。

先看输出所有元素的例子。

const fruits = ['苹果', '香蕉', '橙子'];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

运行后依次输出苹果、香蕉、橙子，每行一个。i 从 0 开始，每次加 1，i 等于 length 时循环结束。

再看求总和的例子。

const scores = [80, 92, 75, 88];
let total = 0;
for (let i = 0; i < scores.length; i++) {
  total += scores[i];
}
console.log(total);

输出 335。total 在循环里反复累加，需要重新赋值，所以要声明为 let。

for…of 是 ES6 提供的遍历语法，写法更简洁。它每次循环直接取出一个元素值，不需要索引。

const fruits = ['苹果', '香蕉', '橙子'];
for (const fruit of fruits) {
  console.log(fruit);
}

输出结果和上面的 for 循环一样。循环变量声明为 const 没问题，因为每次循环 fruit 都是一个新的变量。

求和用 for…of 写出来是这样的。

const scores = [80, 92, 75, 88];
let total = 0;
for (const score of scores) {
  total += score;
}
console.log(total);

输出 335，和 for 循环的结果一样。

选择标准很简单，看遍历时需不需要索引。

需要索引时用 for。比如要把第几个也输出，或者只处理某些位置的元素。

const fruits = ['苹果', '香蕉', '橙子'];
for (let i = 0; i < fruits.length; i++) {
  console.log(i + 1 + '。' + fruits[i]);
}

依次输出 1。苹果、2。香蕉、3。橙子，每行一个。这里 i 参与了输出，for…of 就做不到。

只需要元素值时用 for…of，代码更简洁，也不会出现越界访问的问题。

字符串和数组一样可以按顺序取出每个字符，所以 for…of 同样适用于字符串。

const word = 'abc';
for (const ch of word) {
  console.log(ch);
}

依次输出 a、b、c，每行一个。

补充一句，for…in 是给对象遍历用的，遍历数组会拿到索引而不是元素，结果不可靠。数组遍历一律用 for 或 for…of。

遍历数组有两种方式。需要索引时用 for 循环配合 arr[i]，只需要元素值时用 for…of 更简洁。for…of 也可以遍历字符串。数组遍历不要用 for…in，那是对象专用的语法。