JS中的filter、map、reduce1、filter2、map3、reduce

80 阅读 0 评论 53 点赞

我是靠谱客的博主动人路人，这篇文章主要介绍JS中的filter、map、reduce1、filter2、map3、reduce，现在分享给大家，希望可以做个参考。

JS中的高阶函数

1、filter
2、map
3、reduce

1、filter

filter函数会返回一个新数组
filter中的回调函数有一个要求：必须返回一个boolean值
true：当返回true时，函数内部会自动将这次回调的值(n)加入到新数组中
false：当返回false时，函数内部会自动过滤掉这次的值

注意：不会对数组做一些改变，只起到一定的过滤筛选作用。
注意： filter() 不会对空数组进行检测。

代码展示：

复制代码

1
2
3
4
5
6
let arr = [1, 3, 34, 6,50, 100];
let newArr = arr.filter(function (n) {
  return n <= 25;
})
console.log(newArr);

展示效果：
在这里插入图片描述

2、map

map函数会返回一个新数组。
map函数在遍历数组的过程中，可以对数组做一些改变，并放到新数组中
参数：可传入三个参数
currentValue：当前元素的值必须
index：当前元素的索引值可选
arr：当前元素属于的数组对象可选

注意：map() 不会对空数组进行检测。
注意：map() 不会改变原始数组。

代码展示：

复制代码

1
2
3
4
5
6
let arr = [1, 30, 20, 4];
let newArr = arr.map(function (n) {
  return n * 2;
})
console.log(newArr);

显示效果：

在这里插入图片描述

3、reduce

reduce()方法接收一个函数作为累加器，最终将数组计算为一个值
注意：reduce()对于空数组不会执行回调函数
参数：
total：必需。初始值，或者计算结束后的返回值
currentValue：必需。当前元素
currentIndex：可选。当前元素的索引
arr：可选。当前元素所属的数组

initialValue：可选。传递给函数的初始值

代码展示：

复制代码

1
2
3
4
5
6
7
8
9
10
let arr = [10, 20, 40, 80, 100];
let newArr = arr.filter(function (n) {
  return n <= 50;
}).map(function (n) {
  return n * 2;
}).reduce(function (prevalue, n) {
  return prevalue + n;
}, 0)
console.log(newArr);

代码优化：使用箭头函数

复制代码

1
2
3
4
let arr2 = [10, 20, 40, 80, 100];
let new2Arr = arr.filter(n => n <= 50).map(n => n * 2).reduce((prev, n) => prev + n , 0);
console.log(new2Arr)