高阶函数（filter/map/reduce）

最新推荐文章于 2023-06-16 14:26:05 发布

407指导员

最新推荐文章于 2023-06-16 14:26:05 发布

阅读量214

点赞数 1

分类专栏： # es6 文章标签： js

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/111410096

版权

es6 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

高阶函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>高阶函数</title>
  <script>
    //编程范式：命令式编程/声明式编程
    //或者分为：面向对象编程（第一公民：对象）/函数式编程（第一公民：函数）
    const nums = [10, 23, 5443, 42, 122, 67, 467, 89, 44, 50];
    /*
    * 在es6新增的for - in语法
    *   用于枚举对象中的属性，由于对象的属性是无序的，
    * 因此该语句无法保证返回属性的顺序。
    * for - of语法
    *   用于遍历可迭代对象的元素
    */
    //第一个需求：取出所有小于100的数字
    let newNums = [];//用于保存筛选的数字
    for (let n of nums) {
      if (n < 100) {
        newNums.push(n);
      }
    }
    //第二个需求：将所有小于100的数字进行转化，全部乘以2
    let new2Nums = [];//用于保存筛选的数字
    for (let n of newNums) {
      new2Nums.push(n * 2);
    }
    //第三个需求：将所有数字相加，得到最终的结果
    let totalNum = 0;
    for (let n of new2Nums) {
      totalNum += n;
    }
    console.log(totalNum);//650
    /**
     * 采用高阶函数来实现上边三个需求
     * 1.filter方法会对数组中每一个元素执行一次回调函数
     * filter中的回调函数有一个要求：必须返回一个boolean值
     * 返回值为：
     *    true:函数内部会自动将这次回调的n加入新的数组,直接接受就行
     *    false:函数会自动过滤掉这次的n
     *
     */
    let numsF = nums.filter(function (n) {
      /*直接判断数字是否小于100，如果该次数字n小于100，返回true加入新数组
      * 如果大于100，就忽视该数字，进行下一个数字的回调
      */
      return n < 100;
    });
    console.log(numsF);//Array(7) [ 10, 23, 42, 67, 89, 44, 50 ]
    /**
     * 2.map函数的使用,使用map函数会直接将返回值加入新的数组
     */
    let numsM = numsF.map(function (n) {
      return n * 2;
    });
    console.log(numsM);//Array(7) [ 20, 46, 84, 134, 178, 88, 100 ]
    /**
     * 3.reduce函数的使用。
     * 作用：对数组中所有的内容进行汇总
     * 参数：
     *      函数中又有两个参数：
     *        preValue:就是该函数上次调用的返回值，
     *        n：就是当前执行该回调函数的元素
     *      0：
     *        第一次进来执行时并没有preValue的值，所以就规定初始值为0
     *
     *
     */
    let total = numsM.reduce(function (preValue, n) {
      return preValue + n;
    }, 0);
    console.log(total);//650
    /**
     * 接下来咱们就可以三合一操作，直接简化操作
     * 这就是高阶函数，看起来很厉害
     */
    let total2 = nums.filter(function (n) {
      return n < 100;
    }).map(function (n) {
      return n * 2;
    }).reduce(function (preValue, n) {
      return preValue + n;
    }, 0);
    console.log(total2);//650
    /**
     * s6中的箭头函数，还可以简化代码
     */
    let total3 = nums.filter(n => n < 100).map(n => n * 2).reduce((pre, n) => pre + n);
    console.log(total3);//650
  </script>
</head>
<body>

</body>
</html>