JavaScript高阶函数之filter、map、reduce

filter（过滤）

用法： 用于过滤，就是把数组中的每个元素，使用回调函数func进行校验，回调函数func返回一个布尔值，将返回值为 true 的元素放入新数组

参数：函数

返回值： Boolean

写法一：

//箭头函数 参数n为数组元素
const nums = [20,30,110,60,190,50]
let newNums =nums.filter(n =>{
  return n < 100
})

写法二：

//普通函数
 let newNums = nums.filter(function(n) {
		return n < 100;
      })

map

用法： 遍历原数组，将元素处理然后放入到新数组中

参数： 函数

返回值： 新数组元素

写法一：

//箭头函数
let newNums2 =newNums.map(n =>{
  return n*2
})

写法二：

let newNums2 =newNums.map(function(n){
  return n*2
})

关于map方法是否会改变原数组

map()为操作数组的一种方法，官方文档显示：

1. map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
2. map() 方法按照原始数组元素顺序依次处理元素。
3. 注意： map() 不会对空数组进行检测。

但是官方文档中的说法并非十分准确，在实际的开发中需要依据不同的数据做不同的处理。

当数组为基础类型时原数组不变：

let array=[1,2,4,6]
let newArray=array.map((item) => item*2)
console.log(array); // [1,2,4,6]
console.log(newArray);//[2, 4, 8, 12]

当数组为引用类型时原数组发生改变：

let array = [{ name: 'Anna'}, { name: 'James'}]
let newArray=array.map((item) => {
    item.like='eat';
    return item;
})
console.log(array); // [{ name: 'Anna', like: "eat"},{ name: 'James', like: "eat"}]
console.log(newArray);//[{ name: 'Anna', like: "eat"},{ name: 'James',like: "eat"}]

如何避免原数组发生改变

let array = [{ name: 'Anna'}, { name: 'James'}]
let newArray=array.map((item) => {
    const obj = { ...item, like:'eat'};
    return obj;
})
console.log(array); // [{ name: 'Anna'},{ name: 'James'}]
console.log(newArray);//[{ name: 'Anna', like: "eat"},{ name: 'James', like: "eat"}]

reduce

用法： 用于对数组中所有的内容进行汇总(相乘、相加…)

参数： 函数

返回值： 新数组元素

示例：

//将数组中所有元素加上n
let arr = [20,40,80,100]
let sum = arr.reduce(function (preValue, n) {
  return preValue + n
},0)
/*
	第一次：preValue -> 0  ; n-> 20
	第二次：preValue -> 20 ; n-> 40
	第一次：preValue -> 60 ; n-> 80
	第一次：preValue -> 140; n-> 100
*/

preValue：上一次汇总的值，即return的值，初始值设置为0

n: 是指遍历数组中的元素

链式调用

将数组arr中小于10的元素*2然后再相加

var arr = [2,6,8,11,20,32];
let total = arr.filter(n => n < 10).map(n => n*2).reduce((pre,n) => pre + n)
console.log(total); // 32