Javascript

前端面试题:JS中filter()、reduce()、map()使用方法和区别~

本文主要是介绍前端面试题:JS中filter()、reduce()、map()使用方法和区别~,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
  • filter()方法创建一个新数组,新数组中的元素是通过过滤筛选指定数组中符合条件的所有元素
    • filter不会对空数组进行过滤
    • filter不会改变原数组
    • 用法
    • var arr = [
          {name:"张三",age:14},
          {name:"李四",age:19},
          {name:"王五",age:20},
      ]
      
      let _arr = arr.filter(function(_a){ //这个参数代表数组中的参数
          return _a.age>18
      })
      console.log(_arr)   //输出一个数组,数组中的对象为年龄大于18的李四和王五
  • reduce() 遍历数组,调用回调函数,将数组元素累加成一个值,reduce从索引最小值开始,reduceRight反向
    • reduce对空数组不会执行回调
    • 参数:arr.reduce(function(1.承接计算的结果,2.本次需要遍历计算的元素,3.索引值,4.数组本身),5.用于计算的初始值)
    • 如果没有初始值,那么第一个参数的初始值就是数组下标为0的元素,本次遍历从下标1开始
    • 如果设置初始值,那么第一个参数的初始值就是用于计算的初始值,本次遍历从0开始
    • var arr = [
          {name:"张三",age:12},
          {name:"李四",age:19},
          {name:"赵六",age:15},
      ]
      let _arr = arr.reduce(function(_a,_b,_c,_d){
          return _a+_b.age    //返回数组中年龄的累加值
      })
  •  map()也是返回一个新的数组,数组中的元素为原始数组元素调用函数处理后的值
    • map()方法按照原始数组元素顺序依次处理元素
    • map()不会改变原始数组

 由上可见reduce()方法用于计算,将数组进行累加,而filter()和map()都不会影响原数组,都会返回一个新的数组

filter和map()的区别是什么呢?

  • filter()方法根据一定的条件对原数组的长度进行过滤返回一个新的数组,这个新数组改变了原数组的长度,不会改变原数组的内容
  • let a = [1, 2, 3, 4, 5, 6]
    let newA = a.filter((x) => {
        if (x > 4) {
            return x
        }
    })
    console.log(a);     //(6) [1, 2, 3, 4, 5, 6]
    console.log(newA);  //(2)[5,6]
    let a = [1, 2, 3, 4, 5, 6]
    let newA = a.filter((x) => {
        return x + '个'
    })
    console.log(a);       //(6) [1, 2, 3, 4, 5, 6]
    console.log(newA);    //(2)[5,6]
  • map()方法根据一定的条件对原数组内容进行处理返回一个新的数组,这个新数组不会改变原数组的长度,只改变原数组的内容
  • let a = [1, 2, 3, 4, 5, 6]
    let newA = a.map((x) => {
        if (x > 4) {
            return x
        }
    })
    // console.log(a);  //(6) [1, 2, 3, 4, 5, 6]
    console.log(newA);  //(6) [undefined, undefined, undefined, undefined, 5, 6]
    let a = [1, 2, 3, 4, 5, 6]
    let newA = a.map((x) => {
        return x + '个'
    })
    console.log(a);    //(6) [1, 2, 3, 4, 5, 6]
    console.log(newA); //(6) ['1个', '2个', '3个', '4个', '5个', '6个']

这篇关于前端面试题:JS中filter()、reduce()、map()使用方法和区别~的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!