本文短小精悍，我保證。在過去的數(shù)個(gè)月里，我注意到在我審閱的 pull request 中有四個(gè)（關(guān)于數(shù)組使用的）錯(cuò)誤經(jīng)常出現(xiàn)。同時(shí)，我自己也會(huì)犯這些錯(cuò)誤，因此有了這篇文章。讓我們一起學(xué)習(xí)，以確保以后能正確地使用數(shù)組方法！

使用 Array.includes 替代 Array.indexOf

"如果需要在數(shù)組中查找某個(gè)元素，請(qǐng)使用 Array.indexOf。"

我記得在我學(xué)習(xí) JavaScript 的課程中有類似的這么一句話。毫無疑問，這完全正確！

在 MDN 文檔中，對(duì) Array.indexOf 的描述是：返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引，如果不存在，則返回-1。因此，如果在之后的代碼中需要用到（給給定元素的）索引，那么 Array.indexOf 是不二之選。

然而，如果我們僅需要知道數(shù)組中是否包含給定元素呢？這意味著只是是與否的區(qū)別，這是一個(gè)布爾問題（boolean question）。針對(duì)這種情況，我建議使用直接返回布爾值的 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 是一個(gè)十分有用的方法。它通過回調(diào)函數(shù)過濾原數(shù)組，并將過濾后的項(xiàng)作為新數(shù)組返回。正如它的名字所示，我們將這個(gè)方法用于過濾，（一般而言）會(huì)獲得一個(gè)長度更短的新數(shù)組。

然而，如果知道經(jīng)回調(diào)函數(shù)過濾后，只會(huì)剩余唯一的一項(xiàng)，那么我不建議使用 Array.filter。比如：使用等于某個(gè)唯一 ID 為過濾條件去過濾一個(gè)數(shù)組。在這個(gè)例子中，Array.filter 返回一個(gè)僅有一項(xiàng)的新數(shù)組。然而，我們僅僅是為了獲取 ID 為特定 ID 的那一項(xiàng)，這個(gè)新數(shù)組顯得毫無用處。

讓我們討論一下性能。為了獲取所有符合回調(diào)函數(shù)過濾條件的項(xiàng)，Array.filter 必須遍歷整個(gè)數(shù)組。如果原數(shù)組中有成千上萬項(xiàng)，回調(diào)函數(shù)需要執(zhí)行的次數(shù)是相當(dāng)多的。

為避免這些情況，我建議使用 Array.find。它與 Array.filter 一樣需要一個(gè)回調(diào)函數(shù)，（但只是返回）符合條件的第一項(xiàng)。當(dāng)找到符合回調(diào)函數(shù)過濾條件的第一個(gè)元素時(shí)，它會(huì)立即停止往下的搜尋。不再遍歷整個(gè)數(shù)組。

\'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

我承認(rèn)我經(jīng)常犯這個(gè)錯(cuò)誤。之后，一位朋友建議我去查看 MDN 文檔 以尋找更好的方法。事實(shí)上（這錯(cuò)誤）與上面 Array.indexOf/Array.includes 的例子十分相像。

在上面的例子中，我們知道 Array.find 需要一個(gè)回調(diào)函數(shù)作為參數(shù)，并返回（符合條件的）第一個(gè)元素。然而，當(dāng)我們需要知道數(shù)組中是否存在一個(gè)元素時(shí)，Array.find 是最好的選擇嗎？不一定是，因?yàn)樗祷匾粋€(gè)元素，而不是一個(gè)布爾值。

在下面的例子中，我建議使用 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

譯者注：補(bǔ)充一下 Array.some 與 Array.includes 使用上的區(qū)別。兩者都返回一個(gè)布爾值，表示某項(xiàng)是否存在于數(shù)組之中，一旦找到對(duì)應(yīng)的項(xiàng)，立即停止遍歷數(shù)組。不同的是 Array.some 的參數(shù)是回調(diào)函數(shù)，而 Array.includes 的參數(shù)是一個(gè)值（均不考慮第二個(gè)可選參數(shù)）。

假設(shè)希望知道值為 value 的項(xiàng)是否存在于數(shù)組中，既可以編寫代碼：[].includes(value)， 也可以給 Array.some 傳入 item => item === value 作為回調(diào)函數(shù)。Array.includes? 使用更簡單，Array.some 可操控性更強(qiáng)。

使用 Array.reduce 替代 Array.filter 與 Array.map 的組合

事實(shí)上說，Array.reduce 不太容易理解。然而，如果我們先使用 Array.filter 過濾原數(shù)組，之后（對(duì)結(jié)果）再調(diào)用 Array.map （以獲取一個(gè)新數(shù)組）。這看起似乎有點(diǎn)問題，是我們忽略了什么嗎？

這樣做的問題是：我們遍歷了兩次數(shù)組。第一次是過濾原數(shù)組以獲取一個(gè)長度稍短的新數(shù)組，第二次遍歷（譯者注：指 Array.map）是對(duì) Array.filter 的返回的新數(shù)組進(jìn)行加工，再次創(chuàng)造了一個(gè)新數(shù)組！為得到最終的結(jié)果，我們結(jié)合使用了兩個(gè)數(shù)組方法。每個(gè)方法都有它自己的回調(diào)函數(shù)，而且供 Array.map 使用的臨時(shí)數(shù)組是由 Array.filter 提供的，（一般而言）該數(shù)組無法復(fù)用。

為避免如此低效場景的出現(xiàn)，我的建議是使用 Array.reduce 。一樣的結(jié)果，更好的代碼！Array.reduce 允許你將過濾后切加工過的項(xiàng)放進(jìn)累加器中。累加器可以是需要待遞增的數(shù)字、待填充的對(duì)象、 待拼接的字符串或數(shù)組等。

在上面的例子中，我們使用了 Array.map，（但更）建議使用累加器為待拼接數(shù)組的 Array.reduce 。在下面的例子中，根據(jù)變量 env 的值，我們會(huì)將它加進(jìn)累加器中或保持累加器不變（即不作任何處理）。

\'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\']?}
//?]

這就是本文的全部內(nèi)容！

希望這對(duì)你有幫助。如果你對(duì)本文有任何意見或（關(guān)于數(shù)組方法使用的）例子需要討論，請(qǐng)?jiān)谠u(píng)論中告訴我。如果你覺得本文不錯(cuò)，請(qǐng)給我點(diǎn)贊 ? （譯者注：對(duì)燈發(fā)誓，這是原文，不是譯者騙贊！）并分享給更多的小伙伴。感謝你的閱讀！

PS: 你可以在 Twitter 上關(guān)注我 。

注意：請(qǐng)?jiān)谑褂?Array.find 和 Array.includes 前檢查瀏覽器是否支持相關(guān)方法，上述兩個(gè)方法在 Internet Explorer 上并不支持（譯者注：可以使用 Polyfill）。

本文轉(zhuǎn)載自【前端猿媛】

英文：pacdiv ?譯文：sea_ljf

https://juejin.im/post/5b8d0a74f265da431d0e7ec

總結(jié)

以上是生活随笔為你收集整理的如何在 JavaScript 中更好地使用数组的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。