原文中部分源码来源于：JS Array.reduce 实现 Array.map 和 Array.filter

Array 中的高阶函数 ---- map, filter, reduce

map() - 映射

var newArr = array.map((currentValue, index, array) => { return ... }, thisValue);

currentValue，必须，当前的元素值；
index，可选，当前元素值的索引；
array，可选，原数组；
thisValue，可选，对象作为该执行回调时使用，传递给函数，用作 "this" 的值；
return 新数组；

栗子：

var array1 = [1,4,9,16];

const map1 = array1.map(x => x *2);

console.log(array1);  // [1,4,9,16]

console.log(map1);  // [2,8,18,32]

注意：

map() 不会对空数组进行检测；

filter() - 过滤,筛选

var newArr = array.filter((currentValue, index, array) => { return ... }, thisValue);

currentValue，必须，当前的元素值；
index，可选，当前元素值的索引；
array，可选，原数组；
thisValue，可选，对象作为该执行回调时使用，传递给函数，用作 "this" 的值；
return 新数组；

栗子：过滤不符合项

var arr = [20,30,50, 96,50]

var newArr = arr.filter(item => item>40)  

console.log(arr)  // [20,30,50, 96,50]

console.log(newArr)  // [50, 96, 50]

高频用途：

上例中的过滤不符合项；

去掉数组中的空字符串、0、undefined、null；

var arr = ['1', '2', null, '3.jpg', null, 0]

var newArr = arr.filter(item => item)

// 也可以写成

// var newArr = arr.filter(Boolean);

console.log(newArr) // ["1", "2", "3.jpg"]

数组去重；

注意：

filter() 不会对空数组进行检测；

reduce - 累计

var result = array.reduce((total, currentValue, currentIndex, array) => { return ... }, initialValue);

total，必须，初始值，第一次循环之后是计算后的返回值；
currentValue，必须，当前的元素值；
currentIndex，可选，当前元素值的索引；
array，可选，原数组；
initialValue，可选，传递给函数的初始值，即此值会在第一次循环之前赋值给 total；
return 经过处理过的 total；

栗子：统计字符串中每个字符出现的次数

const str = '9kFZTQLbUWOjurz9IKRdeg28rYxULHWDUrIHxCY6tnHleoJ'

const obj = {}

Array.from(str).reduce((accumulator, current) => {

  current in accumulator ? accumulator[current]++ : accumulator[current] = 1

  return accumulator;

}, obj)

当然，非 reduce 的写法是：

const str = '9kFZTQLbUWOjurz9IKRdeg28rYxULHWDUrIHxCY6tnHleoJ'

const obj = {}

str.split('').forEach(item => {

  obj[item] ? obj[item]++ : obj[item] = 1

})

reduce 的用途很广泛，可以说，js 中有关数组循环的模块都可以使用 reduce 来实现，这里不一一列举，详见 reduce-MDN

js 实现 map

原生 js 实现：

Array.prototype.myMap = function(fn, context = window) {

  if (typeof fn !== 'function') return;

  let newArr = [];

  for(let i = 0, len = this.length; i < len; i++) {

    newArr.push(fn.call(context, this[i], i, this))

  }

  return newArr;

}

// 使用

[1,2,3].myMap(function(v, i, arr) {

  console.log(v, i, arr);

  return v * 2;

})

有一点奇怪的是，需要先在 Array 上挂 myMap() 这个方法，然后回车后才能使用，如果将上述代码全部复制进浏览器控制台，回车运行会报错，这是为什么？

使用 reduce 实现：

Array.prototype.reduceMap = function(fn, context = window) {

  if (typeof fn !== 'function') return;

  // or if (typeof fn !== 'function') throw new TypeError(fn + 'is not a function')  ;

  let _this = this;

  let newArr = _this.reduce(function(total, cV, cI, _this) {

    return total.concat([fn.call(context, cV, cI, _this)])

  }, [])

  return newArr

}

上面的示例是挂载在 Array 上的，下面这个示例是函数式编程示例：

let fpReduceMap = (fn, context = window) => {

  return targetArr => {

    if (typeof fn !== 'function') throw new TypeError(fn + 'is not a function')

    if (!Array.isArray(targetArr)) throw new TypeError('targetArr must be a Array')

    if (targetArr.length == 0) return [];

    return targetArr.reduce((total, cV, cI, targetArr) => {

      return total.concat([fn.call(context, cV, cI, targetArr)])

    }, [])

  }

}

// 使用

fpReduceMap(function(v) {

  console.log(this);

  return v + 1;

}, {msg: 'mapping'})([1,2,3])

秒客网

js Array 中的 map, filter 和 reduce