JS数组遍历：for、forEach、map、filter、reduce等7种方法对比

for循环

for循环是JavaScript中最基础且应用广泛的数组遍历方式。它依赖一个计数器变量来逐个访问数组元素，基本语法结构如下：

Copy Code
for (initialExpression; condition; incrementExpression) {
  statement;
}

该结构中，initialExpression用于在循环开始前执行初始化操作，通常设定计数器初始值；condition为每次迭代前的判断条件，仅当结果为真时循环继续；incrementExpression则在每次迭代结束后执行，用于更新计数器状态。

在数组遍历场景中，我们可以借助for循环的计数器变量来索引并访问数组内的每一个元素，具体实现如下：

javascriptCopy Code
var array = [1, 2, 3, 4, 5];
for (var i = 0; i < array.length; i++) {
  console.log(array[i]);
}

上述代码中，i作为计数器变量从0开始，每次循环递增1，直至i达到数组长度。在循环体内部，通过array[i]的形式即可获取当前索引对应的元素值。

forEach方法

forEach是JavaScript数组对象提供的一个内置方法，用于对数组中的每个元素执行指定的回调函数。该方法会自动遍历数组，对每个元素调用回调函数，并自动跳过数组中的空位（未定义元素）。

forEach方法的语法定义如下：

javascriptCopy Code
array.forEach(function(currentValue, index, array) {
  // 执行内容
}, thisValue);

其中，第一个参数为回调函数，接收三个参数：currentValue表示当前处理的元素值，index表示当前元素的索引，array表示当前正在操作的数组对象。第二个参数thisValue为可选参数，用于指定回调函数执行时的this指向。

例如，使用forEach方法遍历数组并打印每个元素的操作如下：

javascriptCopy Code
var array = [1, 2, 3, 4, 5];
array.forEach(function(element) {
  console.log(element);
});

for...of循环

for...of是ES6标准引入的新型循环语法，适用于遍历数组、字符串、Map、Set等可迭代对象。与传统for循环不同，for...of无需手动管理初始化变量、循环条件和迭代器，而是直接遍历可迭代对象中的每个元素。

for...of循环的基本语法如下：

javascriptCopy Code
for (variable of iterable) {
  // 循环体
}

其中，variable代表在每次迭代中被赋值为可迭代对象下一个元素的变量，iterable为可迭代对象（如数组或字符串）。在循环体内，通过variable即可访问当前遍历到的元素。

例如，使用for...of循环遍历数组并输出元素值的代码如下：

javascriptCopy Code
var array = [1, 2, 3, 4, 5];
for (var element of array) {
  console.log(element);
}

在此示例中，element变量依次被赋值为数组中的每个元素，并在循环体内输出至控制台。

需注意，for...of仅适用于可迭代对象，无法直接用于普通对象。若需遍历普通对象的属性，应使用for...in循环。

上述示例中的回调函数仅接收一个参数element，代表当前处理的元素值，该值会依次传入数组的每个元素。循环结束后，数组所有元素均被遍历并输出至控制台。

值得注意的是，forEach方法会自动跳过数组中的空位（未定义元素），因此在使用时无需额外处理数组空洞问题。

map方法

map()是JavaScript数组的内置方法，用于对数组中每个元素执行指定函数，并返回一个由回调函数返回值组成的新数组。map不会修改原始数组，而是生成并返回一个新数组。

map()方法的语法定义如下：

javascriptCopy Code
array.map(function(currentValue, index, array) {
  // 执行内容
}, thisValue);

第一个参数为回调函数，接收三个参数：currentValue表示当前处理的元素值，index表示当前元素的索引，array表示当前正在操作的数组对象。第二个参数thisValue为可选参数，用于指定回调函数执行时的this指向。

例如，使用map()方法遍历数组并将每个元素乘以2的操作如下：

javascriptCopy Code
var numbers = [1, 2, 3, 4, 5];
var doubledNumbers = numbers.map(function(num) {
  return num * 2;
});
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

上述示例中，回调函数接收一个参数num，代表当前处理的元素值，该值依次传入数组的每个元素。循环结束后，doubledNumbers数组包含原数组每个元素乘以2后的结果。

需注意，map()方法返回一个新数组，而非修改原有数组。它也不会改变原数组中的元素值。

for...in循环

for...in是JavaScript中用于遍历对象属性的循环语句。与传统for循环类似，for...in需要指定一个迭代变量和一个可枚举对象。每次迭代中，迭代变量被赋值为可枚举对象的下一个属性名，随后通过该属性名访问对应的属性值。

for...in循环的基本语法如下：

javascriptCopy Code
for (variable in object) {
  // 循环体
}

其中，variable代表在每次迭代中被赋值为对象下一个可枚举属性名的变量，object为普通对象。在循环体内，通过variable即可访问当前遍历到的属性值。

例如，使用for...in循环遍历对象并输出每个属性的名称和值的操作如下：

javascriptCopy Code
var obj = {
  name: 'Tom',
  age: 18,
  gender: 'Male'
};
for (var prop in obj) {
  console.log(prop + ': ' + obj[prop]);
}

上述示例中，prop变量依次被赋值为对象obj中的每个属性名，随后在循环体内通过obj[prop]访问对应的属性值。循环结束后，所有属性名和属性值均输出至控制台。

需注意，for...in不仅遍历对象自身的属性，还会遍历原型链上的属性。因此，使用时建议结合hasOwnProperty()方法判断对象是否拥有该属性，以避免访问不必要的继承属性。

filter方法

filter()是JavaScript数组的内置方法，用于筛选满足指定条件的数组元素，并返回一个包含符合条件元素的新数组。filter不会修改原始数组，而是生成并返回一个新数组。

filter()方法的语法定义如下：

javascriptCopy Code
array.filter(function(currentValue, index, array) {
  // 指定条件判断
}, thisValue);

例如，使用filter()方法筛选出数组中大于等于5的元素的操作如下：

javascriptCopy Code
var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var filteredNumbers = numbers.filter(function(num) {
  return num >= 5;
});
console.log(filteredNumbers); // [5, 6, 7, 8, 9, 10]

上述示例中，回调函数接收一个参数num，代表当前处理的元素值，该值依次传入数组的每个元素。回调函数中的判断条件return num >= 5表示仅当元素大于等于5时返回true，该元素才会被保留在新数组中。

需注意，filter()方法返回一个新数组，而非修改原有数组。它也不会改变原数组中的元素值。若无满足条件的元素，返回的新数组将为空数组。

reduce方法

reduce()是JavaScript数组的内置方法，用于对数组元素进行累积操作，将数组缩减为单个值。该方法通过提供的回调函数实现累积逻辑，并返回最终结果。

reduce()方法的语法定义如下：

javascriptCopy Code
array.reduce(function(accumulator, currentValue, index, array) {
  // 累积操作
}, initialValue);

第一个参数为回调函数，接收四个参数：accumulator表示累积器，currentValue表示当前处理的元素值，index表示当前元素的索引，array表示当前正在操作的数组对象。第二个参数initialValue为可选参数，表示初始累积值。

例如，使用reduce()方法对数组元素求和的操作如下：

javascriptCopy Code
var numbers = [1, 2, 3, 4, 5];
var sum = numbers.reduce(function(total, num) {
  return total + num;
}, 0);
console.log(sum); // 15

上述示例中，回调函数接收两个参数total和num，total表示累积值（初始值为0），num表示当前处理的元素值。每次迭代中，回调函数将total与num相加并返回新的累积值。最终，reduce()方法返回最后一次迭代后的累积值。

需注意，若未提供初始值(initialValue)，数组的第一个元素将作为初始累积值，迭代从第二个元素开始。若数组为空且未提供初始值，将抛出TypeError异常。

此外，reduce()还有多种高级用法，如计算数组最大值、最小值或平均值等。通过在回调函数中编写相应逻辑，可灵活实现各类数组累积运算。

以上为JavaScript中数组遍历的7种方法详解，更多关于JavaScript数组遍历的资料请查阅本站其他相关文章。

JavaScript数组遍历的7种核心方法详解