在這篇文章中，我們將會探索處理陣列的三種方法：
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()擅長於過濾&對映和將輸入元素擴充套件為零或更多的輸出元素。