前言

这次主要学习三个高级函数filter、reduce、map，当时第一次接触学习之后，留下了非常深刻的印象，所以想分享出来，大家一起学习。这次结合着小案例学习，更好的理解

本次先会用到for of方法来实现完成需求，在通过高级函数的方法实现，再进一步结合链式方法或箭头函数实现。???????

正文

需求

1.需求: 取出所有小于100的数字

2.需求:将所有小于100的数字全部*2

3.需求:将需求2中所以数字相加求和

for in方法实现

const arr=[255,100,120,10,55,5,45]
const newNum=[]
for(let i of arr){
## console.log(i)
    if(i<100){
	newNum.push(i)      
    }
}
console.log(newNum)  //[10, 55, 5, 45]

const new2Num=[]
for(let i of newNum){
    new2Num.push(i*2)
}
console.log(new2Num)  //[20, 110, 10, 90]

let Num=0
for(let i of new2Num){
    Num+=i
}
console.log(Num)
主要使用数组的push方法，所以每次需要新建一个数组来接收结果
 

filter、reduce、map函数实现

filter函数的使用,filter的参数是一个回调函数，回调函数结果必须返回一个布尔值

当返回true时,会自动将这次回调的形参返回到数组中,所以需要一个新数组来接收

当返回false,会自动过滤掉结果

可以用它来实现取出所有小于100的数字筛选的需求，也是更加高级有效的语法，如下

const arr=[255,100,120,10,55,5,45]
let newNum=arr.filter(function(i){
    return i<100
}
console.log(newNum)//[10, 55, 5, 45]
 

map函数的使用：通过指定函数处理数组中的每一个元素,并返回一个处理后的新数组。

可以用来处理需求所有小于100的数字全部*2 ，如下

let new2Num=newNum.map(function(i){
    return i*2
})
console.log(new2Num)//[20, 110, 10, 90]
 

reduce函数的使用:reduce作用对数组中所有的内容进行汇总

需要传两个参数，第一个参数是函数，有累加的作用，第二个参数代表初始值,默认是数组第一个元素，如果是0也可以不传，举需求3为例，将需求2中所以数字相加求和，具体实现过程如下

第一次: preValue<-0 i<-20 ，以此类推

第二次: preValue 20 i 110

第二次: preValue 130 i 10

第二次: preValue 140 i 90

230

let Num=new2Num.reduce(function(preValue,i){
	return preValue+=i
},0)
console.log(Num) // 230
 

简写

以上其实还可以在继续简写，用更少的代码量，实现同样的需求.
因为他们每次都会返回一个新的数组，所有可以通过链式编程或箭头函数

其实个人对简写这种不是很感冒，可能是因为我还在学习阶段，基础理解更重要，不过对外面提高很有作用，吼吼吼吼

箭头函数

const arr=[255,100,120,10,55,5,45]
let total = arr.filter(i=>i<100).map(i=>i*2).reduce((PreValue,i)=>PreValue+i)
console.log(total) // 230
 

链式编程

let Num=arr.filter(function(n){
	return n<100
}).map(function(n){
	return n*2
}).reduce(function(preValue,n){
	return preValue+=n
})
console.log(Num)//230
 

小结

filter函数：

主要是过滤作用，筛选符合条件的所有元素，为true就返回一个新的数组

map函数：

通过函数处理原数组中的每一个元素,并返回一个处理后新的数组。

reduce函数：

通过函数对数组里的元素进行累加处理，返回一个结果