forEach()、map()、filter()、reduce()的用法

2020-11-14 21:33:09 阅读：154 来源： 互联网

标签：map arr console reduce filter item let 数组返回值

1.forEach()

forEach方法循环数组中每一个元素并采取操作，没有返回值。它接受一个函数作为参数，这个函数接受三个参数：当前值、当前位置、整个数组。

let arr = [1, 2, 3];
arr.forEach(function( item, index, array){
    console.log(item+1, index)
})
//2 0
//3 1
//4 2

2.map()

map方法遍历数组中每一个元素，有返回值，返回值是每一次执行的结果组成的新数组。不会改变原数组

map方法也是接受一个函数作为参数，这个函数接受三个参数：当前值、当前位置、整个数组。

let arr = [1, 2, 3];
let newArr = arr.map(function(item, index, array){
   return item*2; 
})
console.log(newArr)  //[2, 4, 6]
console.log(arr)  //[1, 2, 3]

3.filter()

filter方法过滤数组成员，满足条件的成员组成一个新数组返回。filter也不会改变原数组。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(function(item, index, array){
        return item > 3
})
console.log(newArr, arr) //[4, 5], [1, 2, 3, 4, 5]

由于map、filter的返回值是数组，因此也可以链式使用。

let arr = [1, 2, 3, 4];
let newArr = arr.map(function(item){
   return item*2 
}).filter(function(item){
   return item >= 6 
})
console.log(newArr)  //[6, 8]

4.reduce()

reduce一次处理数组的成员，最终累计为一个值。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.reduce(function(a, b){
  console.log(a, b);
  return a + b;  
}
console.log(arr)  //[1, 2, 3, 4, 5]
console.log(newArr)
// 1 2
// 3 3
// 6 4
// 10 5
//最后结果：15

上面代码中，reduce方法求出数组所有成员的和。第一次执行，a、b分别是数组中的第一个成员1和第二个成员2。第二次执行，a为上一轮的返回值3，b为数组的个成员3。第三次执行，a为上一轮的返回值6，b为数组的第四个成员4。第四次执行，a为上轮的返回值10，b为数组的第五个成员5。至此所有成员遍历完成，整个方法的返回值就是最后一轮的返回值15。

5.参考链接

https://wangdoc.com/javascript/stdlib/array.html

javascript中map、foreach、reduce、filter间区别？

标签：map,arr,console,reduce,filter,item,let,数组,返回值
来源： https://www.cnblogs.com/enhahaha/p/13970741.html