JavaScript的高阶函数 filter() | map( ) | reduce( );

在B站看视频自学Vue.js的过程中，我看了一个Up主的Vue.js的视频，虽然是根据老师录播的视频发布上去的，但是视频中授课的内容令我非常满意，老师上课讲的不仅是Vue.js的内容，还有像编程理念。我觉得应该是全B站最好的Vue.js的学习视频了！像我这种代码学渣也能学到不少东西，以下内容来自于一个B站Up主 ilovecoding 中的内容，然后是我自己总结的，如果某处有误，请大佬狠狠的批评指出！

 javaScrip高阶函数

filter | map | reduce

用实例去实践然后归纳总结才能记得住：
const newArr = [10,40,50,80,100,150,200];
1、需求：取出小于一百的数

没用高阶函数的之前的编程思路和做法

let newArr2 = [];
for(let i of newArr){
　　if(i < 100){
　　　　newArr2.push(i)
　　}
}
console.log(newArr2);

用高阶函数 filter() 可以理解成过滤器，根据条件返回一个boolean值来进行过滤

filter中的回调函数有一个要求：必须返回一个boolean值

    true：当返回true时，函数内部会自动将这次回调的n加入到新的数组中
    false：当返回false时，函数内部会自动过滤这次的 n

let newArr3 = newArr.filter(function(n){
　　return n < 100;
})
// 用高阶函数带箭头函数
let newArr4 = newArr.filter((n) => n < 100)
console.log(newArr3,newArr4);

 

2、需求：将所有小于100的数进行转化，全部* 2
没用高阶函数的之前的编程思路和做法

let newArr5 = [];
　　for(let n of newArr2){
　　　　newArr5.push(n * 2);
　　}
console.log(newArr5);

// 用高阶函数；map 可以理解为加工，根据条件变化加工成新的数组

let newArr6 = newArr2.map(function(n){
    return n * 2;
})
console.log(newArr6);
// or
let newArr7 = newArr2.map((n) => n*2);
console.log(newArr7)

 

 

3、需求：将转化过的数组进行汇总
没用高阶函数的之前的编程思路和做法

let totalAll = 0;
for(let n of newArr7){
    totalAll += n;
}
console.log(totalAll)

 

使用高阶函数 reduce() ：可以理解为汇总 ，有人说它是递归，我也还没去深入理解 

let totalAll2 = newArr7.reduce(function(preavalue1,n){
  return preavalue1 + n;
},0)
console.log(totalAll2);

 

// 还有将三个需求实现更简便的方法
// 链式编程

let totalAll3 = newArr.filter(function(n){
    return n < 100;
}).map(function(n){
    return n * 2;
}).reduce(function(preVaule,iniValue){
    return preVaule + iniValue;
},0)

console.log(totalAll3);

 

 接下来用更加简便的方法
箭头函数 其实是匿名函数的语法糖；

let totalAll4 = newArr.filter((n) => n < 100).map((n) => n*2).reduce((preVaule,iniValue) => preVaule + iniValue , 0)
console.log(totalAll4);