在这篇文章中，我们将会探索处理数组的三种方法：
for…of循环.reduce().flatMap()目的是帮助你在需要处理数组的时候在这些特性之间做出选择。如果你还不知道.reduce()和.flatMap()，这里将向你解释它们。
为了更好地感受这三个特性是如何工作的，我们分别使用它们来实现以下功能：
我们所做的一切都是非破坏性的：输入的数组永远不会被改变。如果输出是一个数组，它永远是新建的。
下面是数组如何通过for-of进行非破坏性的转换：
首先声明变量result，并用一个空数组初始化它。
对于输入数组的每个元素elem：
如果一个值应该被添加到result中：
elem进行必要的转换并将其推入result。让我们来感受一下通过for-of处理数组，并实现（简易版的）数组方法.filter()：
function filterArray(arr, callback) {
const result = [];
for (const elem of arr) {
if (callback(elem)) {
result.push(elem);
}
}
return result;
}
assert.deepEqual(
filterArray(['', 'a', '', 'b'], str => str.length > 0),
['a', 'b']
);
我们也可以使用for-of来实现数组方法.map()。
function mapArray(arr, callback) {
const result = [];
for (const elem of arr) {
result.push(callback(elem));
}
return result;
}
assert.deepEqual(
mapArray(['a', 'b', 'c'], str => str + str),
['aa', 'bb', 'cc']
);
collectFruits()返回数组中所有人的所有水果：
function collectFruits(persons) {
const result = [];
for (const person of persons) {
result.push(...person.fruits);
}
return result;
}
const PERSONS = [
{
name: 'Jane',
fruits: ['strawberry', 'raspberry'],
},
{
name: 'John',
fruits: ['apple', 'banana', 'orange'],
},
{
name: 'Rex',
fruits: ['melon'],
},
];
assert.deepEqual(
collectFruits(PERSONS),
['strawberry', 'raspberry', 'apple', 'banana', 'orange', 'melon']
);
下列代码在一步中进行过滤以及映射：
/**
* What are the titles of movies whose rating is at least `minRating`?
*/
function getTitles(movies, minRating) {
const result = [];
for (const movie of movies) {
if (movie.rating >= minRating) { // (A)
result.push(movie.title); // (B)
}
}
return result;
}
const MOVIES = [
{ title: 'Inception', rating: 8.8 },
{ title: 'Arrival', rating: 7.9 },
{ title: 'Groundhog Day', rating: 8.1 },
{ title: 'Back to the Future', rating: 8.5 },
{ title: 'Being John Malkovich', rating: 7.8 },
];
assert.deepEqual(
getTitles(MOVIES, 8),
['Inception', 'Groundhog Day', 'Back to the Future']
);
if语句和B行的.push()方法完成的。movie.title（而不是元素movie）完成的。getAverageGrade()计算了学生数组的平均等级：
function getAverageGrade(students) {
let sumOfGrades = 0;
for (const student of students) {
sumOfGrades += student.grade;
}
return sumOfGrades / students.length;
}
const STUDENTS = [
{
id: 'qk4k4yif4a',
grade: 4.0,
},
{
id: 'r6vczv0ds3',
grade: 0.25,
},
{
id: '9s53dn6pbk',
grade: 1,
},
];
assert.equal(
getAverageGrade(STUDENTS),
1.75
);
注意事项：用小数点后的分数计算可能会导致四舍五入的错误。
for-of也擅长在未排序的数组中查找元素：
function findInArray(arr, callback) {
for (const [index, value] of arr.entries()) {
if (callback(value)) {
return {index, value}; // (A)
}
}
return undefined;
}
assert.deepEqual(
findInArray(['', 'a', '', 'b'], str => str.length > 0),
{index: 1, value: 'a'}
);
assert.deepEqual(
findInArray(['', 'a', '', 'b'], str => str.length > 1),
undefined
);
这里，一旦我们找到了什么，我们就可以通过return来提前离开循环（A行）。
当实现数组方法.every()时，我们再次从提前终止循环中获益（A行）：
function everyArrayElement(arr, condition) {
for (const elem of arr) {
if (!condition(elem)) {
return false; // (A)
}
}
return true;
}
assert.equal(
everyArrayElement(['a', '', 'b'], str => str.length > 0),
false
);
assert.equal(
everyArrayElement(['a', 'b'], str => str.length > 0),
true
);
在处理数组时，for-of是一个非常常用的工具：
return或break来提前结束循环，这通常很有用。for-of的其他好处包括：
for-await-of循环来支持异步迭代。await和yield操作的函数中使用它们。for-of的缺点是，它可能比其他方法更冗长。这取决于我们试图解决什么问题。
上一节已经提到了yield，但我还想指出，生成器对于处理和生产同步和异步迭代来说是多么的方便。
举例来说，下面通过同步生成器来实现.filter()和.map()：
function* filterIterable(iterable, callback) {
for (const item of iterable) {
if (callback(item)) {
yield item;
}
}
}
const iterable1 = filterIterable(
['', 'a', '', 'b'],
str => str.length > 0
);
assert.deepEqual(
Array.from(iterable1),
['a', 'b']
);
function* mapIterable(iterable, callback) {
for (const item of iterable) {
yield callback(item);
}
}
const iterable2 = mapIterable(['a', 'b', 'c'], str => str + str);
assert.deepEqual(
Array.from(iterable2),
['aa', 'bb', 'cc']
);
数组方法.reduce()让我们计算数组的摘要。它是基于以下算法的：
[初始化摘要] 我们用一个适用于空数组的值初始化摘要。
我们在数组上循环。每个数组元素：
在我们了解.reduce()之前，让我们通过for-of来实现它的算法。我们将用串联一个字符串数组作为一个例子：
function concatElements(arr) {
let summary = ''; // initializing
for (const element of arr) {
summary = summary + element; // updating
}
return summary;
}
assert.equal(
concatElements(['a', 'b', 'c']),
'abc'
);
数组方法.reduce()循环数组，并持续为我们跟踪数组的摘要，因此可以聚焦于初始化和更新值。它使用"累加器"这一名称作为"摘要"的粗略同义词。.reduce()有两个参数：
回调：
累加器的初始值。
在下面代码中，我们使用.reduce()来实现concatElements():
const concatElements = (arr) => arr.reduce(
(accumulator, element) => accumulator + element, // updating
'' // initializing
);
.reduce()是相当通用的。让我们用它来实现过滤：
const filterArray = (arr, callback) => arr.reduce(
(acc, elem) => callback(elem) ? [...acc, elem] : acc,
[]
);
assert.deepEqual(
filterArray(['', 'a', '', 'b'], str => str.length > 0),
['a', 'b']
);
不过，当涉及到以非破坏性的方式向数组添加元素时，JavaScript 数组的效率并不高（与许多函数式编程语言中的链接列表相比）。因此，突变累加器的效率更高：
const filterArray = (arr, callback) => arr.reduce(
(acc, elem) => {
if (callback(elem)) {
acc.push(elem);
}
return acc;
},
[]
);
我们可以通过.reduce()来实现map：
const mapArray = (arr, callback) => arr.reduce(
(acc, elem) => [...acc, callback(elem)],
[]
);
assert.deepEqual(
mapArray(['a', 'b', 'c'], str => str + str),
['aa', 'bb', 'cc']
);
下面是效率更高的突变版本：
const mapArray = (arr, callback) => arr.reduce(
(acc, elem) => {
acc.push(callback(elem));
return acc;
},
[]
);
使用.reduce()进行扩展：
const collectFruits = (persons) => persons.reduce(
(acc, person) => [...acc, ...person.fruits],
[]
);
const PERSONS = [
{
name: 'Jane',
fruits: ['strawberry', 'raspberry'],
},
{
name: 'John',
fruits: ['apple', 'banana', 'orange'],
},
{
name: 'Rex',
fruits: ['melon'],
},
];
assert.deepEqual(
collectFruits(PERSONS),
['strawberry', 'raspberry', 'apple', 'banana', 'orange', 'melon']
);
突变版本：
const collectFruits = (persons) => persons.reduce(
(acc, person) => {
acc.push(...person.fruits);
return acc;
},
[]
);
使用.reduce()在一步中进行过滤和映射：
const getTitles = (movies, minRating) => movies.reduce(
(acc, movie) => (movie.rating >= minRating)
? [...acc, movie.title]
: acc,
[]
);
const MOVIES = [
{ title: 'Inception', rating: 8.8 },
{ title: 'Arrival', rating: 7.9 },
{ title: 'Groundhog Day', rating: 8.1 },
{ title: 'Back to the Future', rating: 8.5 },
{ title: 'Being John Malkovich', rating: 7.8 },
];
assert.deepEqual(
getTitles(MOVIES, 8),
['Inception', 'Groundhog Day', 'Back to the Future']
);
效率更高的突变版本：
const getTitles = (movies, minRating) => movies.reduce(
(acc, movie) => {
if (movie.rating >= minRating) {
acc.push(movie.title);
}
return acc;
},
[]
);
如果我们能在不改变累加器的情况下有效地计算出一个摘要，那么.reduce()就很出色：
const getAverageGrade = (students) => {
const sumOfGrades = students.reduce(
(acc, student) => acc + student.grade,
0
);
return sumOfGrades / students.length;
};
const STUDENTS = [
{
id: 'qk4k4yif4a',
grade: 4.0,
},
{
id: 'r6vczv0ds3',
grade: 0.25,
},
{
id: '9s53dn6pbk',
grade: 1,
},
];
assert.equal(
getAverageGrade(STUDENTS),
1.75
);
下面是使用.reduce()实现的简易版的数组方法.find()：
const findInArray = (arr, callback) => arr.reduce(
(acc, value, index) => (acc === undefined && callback(value))
? {index, value}
: acc,
undefined
);
assert.deepEqual(
findInArray(['', 'a', '', 'b'], str => str.length > 0),
{index: 1, value: 'a'}
);
assert.deepEqual(
findInArray(['', 'a', '', 'b'], str => str.length > 1),
undefined
);
这里.reduce()有一个限制：一旦我们找到一个值，我们仍然要访问其余的元素，因为我们不能提前退出。不过for-of没有这个限制。
下面是使用.reduce()实现的简易版的数组方法.every()：
const everyArrayElement = (arr, condition) => arr.reduce(
(acc, elem) => !acc ? acc : condition(elem),
true
);
assert.equal(
everyArrayElement(['a', '', 'b'], str => str.length > 0),
false
);
assert.equal(
everyArrayElement(['a', 'b'], str => str.length > 0),
true
);
同样的，如果我们能提前从.reduce()中退出，这个实现会更有效率。
.reduce()的一个优点是简洁。缺点是它可能难以理解--特别是如果你不习惯于函数式编程的话。
以下情况我会使用.reduce()：
我不需要对累加器进行变异。
我不需要提前退出。
我不需要对同步或异步迭代器的支持。
reduce是相对容易的。只要能在不突变的情况下计算出一个摘要（比如所有元素的总和），.reduce()就是一个好工具。
不过，JavaScript并不擅长以非破坏性的方式增量创建数组。这就是为什么我在JavaScript中较少使用.reduce()，而在那些有内置不可变列表的语言中则较少使用相应的操作。
普通的.map()方法将每个输入元素精确地翻译成一个输出元素。
相比之下，.flatMap()可以将每个输入元素翻译成零个或多个输出元素。为了达到这个目的，回调并不返回值，而是返回值的数组。它等价于在调用 map()方法后再调用深度为 1 的 flat() 方法（arr.map(...args).flat()），但比分别调用这两个方法稍微更高效一些。
assert.equal(
[0, 1, 2, 3].flatMap(num => new Array(num).fill(String(num))),
['1', '2', '2', '3', '3', '3']
);
下面展示如何使用.flatMap()进行过滤：
const filterArray = (arr, callback) => arr.flatMap(
elem => callback(elem) ? [elem] : []
);
assert.deepEqual(
filterArray(['', 'a', '', 'b'], str => str.length > 0),
['a', 'b']
);
下面展示如何使用.flatMap()进行映射：
const mapArray = (arr, callback) => arr.flatMap(
elem => [callback(elem)]
);
assert.deepEqual(
mapArray(['a', 'b', 'c'], str => str + str),
['aa', 'bb', 'cc']
);
一步到位的过滤和映射是.flatMap()的优势之一：
const getTitles = (movies, minRating) => movies.flatMap(
(movie) => (movie.rating >= minRating) ? [movie.title] : []
);
const MOVIES = [
{ title: 'Inception', rating: 8.8 },
{ title: 'Arrival', rating: 7.9 },
{ title: 'Groundhog Day', rating: 8.1 },
{ title: 'Back to the Future', rating: 8.5 },
{ title: 'Being John Malkovich', rating: 7.8 },
];
assert.deepEqual(
getTitles(MOVIES, 8),
['Inception', 'Groundhog Day', 'Back to the Future']
);
将输入元素扩展为零或更多的输出元素是.flatMap()的另一个优势：
const collectFruits = (persons) => persons.flatMap(
person => person.fruits
);
const PERSONS = [
{
name: 'Jane',
fruits: ['strawberry', 'raspberry'],
},
{
name: 'John',
fruits: ['apple', 'banana', 'orange'],
},
{
name: 'Rex',
fruits: ['melon'],
},
];
assert.deepEqual(
collectFruits(PERSONS),
['strawberry', 'raspberry', 'apple', 'banana', 'orange', 'melon']
);
使用.flatMap()，我们只能产生数组。这使得我们无法：
.flatMap()计算摘要.flatMap()查找.flatMap()检查条件我们可以产生一个被数组包裹的值。然而，我们不能在回调的调用之间传递数据。而且我们不能提前退出。
.flatMap()擅长：
我还发现它相对容易理解。然而，它不像for-of和.reduce()那样用途广泛：
那么，我们如何最佳地使用这些工具来处理数组呢？我大致的建议是：
使用你所拥有的最具体的工具来完成这个任务：
.filter()。.map()。.some()或.every()。for-of是最通用的工具。根据我的经验：
.reduce()和.flatMap()。for-of更容易理解。然而，for-of通常会导致更多冗长的代码。如果不需要改变累加器，.reduce()擅长计算摘要（如所有元素的总和）。
.flatMap()擅长于过滤&映射和将输入元素扩展为零或更多的输出元素。