.map()

让我用一些简单的例子来解释它是如何工作的。如果说你收到一组包含多个对象的数组，每个对象是一个 person。最终你只希望得到一个只包含 id 的数组。

// What you have 
var officers = [ 
{ id: 20, name: 'Captain Piett' },
{ id: 24, name: 'General Veers' }, 
{ id: 56, name: 'Admiral Ozzel' }, 
{ id: 88, name: 'Commander Jerjerrod' }
]; 
// What you need [20, 24, 56, 88]

我想你有多种方式来实现这个目标：.forEach() , .for(...of) ，或者一个简单的 .for()

让我们对比一下吧！用 .forEach()

var officersIds = [];
officers.forEach(function (officer)
{ officersIds.push(officer.id);
});

用.map()

var officersIds = officers.map(function (officer)
{ return officer.id 
});

使用箭头函数做到更加的精简。

const officersIds = officers.map(officer => officer.id);

.filter()

假如你有一个数组，你只想要这个数组中的一些元素怎么办呢？这时候 .filter() 就非常好用了。

var pilots = [
{ id: 2, name: "Wedge Antilles",faction: "Rebels", }, 
{ id: 8, name: "Ciena Ree", faction: "Empire", },
{ id: 40, name: "Iden Versio", faction: "Empire", },
{ id: 66, name: "Thane Kyrell", faction: "Rebels", }
];

如果我们现在想要两个数组：一个是 rebel 飞行员，一个是 imperials 飞行员，用 .filter() 将会非常简单~

var rebels = pilots.filter(function (pilot) 
{ return pilot.faction === "Rebels"; 
}); 
var empire = pilots.filter(function (pilot) {
return pilot.faction === "Empire";
});

我们还可以用箭头函数更优雅的表达：

const rebels = pilots.filter(pilot => pilot.faction === "Rebels");
const empire = pilots.filter(pilot => pilot.faction === "Empire");

.reduce()

一个简单的例子，你就能感受到 .reduce() 的用法了。假如你有一个包含一些飞行员以及他们飞行经验的数组。

var pilots = [
{ id: 10, name: "Poe Dameron", years: 14, },
{ id: 2, name: "Temmin 'Snap' Wexley", years: 30, },
{ id: 41, name: "Tallissan Lintra", years: 16, },
{ id: 99, name: "Ello Asty", years: 22, }
];

如果你需要知道所有飞行员的总飞行年数。用 .reduce() 将会非常直观。

var totalYears = pilots.reduce(function (accumulator, pilot) { 
return accumulator + pilot.years; }, 0);

同样我们可以用箭头函数精简我们的代码：

const totalYears = pilots.reduce((acc, pilot) => acc + pilot.years, 0);

假如我们需要知道飞行员中飞行年限最长的那位，我们可以这样获取：

var mostExpPilot = pilots.reduce(function (oldest, pilot) { 
return (oldest.years || 0) > pilot.years ? oldest : pilot; }, {});

总结：reduce 可以直观的返回数组里面指定的一个值或者对象

.map() .filter() .reduce() 结合使用

因为 .map() 和 .filter()都返回一个数组，所以我们可以轻松的用链式编程的方法来综合使用它们。假设我们有如下数据：

var personnel = [
{ id: 5, name: "Luke Skywalker", pilotingScore: 98, shootingScore: 56, isForceUser: true, },
{ id: 82, name: "Sabine Wren", pilotingScore: 73, shootingScore: 99, isForceUser: false, },
{ id: 22, name: "Zeb Orellios", pilotingScore: 20, shootingScore: 59, isForceUser: false, }, 
{ id: 15, name: "Ezra Bridger", pilotingScore: 43, shootingScore: 67, isForceUser: true, },
{ id: 11, name: "Caleb Dume", pilotingScore: 71, shootingScore: 85, isForceUser: true, }, 
];

我们的目标是：获取属性为 force 的用户总值，读者可以先自行思考一下，用于巩固前面所学知识，我们可以如下处理。

var totalJediScore = personnel 
.filter(function (person) { 
  return person.isForceUser;
})
.map(function (jedi) { 
  return jedi.pilotingScore + jedi.shootingScore;
})
.reduce(function (acc, score) { 
  return acc + score;
 }, 0);

同样，我们也可以用箭头表达式精简他们。

const totalJediScore = personnel
.filter(person => person.isForceUser)
.map(jedi => jedi.pilotingScore + jedi.shootingScore)
.reduce((acc, score) => acc + score, 0);

.map() .filter() .reduce() 的用法

.map()

.filter()

.reduce()

.map() .filter() .reduce() 结合使用