在JavaScript中使用for循环遍历数组的现代语法

在 JavaScript 中，我们可以使用多种方式遍历数组，其中最简单、最基本的方式就是使用 for 循环。而在现代的 JavaScript 中，有一些语法糖可以用来简化 for 循环语句的编写，本文就来介绍一下这些语法糖。

传统的 for 循环

传统的 for 循环语句由三个语句组成：初始化语句、条件语句和更新语句。在遍历数组时，通常会用一个变量作为数组的下标。下面是一个使用传统 for 循环来遍历数组的示例代码：

const arr = [1, 2, 3, 4, 5];

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

这段代码的输出结果是：

1
2
3
4
5

for...in 循环

除了传统的 for 循环，还有一种简单的语法糖：for...in 循环。这种循环语句可以遍历对象的属性，也可以遍历数组的索引。

下面是一个使用 for...in 循环来遍历数组的示例代码：

const arr = [1, 2, 3, 4, 5];

for (let index in arr) {
  console.log(arr[index]);
}

这段代码的输出结果和传统 for 循环一样：

1
2
3
4
5

需要注意的是，for...in 循环是不保证遍历顺序的。因此，如果数组中的元素有顺序要求，最好还是使用传统 for 循环。另外，使用 for...in 循环遍历数组时，index 是字符串类型的，需要转换成数字类型才能使用。

for...of 循环

在现代的 JavaScript 中，还有一个语法糖：for...of 循环。这种循环语句可以遍历数组的元素，而不是数组的索引。与 for...in 循环不同的是，for...of 循环是按顺序遍历数组的。

下面是一个使用 for...of 循环来遍历数组的示例代码：

const arr = [1, 2, 3, 4, 5];

for (let item of arr) {
  console.log(item);
}

这段代码的输出结果和传统 for 循环一样：

1
2
3
4
5

需要注意的是，for...of 循环只能用于遍历可迭代对象。目前，JavaScript 中的可迭代对象有数组、字符串、Map、Set 等。如果要遍历对象的属性，仍然需要使用 for...in 循环。

forEach 方法

除了 for 循环和 for...of 循环之外，还可以使用数组的 forEach 方法来遍历数组。

下面是一个使用 forEach 方法来遍历数组的示例代码：

const arr = [1, 2, 3, 4, 5];

arr.forEach(item => console.log(item));

这段代码的输出结果和传统 for 循环一样：

1
2
3
4
5

需要注意的是，forEach 方法没有返回值，不能使用 break 或 continue 语句中断循环。

参考资料

• MDN web docs: 循环与迭代