Jscript中高阶函数filter、map和reduce的运用

需求,有一个数组[10,30,111,222,444,90,89,77]写出三个函数
1、分别对其筛选出100以下的元素
2、对筛选出的函数*2操作
3、最后得到的数组进行求和

---

常规写法

①、

const number=[10,30,111,222,444,90,89,77]

let newNumber=[];
for(let n of number){
    if(n <100){
        newNumber.push(n)
    }
}

②、

let newNumber2=[];
for(let n of newNumber){
    newNumber2.push(n*2)
}

③、

let sum=0;
for(let n of newNumber2){
    sum+=n
}

以上三个代码段均为我们的常规for循环写法

而我们如何巧妙地使用三个高阶函数filter、map和reduce进行简化代码操作呢？

---

filter高阶函数：我们把filter函数称为过滤函数，顾名思义我们可以用它来进行筛选数组中的某些元素

语法格式：对象名.filter（回调函数（）{

}）

由此可见，传入我们filter函数中的参数也是一个函数

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

let newNumber = number.filter(function (n){
    return n <100
})

我们在filter参数中传入了一个function，function内参数为n（n就是我们number的每一个对象）。其实相当于进行了八次循环，每一次循环都把n的值传进function，如果n<100，则boolean值为true，那么函数内部会自动将这次回调的n加入到新的数组newNumber中

---

 map高阶函数：我们也将其称之为映射函数

语法格式：对象名.map(回调函数(){

})

由此可见，传入我们map函数中的参数也是一个函数

let newNumber2 = newNumber.map(function (n){
    return n*2
})
console.log(newNumber2);

---

  reduce高阶函数：我们也将其称之为求和函数

语法格式：对象名.reduce(function(previousValue,n){

})

其中previousValue为上一次函数调用后的返回值，n为我们的起始值

例如：

let totalPrice = newNumber2.reduce(function (preVlaue,n){
    return preVlaue+n
},0)
console.log(totalPrice);

其中我们可以将function(){}看作是第一个参数，0为我们的n（起始值）

在这reduce内部循环中我们可以这么理解：

第一次循环——preValue:0 ,n:20

第二次循环——preValue:20 ,n:60

第三次循环——preValue:80 ,n:180 、、、、、、

 如此看来，最后一次输出的结果就是数组求和的结果

---

那么我们如何巧妙地用这三个函数去简写我们最初的三个for循环呢？ 

let total = number.filter(function (n){
    return n<100
}).map(function (n){
    return n*2
}).reduce(function (preVlaue,n){
    return preVlaue + n
},0)
console.log(total);

我们的结果也证明我们巧妙地用三个高阶函数去实现了我们的需求

---

用箭头函数去实现这三个高阶函数 

let total = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
console.log(total);