JS数组遍历方法

117 阅读2分钟

JavaScript 中常见的数组遍历方法有以下几种:

  1. for 循环
  2. forEach() 方法
  3. map() 方法
  4. filter() 方法
  5. reduce() 方法

下面对每种方法进行详细解释,并给出相应的示例代码。

1. for 循环

for 循环是最基本的数组遍历方式,通过循环数组的索引来访问数组元素。它的优点是简单易懂,但缺点是代码量较多,容易出错。

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

2. forEach() 方法

forEach() 方法是 JavaScript 中的一个数组迭代方法,用于遍历数组的每个元素。它接受一个回调函数作为参数,在遍历数组的同时执行回调函数。该方法不会改变原始数组。

 javascriptCopy code
 const arr = [1, 2, 3, 4, 5];
 ​
 arr.forEach(function(item) {
   console.log(item);
 });

3. map() 方法

map() 方法也是 JavaScript 中的一个数组迭代方法,用于遍历数组的每个元素并返回一个新数组。它接受一个回调函数作为参数,在遍历数组的同时执行回调函数,并将回调函数的返回值存储到一个新数组中。该方法不会改变原始数组。

 javascriptCopy code
 const arr = [1, 2, 3, 4, 5];
 ​
 const newArr = arr.map(function(item) {
   return item * 2;
 });
 ​
 console.log(newArr); // [2, 4, 6, 8, 10]

4. filter() 方法

filter() 方法是 JavaScript 中的一个数组迭代方法,用于遍历数组的每个元素并返回一个新数组。它接受一个回调函数作为参数,在遍历数组的同时执行回调函数,并将回调函数返回值为 true 的元素存储到一个新数组中。该方法不会改变原始数组。

 javascriptCopy code
 const arr = [1, 2, 3, 4, 5];
 ​
 const newArr = arr.filter(function(item) {
   return item % 2 === 0;
 });
 ​
 console.log(newArr); // [2, 4]

5. reduce() 方法

reduce() 方法是 JavaScript 中的一个数组迭代方法,用于遍历数组的每个元素并返回一个累加值。它接受一个回调函数作为参数,在遍历数组的同时执行回调函数,并将回调函数返回值作为下一次执行回调函数时的第一个参数(累加值)。该方法不会改变原始数组。

 javascriptCopy code
 const arr = [1, 2, 3, 4, 5];
 ​
 const sum = arr.reduce(function(acc, item) {
   return acc + item;
 }, 0);
 ​
 console.log(sum); // 15

在上面的示例代码中,reduce() 方法将数组 arr 中的所有元素相加并返回累加值 sumreduce() 方法接受两个参数:一个回调函数和一个初始值(可选)。回调函数接受两个参数:累加值和当前元素的值。在每次执行回调函数时,累加值将更新为上一次的返回值,当前元素的值将更新为数组中的下一个元素的值。