map, filter, reduce

map, filter, reduce

涉及面试题：map, filter, reduce 各自有什么作用？

map

map 作用是生成返回一个新数组，遍历原数组，将每个元素拿出来做一些变换然后放入到新的数组中。

map 的回调函数接受三个参数，分别是当前索引元素，索引，原数组

需要注意的是map回调中每个元素都需要有返回值，否则会返回 undefined

多用于需要对目标数组中每个元素都要做处理的情况。

map 不会修改原来数组。

let list = [0,1,2,3,4,5]
let mapRes = list.map(item => {
    if(item > 0) return item + 1
})
console.log('  =====> mapRes:', mapRes);
console.log('  =====> list:', list);
 // =====> mapRes: [ undefined, 2, 3, 4, 5, 6 ]
 // =====> list: [ 0, 1, 2, 3, 4, 5 ]

filter

filter 的作用也是生成一个新数组，在遍历数组的时候将返回值为 true 的元素放入新数组, 不会修改原来数组。

主要用于需要过滤数组中的某些元素

const filterList = [0,1,2,3,4,5,6]
let filterRes = filterList.filter(item => {
    return item >= 2
})
console.log('  =====> filterRes:', filterRes);
console.log('  =====> filterList:', filterList);
  // =====> filterRes: [ 2, 3, 4, 5, 6 ]
  // =====> filterList: [ 0, 1, 2, 3, 4, 5 ]

reduce

reduce() 方法对数组中的每个元素按序执行一个由您提供的reducer函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

reduce 不会改变原数组，返回一个新的结果。

reduce 接受两个参数，分别是回调函数和初始值

reduce 有点像是 map 和 filter 的组合

更多用法：MDN: Array.prototype.reduce()

const reduceList = [0,1,2,3,4,5,6,7]
let reduceSum = reduceList.reduce((sum, item) => {
    return sum + item
}, 0)
console.log('  =====> reduceSum:', reduceSum);
//  =====> reduceSum: 28
let reduceMulList = reduceList.reduce((ls, item) => {
    if(item > 0) return ls.concat(item*2)
    return ls
}, [])
console.log('  =====> reduceMulList:', reduceMulList);
//  =====> reduceMulList: [
//    2,  4,  6, 8,
//   10, 12, 14
// ]

// 用 map 和 filter 实现 reduce 的效果
let comRes = reduceList.filter(item => item > 0).map(item => item * 2)
console.log('  =====> comRes:', comRes);
//   =====> comRes: [
//    2,  4,  6, 8,
//   10, 12, 14
// ]