javaScript高阶函数的使用filter&map&reduce

假设有一个数组

let nums = [22,33,60,666,500,4,78,900]

它有以下三个需求

1. 取出所有小于100的数字
2. 将所有小于100的数字*2
3. 将所有元素相加，得到最终结果

一般做法

    //  1. 取出所有小于100的数字
    let newNums = [];
    for (let num of nums) {
        if(num < 100){
            newNums.push(num);
        }
    }

    //  2. 将所有小于100的数字*2
    let newNums = [];
    for (let num of nums) {
        if(num < 100){
            newNums.push(num);
        }
    }

    //  3. 将所有元素相加，得到最终结果
    let total = 0;
    for (let num of nums) {
        total += num;
    }

使用高阶函数完成需求

filter的使用完成需求一：

filter可以过滤数组中的元素，使用时需要传入一个回调函数

    let newNums = nums.filter(function(num){
        return num < 100;
    });
    console.log(newNums);

回调函数必须返回一个boolean值，当返回的值为true时会自动将这次回调的值（num）加入新数组（newNums）中，为false时过滤掉这次回调的值。

filter每遍历出数组中的一个元素都会重新调用一次回调函数，也就是说filter会依次重数组中取出来一个数，用来执行回调函数，最后一共执行nums.length次。

• 第一次重nums中取出22，执行回调函数判断是否小于100
• 第一次重nums中取出33，重新执行回调函数判断是否小于100

......

map的使用完成需求二：

    let newNums = nums.map(function(num){
        return num * 2;
    });
    console.log(newNums);

• map的执行方式与filter非常相似，但与filter不同的时，filter只能过滤数组的元素，不能处理，返回的是原素组的元素。
• 而map函数的回调函数可以返回一个值或表达式，处理完原数组的元素后会返回一个新的数组。

使用reduce对数组所有内容进行汇总

    let sum = nums.reduce(function(preValue,num){
        return preValue+ num;
    },0);
    console.log(sum);

reduce可以传入两个参数，第一个为回调函数，第二个为初始化值
回调函数中preValue初始值为我们传入的初始化值，num为这次遍历出的数组元素。

回调函数第一次执行：

• preValue 为初始化值 0 ；num为数组第一个元素22 ； sum为0+22

回调函数第二次执行：

• preValue 值为当前sum的值 0+22 ；num为数组第二个元素33 ； sum为0+22+33

回调函数第三次执行：

• preValue 值为当前sum的值 0+22+33 ；num为数组第三个元素60 ； sum为0+22+33+60
  ......

高阶函数的链式编程

    //  1. 取出所有小于100的数字-->将所有元素*2-->将所有元素相加
    let newNums = nums.filter(function(num){
        return num < 100;
    }).map(function(num){
        return num * 2
    }).reduce(function(preValue,num){
        return preValue + num
    },0);
    console.log(newNums);

箭头函数写法：

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