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

• 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个']