Map Reduce Filter的使用总结

Map的使用

将数组的每一项进行转换，得到一个原数组长度的包含操作后的数据的新数组。

You have an array of items and want to transform each of them. The result is a new array of the exact same length containing the manipulated items.

使用示例：

let levelItemArray = [
          { levelTitle: "leve1", level: 1},
          { levelTitle: "leve2", level: 2},
          { levelTitle: "leve3", level: 3},
          { levelTitle: "leve4", level: 4}
        ]
let itemTitleArray = levelItemArray.map(item => item.levelTitle)
// itemTitleArray = ["leve1","leve2","leve3","leve4"]

基本使用语法：

Array.prototype.map(callback(item));

callback会遍历数组的每一项，在其中返回的每一项会组成一个新的数组。callback有多种写法：
命名函数：

function getLevelTitle(levelItem){
  return levelItem.levelTitle;
}
let itemTitleArray = levelItemArray.map(getLevelTitle)

匿名函数：

let itemTitleArray = levelItemArray.map(function(item){
 return item.levelTitle;
});

箭头函数：

let itemTitleArray = levelItemArray.map(item => item.levelTitle)

Filter的使用

对原数组进行过滤，按规则进行过滤生成新的数组，新数组长度小于等于原数组长度

You have an array and want to filter out certain items. The result is a new array with the same items, but with some excluded. The length of the new array will be the same (if no values were omitted) or shorter than the original.

基本使用语法：

Array.prototype.filter(callback(item))；

callback将数组元素当参数传入，并返回一个布尔值。当返回为true时，该元素被加入新数组中，反之则被过滤掉。

使用示例：

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
// result =  Array ["exuberant", "destruction", "present"]

Reduce的使用

**通过遍历数组的每一项来计算得到一个新变量，最后生成的新变量可以是任何类型: boolean值，新对象 或者新的数组 **

You have an array of items and you want to compute some new value by iterating over each item. The result can be anything, another array, a new object, a boolean value etc.

Reduce的callback至少需要两个参数。第一个是从上次遍历中返回的一个值，第二个是当前数组遍历到的一个值，计算得到的返回值又被当做第一个参数被传入下一次遍历。
使用示例：

const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;

// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10

// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15

var constructicons = [
  {
    name: 'Scrapper',
    form: 'Freightliner Truck',
    team: 'Decepticon',
    bodyPart: 'rightLeg'
  },
  {
    name: 'Hook',
    form: 'Mobile Crane',
    team: 'Decepticon',
    bodyPart: 'upperTorso'
  },
  {
    name: 'Bonecrusher',
    form: 'Bulldozer',
    team: 'Decepticon',
    bodyPart: 'leftArm'
  },
  {
    name: 'Scavenger',
    form: 'Excavator',
    team: 'Decepticon',
    bodyPart: 'rightArm'
  },
  {
    name: 'Mixmaster',
    form: 'Concrete Mixer',
    team: 'Decepticon',
    bodyPart: 'leftLeg'
  },
  {
    name: 'Long Haul',
    form: 'Dump Truck',
    team: 'Decepticon',
    bodyPart: 'lowerTorso'
  }
];

function assemble(combiner, transformer) {
  // On each iteration, add the current transformer to the form object of the combiner.
  combiner.form[transformer.bodyPart] = transformer.name;
  return combiner;
}
var devastator = constructicons.reduce(assemble, {
  form: {}
});
/**
devastator == {
  form: {
    leftArm: "Bonecrusher"
    leftLeg: "Mixmaster"
    lowerTorso: "Long Haul"
    rightArm: "Scavenger"
    rightLeg: "Scrapper"
    upperTorso: "Hook"
  }
}
*/

下面是三个操作的过程示意图：

map过程示意图 filter过程示意图 reduce过程示意图

科普原文参考