Javascript数组遍历详解

发布时间：2023-05-21

一、for循环遍历数组

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

通过for循环遍历数组，可以使用循环变量i来访问数组中的每一个元素。这种遍历方式是最基础的也是最常用的一种方式。但是它需要手动维护循环变量，代码的可读性相对较差。

二、forEach遍历数组

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

forEach是数组原型上的一个方法，可以直接使用。它的参数是一个函数，用于遍历数组中的每个元素。在函数内部，我们可以使用参数element来访问当前的元素。这种方式相对于for循环，代码更加简洁，可读性更好。

三、map遍历数组

const array = [1, 2, 3, 4, 5];
const result = array.map(function(element) {
  return element * 2;
});
console.log(result);

map也是数组原型上的一个方法，它可以用来遍历数组中的每个元素，并将元素通过回调函数的处理转换成一个新的数组。在回调函数中，我们可以对元素进行任意的操作，比如本例中将每个元素乘以2。map返回的是一个新的数组，所以我们需要将其赋值给一个新的变量。map在开发中使用较多，可以快速生成新的数组。

四、filter遍历数组

const array = [1, 2, 3, 4, 5];
const result = array.filter(function(element) {
  return element % 2 === 0;
});
console.log(result);

filter也是数组原型上的一个方法，它可以用来遍历数组中的每个元素，并根据条件过滤出一个新的数组。在回调函数中，我们可以对元素进行条件判断，如果返回true表示该元素符合条件，将被保留在新的数组中。在本例中，我们通过判断元素是否为偶数，将符合条件的元素放入一个新的数组中，并最终返回该数组。

五、reduce遍历数组

const array = [1, 2, 3, 4, 5];
const result = array.reduce(function(previousValue, currentValue) {
  return previousValue + currentValue;
}, 0);
console.log(result);

reduce是数组原型上的一个方法，它可以用来遍历数组中的每个元素，并将元素通过回调函数的处理迭代成一个单独的值。在回调函数中，我们可以对元素进行任意的操作，并将元素转换成一个单值。reduce的第一个参数是回调函数，回调函数的第一个参数previousValue表示上一次迭代的结果，第二个参数currentValue表示当前迭代的元素。reduce的第二个参数是回调函数的初始值，如果没有指定，将使用数组的第一个元素作为初始值。

六、for...in遍历数组

const array = [1, 2, 3, 4, 5];
for (let index in array) {
  console.log(array[index]);
}

for...in语法可以用来遍历对象中的属性，但是在遍历数组时，它会将元素的下标作为属性来进行遍历。虽然它可以达到遍历数组的目的，但是不推荐使用，因为它的遍历顺序是不可预测的，并且可能会遍历到一些非数字属性。而且在使用ESLint规范代码时，也会提示不要使用for...in来遍历数组。

推荐文章