JavaScript高阶函数：filter、map、reduce的使用

一、需求

 首先定义一个数组:

      const nums = [100, 90, 88, 200, 30, 50, 800];

 1. 筛选出所有小于100的数字
 2. 将所有小于100的数字*2
 3. 将上一步得到的数字进行相加，得到最终结果

二、实现方式

1.JavaScript基础：通过for of 循环遍历数组

 // 1、需求：取出所有小于100的数字
      let newNums = [];
      for(let n of nums){ // n：数组里的每一个元素
        if(n < 100){
          newNums.push(n);
        }
      }
      console.log(newNums);
      // 2、需求：将所有小于100的数字进行转化：全部 * 2
      let new2Nums = [];
      for(let n of newNums){
        new2Nums.push(n * 2)
      }
      console.log(new2Nums);
      // 3、需求：将所有new2Nums的数字相加，得到最终的结果
      let total = 0;
      for (let n of new2Nums){
        // console.log(n);
        total += n;
      }
      console.log(total);

但是以上的方法很麻烦，那接下来你可以试试这种方法，那就是高阶函数

首先，来了解一下编程范式：

编程范式有：命令式编程/声明式编程/面向对象编程(第一公民：对象)、函数式编程(第一公民：函数)

2、高阶函数的方法：

第一步：filter函数

// ① 需求： 取出所有小于100的数字
      // 90, 88, 30, 50
      let newNums = nums.filter(function (n) {
        return n < 100;
      });
      console.log(newNums); // 自动将 符合判断条件的元素 加入到新的数组中

第二步：map函数

// ② 需求：将所有小于100的数字进行转化：全部 * 2
      // 180, 176, 60, 100
      let new2Nums = newNums.map(function (n) {
        return n * 2;
      });
      console.log(new2Nums);

第三步：reduce函数

// ③ 需求：将所有new2Nums的数字相加，得到最终的结果
       let total = new2Nums.reduce(function (preValue, n) {
        return preValue + n;
      }, 0);
      console.log(total);

当然，这样还不够；

3、三种高阶函数的结合(函数式编程)

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

4、还有更简单的，一行代码给你搞定需求：

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

好了，以上就是本期的分享~