掌握JavaScript中数组遍历的7种方法

作为JavaScript开发人员，熟悉数组的遍历和操作是非常重要的。数组遍历是处理和操作数组元素的基本需求之一。本文将介绍JavaScript中的10种常见数组遍历方法，帮助你成为数组操作的达人。

数组的遍历for循环forEach方法for…of循环map方法reduce方法for…in循环filter方法

for循环

or循环是最基本也是最常用的数组遍历方法之一。它使用一个计数器变量来迭代数组元素，通常形式如下：

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循环会自动迭代数组，对每个元素执行回调函数，并跳过数组中未定义的元素。

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() 方法语法如下：

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循环不仅会遍历对象自身的属性，还会遍历对象原型链上的属性。因此，在使用for…in循环时，需要使用hasOwnProperty()方法来判断对象是否拥有该属性，以避免不必要的属性访问。

filter方法

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

filter() 方法的语法如下：

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

第一个参数是回调函数，它可以接受三个参数：当前处理的元素值currentValue、当前处理的元素索引index、当前正在操作的数组对象array。第二个参数thisValue可选，表示在执行回调函数时，将其作为函数体内this关键字的值。

例如，我们可以使用 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() 方法还有一些高级用法，例如可以用它来实现数组的最大值、最小值、求平均值等操作。通过在回调函数中编写相应的逻辑，可以灵活地对数组进行累积运算。

完整项目附件：点此下载