掌握数组遍历秘诀：forEach、for ... in、for ... of 全解析

2022-11-26 19:23:49

数组遍历三剑客：JavaScript 数组遍历的利器

在 JavaScript 中，数组遍历是日常操作中的重中之重。无论是处理数据还是生成列表，数组遍历都是必不可少的。而 JavaScript 也为我们提供了多种数组遍历的方法，其中最常用的莫过于 forEach、for ... in 和 for ... of。这三个方法各有千秋，适用不同的场景。

forEach：数组遍历的利器

forEach 方法是专为数组遍历而生的。它采用回调函数的形式，对数组中的每个元素进行处理。forEach 方法的语法非常简单：

array.forEach(callback(currentValue, index, array))

callback：一个处理数组元素的回调函数。
currentValue：当前正在处理的数组元素。
index：当前数组元素的索引。
array：被遍历的数组。

forEach 方法最大的优点在于其简洁性和可读性。它使用回调函数来处理数组元素，避免了繁琐的循环结构。同时，forEach 方法还支持链式调用，使代码更加简洁。

代码示例：

const numbers = [1, 2, 3, 4, 5];
numbers.forEach((number) => {
  console.log(number);
}); // 输出：1 2 3 4 5

for ... in：遍历对象和数组的万能钥匙

for ... in 循环是一种遍历对象和数组的通用方法。它通过循环遍历对象的属性或数组的索引，从而访问对象或数组中的元素。for ... in 循环的语法如下：

for (variable in object) {
  // 代码块
}

variable：循环变量，用于存储对象的属性名或数组的索引。
object：要遍历的对象或数组。

for ... in 循环最大的优点在于其通用性。它既可以遍历对象，也可以遍历数组。同时，for ... in 循环还支持链式调用，使代码更加简洁。

代码示例：

const person = { name: "John Doe", age: 30 };
for (const property in person) {
  console.log(`${property}: ${person[property]}`);
} // 输出：name: John Doe age: 30

for ... of：专为数组遍历而生的新秀

for ... of 循环是 ES6 中引入的新特性，专门用于遍历数组和可迭代对象。它的语法与 for ... in 循环非常相似：

for (variable of iterable) {
  // 代码块
}

variable：循环变量，用于存储数组或可迭代对象中的元素。
iterable：要遍历的数组或可迭代对象。

for ... of 循环最大的优点在于其简洁性和可读性。它与 forEach 方法一样，都采用回调函数的形式来处理数组元素，避免了繁琐的循环结构。同时，for ... of 循环还支持链式调用，使代码更加简洁。

代码示例：

const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
  console.log(number);
} // 输出：1 2 3 4 5

三剑客的异同对比

forEach、for ... in 和 for ... of 三个数组遍历方法各有千秋，适用不同的场景。下表总结了它们之间的异同：

特性	forEach	for ... in	for ... of
适用范围	数组	对象和数组	数组和可迭代对象
语法	array.forEach(callback)	for (variable in object)	for (variable of iterable)
回调函数	是	否	是
链式调用	支持	支持	支持
性能	最快	最慢	中等