js高阶函数 - filter/map/reduce

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

ChargerBot

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

阅读量275

点赞数

分类专栏：前端基础

本文链接：https://blog.csdn.net/weixin_39288299/article/details/107139130

版权

前端基础专栏收录该内容

22 篇文章 2 订阅

订阅专栏

高阶函数

高阶函数 — 一个函数接收另一个函数作为参数的函数

filter() — 过滤

filter中的回调函数必须返回一个布尔值，当返回true，函数内部会将回调的n加入到新的数组中，当返回false时，则把n过滤掉。

map() — 映射

对n进行处理，返回处理后的n加入到新数组中

reduce() – 汇总

至少传两个值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
  
    const nums=[10,20,50,70,200,130,160,80];

    // 1、 需求：取出所有大于100的数字
    
    let newNums=[];
    for(let n of nums){
       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、需求：将所有的2中的数字相加，得出结果
     let total=0;
     for(let n of new2Nums){
       total += n;
     }
     console.log(total);
    

    // 高阶函数的使用：filter/map/reduce
    // filter中的回调函数与一个要求：必须返回一个boolean值
    // true：当返回true时，函数内部会自动将这次回调的n加到新的数组里面
    // false：当返回false时，函数内部会过滤掉这次的n

    let newNums=nums.filter(function(n) { //回调函数用于遍历数组里面的元素，有多少元素遍历几次
      return n < 100
    })
    console.log(newNums);
    
    
    // 2、map函数的使用
    //  [10, 20, 50, 70, 80]
    let new2Nums=newNums.map(function(n) {
      return n * 2
    })
    console.log(new2Nums);//[20, 40, 100, 140, 160]

    // 3、reduce函数的使用
    // reduce作用对数组中所有的内容进行汇总
    // [20, 40, 100, 140, 160]
    let total=new2Nums.reduce(function(preValue,n) {
      return preValue + n
    },0)
    console.log(total);


    // 第一次：初始化 preValue 0 然后是 n 20
    // 第二次：之后 preValue 0+20 然后是 n 40
    // 第三次：之后 preValue 20+40 然后是 n 100
    // 第四次：之后 preValue 60+100 然后是 n 140
    // 第五次：之后 preValue 160+140 然后是 n 160
    // 第六次：之后 preValue 300+160 
    
    
    // 链式调用：
    let totals=nums.filter(function(n) {
      return n < 100;
    }).map(function(n) {
      return n * 2;
    }).reduce(function(preValue,n) {
      return preValue + n;
    },0)
    console.log(totals);

    // 或者用箭头函数
    let totals2=nums.filter(n => n < 100).map(n => n*2).reduce((pre,n) => pre+n);
    console.log(totals2);
    

  </script>
</body>
</html>

ChargerBot

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
js高阶函数 - filter/map/reduce

高阶函数高阶函数 — 一个函数接收另一个函数作为参数的函数filter() — 过滤filter中的回调函数必须返回一个布尔值，当返回true，函数内部会将回调的n加入到新的数组中，当返回false时，则把n过滤掉。map() — 映射对n进行处理，返回处理后的n加入到新数组中reduce() – 汇总至少传两个值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录