本文短小精悍，我保證。在過去的數(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'));// 2console.log(characters.indexOf('batman'));// -1console.log(characters.includes('hulk'));// trueconsole.log(characters.includes('batman'));// false

使用 Array.find 替代 Array.filter

Array.filter 是一個(gè)十分有用的方法。它通過回調(diào)函數(shù)過濾原數(shù)組，并將過濾后的項(xiàng)作為新數(shù)組返回。正如它的名字所示，我們將這個(gè)方法用于過濾，（一般而言）會(huì)獲得一個(gè)長(zhǎng)度更短的新數(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' }