如何在 JavaScript 中更好地使用陣列

弒曉風發表於2018-09-19

使用 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

我承認我經常犯這個錯誤。之後,一位朋友建議我去檢視 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`] }
// ]

注意:請在使用 Array.find 和 Array.includes 前檢查瀏覽器是否支援相關方法,上述兩個方法在 Internet Explorer 上並不支援(譯者注:可以使用 Polyfill)。

關於本文
譯者:@sea_ljf
譯文:
https://juejin.im/post/5b8d0a74f265da431d0e7ec0
作者:@pacdiv
原文:
https://medium.freecodecamp.org/heres-how-you-can-make-better-use-of-javascript-arrays-3efd6395af3c

相關文章