如何在 JavaScript 中更好地使用陣列
本文短小精悍，我保證。在過去的數個月裡，我注意到在我審閱的 pull request 中有四個（關於陣列使用的）錯誤經常出現。同時，我自己也會犯這些錯誤，因此有了這篇文章。讓我們一起學習，以確保以後能正確地使用陣列方法！
使用 Array.includes 替代 Array.indexOf
“如果需要在陣列中查詢某個元素，請使用 Array.indexOf 。”
我記得在我學習 JavaScript 的課程中有類似的這麼一句話。毫無疑問，這完全正確！
在 MDN 文件中，對 Array.indexOf 的描述是：返回在陣列中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。因此，如果在之後的程式碼中需要用到（給給定元素的）索引，那麼 Array.indexOf 是不二之選。
然而，如果我們僅需要知道陣列中是否包含給定元素呢？這意味著只是是與否的區別，這是一個布林問題（boolean question）。針對這種情況，我建議使用直接返回布林值的 Array.includes 。
'use strict';
const characters = [
'ironman',
'black_widow',
'hulk',
'captain_america',
'hulk',
'thor',
];
console.log(characters.indexOf('hulk'));
// 2
console.log(characters.indexOf('batman'));
// -1
console.log(characters.includes('hulk'));
// true
console.log(characters.includes('batman'));
// false
使用 Array.find 替代 Array.filter
Array.filter 是一個十分有用的方法。它通過回撥函式過濾原陣列，並將過濾後的項作為新陣列返回。正如它的名字所示，我們將這個方法用於過濾，（一般而言）會獲得一個長度更短的新陣列。
然而，如果知道經回撥函式過濾後，只會剩餘唯一的一項，那麼我不建議使用 Array.filter 。比如：使用等於某個唯一 ID 為過濾條件去過濾一個數組。在這個例子中， Array.filter 返回一個僅有一項的新陣列。然而，我們僅僅是為了獲取 ID 為特定 ID 的那一項，這個新陣列顯得毫無用處。
讓我們討論一下效能。為了獲取所有符合回撥函式過濾條件的項， Array.filter 必須遍歷整個陣列。如果原陣列中有成千上萬項，回撥函式需要執行的次數是相當多的。
為避免這些情況，我建議使用 Array.find 。它與 Array.filter 一樣需要一個回撥函式，（但只是返回）符合條件的第一項。當找到符合回撥函式過濾條件的第一個元素時，它會立即停止往下的搜尋。不再遍歷整個陣列。
'use strict';
const characters = [
{ id: 1, name: 'ironman' },
{ id: 2, name: 'black_widow' },
{ id: 3, name: 'captain_america' },
{ id: 4, name: 'captain_america' },
];
function getCharacter(name) {
return character => character.name === name;
}
console.log(characters.filter(getCharacter('captain_america')));
// [
// { id: 3, name: 'captain_america' },
// { id: 4, name: 'captain_america' },
// ]
console.log(characters.find(getCharacter('captain_america')));
// { id: 3, name: 'captain_america' }
使用 Array.some 替代 Array.find
我承認我經常犯這個錯誤。之後，一位朋友建議我去檢視 JavaScript%2FReference%2FGlobal_Objects%2FArray%23Methods_2" target="_blank" rel="nofollow,noindex">MDN 文件 以尋找更好的方法。事實上（這錯誤）與上面 Array.indexOf / Array.includes 的例子十分相像。
在上面的例子中，我們知道 Array.find 需要一個回撥函式作為引數，並返回（符合條件的）第一個元素。然而，當我們需要知道陣列中是否存在一個元素時， Array.find 是最好的選擇嗎？不一定是，因為它返回一個元素，而不是一個布林值。
在下面的例子中，我建議使用 Array.some ，它返回你需要的布林值。
'use strict';
const characters = [
{ id: 1, name: 'ironman', env: 'marvel' },
{ id: 2, name: 'black_widow', env: 'marvel' },
{ id: 3, name: 'wonder_woman', env: 'dc_comics' },
];
function hasCharacterFrom(env) {
return character => character.env === env;
}
console.log(characters.find(hasCharacterFrom('marvel')));
// { id: 1, name: 'ironman', env: 'marvel' }
console.log(characters.some(hasCharacterFrom('marvel')));
// true
譯者注：補充一下 Array.some 與 Array.includes 使用上的區別。兩者都返回一個布林值，表示某項是否存在於陣列之中，一旦找到對應的項，立即停止遍歷陣列。不同的是 Array.some 的引數是回撥函式，而 Array.includes 的引數是一個值（均不考慮第二個可選引數）。
假設希望知道值為 value 的項是否存在於陣列中，既可以編寫程式碼： [].includes(value) ， 也可以給 Array.some 傳入 item => item === value 作為回撥函式。 Array.includes 使用更簡單， Array.some 可操控性更強。
使用 Array.reduce 替代 Array.filter 與 Array.map 的組合
事實上說， Array.reduce 不太容易理解。然而，如果我們先使用 Array.filter 過濾原陣列，之後（對結果）再呼叫 Array.map （以獲取一個新陣列）。這看起似乎有點問題，是我們忽略了什麼嗎？
這樣做的問題是：我們遍歷了兩次陣列。第一次是過濾原陣列以獲取一個長度稍短的新陣列，第二次遍歷（譯者注：指 Array.map ）是對 Array.filter 的返回的新陣列進行加工，再次創造了一個新陣列！為得到最終的結果，我們結合使用了兩個陣列方法。每個方法都有它自己的回撥函式，而且供 Array.map 使用的臨時陣列是由 Array.filter 提供的，（一般而言）該陣列無法複用。
為避免如此低效場景的出現，我的建議是使用 Array.reduce 。一樣的結果，更好的程式碼！ Array.reduce 允許你將過濾後切加工過的項放進累加器中。累加器可以是需要待遞增的數字、待填充的物件、 待拼接的字串或陣列等。
在上面的例子中，我們使用了 Array.map ，（但更）建議使用累加器為待拼接陣列的 Array.reduce 。在下面的例子中，根據變數 env 的值，我們會將它加進累加器中或保持累加器不變（即不作任何處理）。
'use strict';
const characters = [
{ name: 'ironman', env: 'marvel' },
{ name: 'black_widow', env: 'marvel' },
{ name: 'wonder_woman', env: 'dc_comics' },
];
console.log(
characters
.filter(character => character.env === 'marvel')
.map(character => Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
);
// [
// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
console.log(
characters
.reduce((acc, character) => {
return character.env === 'marvel'
? acc.concat(Object.assign({}, character, { alsoSeenIn: ['Avengers'] }))
: acc;
}, [])
)
// [
// { name: 'ironman', env: 'marvel', alsoSeenIn: ['Avengers'] },
// { name: 'black_widow', env: 'marvel', alsoSeenIn: ['Avengers'] }
// ]
這就是本文的全部內容！
希望這對你有幫助。如果你對本文有任何意見或（關於陣列方法使用的）例子需要討論，請在評論中告訴我。如果你覺得本文不錯，請給我點贊 （譯者注：對燈發誓，這是原文，不是譯者騙贊！）並分享給更多的小夥伴。感謝你的閱讀！
PS: 你可以在 Twitter 上關注我 。
注意：請在使用 Array.find 和 Array.includes 前檢查瀏覽器是否支援相關方法，上述兩個方法在 Internet Explorer 上並不支援（譯者注：可以使用 Polyfill）。