高阶函数的使用（filter，map，reduce）

一枚平平无奇的冲浪者

于 2022-05-11 22:04:35 发布

阅读量146

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.youkuaiyun.com/qq_45272615/article/details/124719796

版权

本文详细介绍了JavaScript中的三个重要数组方法：filter、map和reduce。filter用于过滤数组元素，返回满足条件的新数组；map则用于对数组中的每个元素应用函数并创建新数组；reduce则是对数组所有元素进行累积计算，生成单一值。示例代码展示了这三个方法的具体用法，帮助读者更好地理解和应用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

filter（过滤）

<script>
    let arr = [30, 50, 500, 400, 120, 220]
    // filter必须返回boolen值，true或者false
    // let newNums = arr.filter(function(n){
    //   return n<100 //将符合条件的为true的直接过滤出来
    // });
    
    //箭头函数写法
    let newNums = arr.filter(n=>{
      return n<100  //(2) [30, 50]
                   
    })
    console.log(newNums);//30,50
  </script>

map（映射）

<script>
    let arr = [30, 50, 500, 400, 120, 220]
    // let newNums = arr.map(function(n){
    //   return n*2 
    // })
   //箭头函数写法
    let newNums = arr.map(n => {
      return n * 2  //0: 60
                    // 1: 100
                    // 2: 1000
                    // 3: 800
                    // 4: 240
                    // 5: 440
    })
    console.log(newNums); //[60, 100, 1000, 800, 240, 440]
  </script>

reduce

 <script>
    let arr = [30, 50, 500, 400, 120, 220]
    //reduce会对数组中所有的内容进行汇总
    //let total = arr.reduce(function(preValue,n){
    // return preValue+n
    //},0)

    //箭头函数写法
    let total = arr.reduce((preValue,n)=>{
      return preValue+n
    },0)
    // function (preValue, n) {
    //   return preValue + n
    // }//为参数一，是一个函数
    //   //0为参数二，是初始值
    console.log(total);//1320
  </script>