js高阶函数之filter/map/reduce学习笔记

js高阶函数之filter/map/reduce

浅谈

1、filter 过滤、筛选
很明显，它的作用就是遍历数组留下满足条件的数组元素，去掉不符合要求的数组元素。然后自动的把满足条件的数组元素放到一个自动生成的新数组里。
参数为函数，利用这个函数对数组元素进行校验，返回值是布尔值。将为true的元素保留，为false的过滤。用法如下：

let nums = [1,2,4,10,20,30];
let nums1 = nums.filter(
     function (n) { //n是每次回调取到的数组元素
         return n>6         //将满足大于6的元素保存
                  }
) 
console.log(nums1)

结果：

[10, 20, 30]

2、map 映射
简单来说就是对数组遍历，把数组元素按你的要求做变换后再还给你一个数组元素变换后的新数组，数组长度不变。
map接收的参数也是一个函数，函数内部对数组元素做处理后返回。用法如下：

let nums = [1,2,4,10,20,30];
let nums1 = nums.map(
    function (n) { //n是每次回调取到的数组元素
        return  n*6         //每个元素乘以6
}
) 
console.log(nums1)

结果：

[6, 12, 24, 60, 120, 180]

3、reduce 汇总、累计
结果是一个值，而不像map，filter得到的都是一个新数组。 reduce比前两个难一点，理解后还是很简单。实际上就是一个变量(preValue)每次取到的都是上一次返回的结果值，而这个变量每次都与当前的数组元素发生一些关系（加减乘除…），再返回给下一次处理，直到数组遍历完毕。
参数：函数和汇总初始值（可不要，值多少自定）
而这个函数必须有两个参数，
第一个是preValue(参数名随意），上次数组内容处理后汇总的结果值；第二个是n（参数名随意），每次取出的数组元素。用法如下：

let nums = [1,2,4,10,20,30];
let nums1 = nums.reduce(
     function (preValue,n) { //n是每次回调取到的数组元素
         return  preValue+n*6   //将元素乘以6相加
                   },0) 
console.log(nums1)

结果：

402

这里：
0是自定义的初始值
第一次：preValue -> 0，n->1 //perValue + n x 6 = 0 + 16 = 6
第二次：preValue -> 6，n->2 //perValue + n x 6 = 6 + 26 = 18
第三次：preValue -> 18，n->4 //perValue + n x 6 =18 + 46 = 42
第四次：preValue -> 42，n->10 //perValue + n x 6 = 42 + 106 = 102
…………

链式调用

这三个高阶函数结合更简便的使用方法是结合箭头函数实现链式调用像实现上面三个条件拿到最终结果，只需要一段即可

let nums = [1,2,4,10,20,30];
let nums1 = nums.filter( 
            n => n>6  ).map( 
            n => n*6 ).reduce( 
            (preValue,n) => preValue + n 
            )
console.log(nums1)

结果：

360

真方便…