這篇文章帶給大家的內容是關於新手如何在JavaScript 中更好地使用陣列? (原始碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
使用 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'] } // ]
以上就是對新手如何在JavaScript 中更好地使用陣列? (原始碼)的全部介紹,如果您想了解更多有關JavaScript影片教學#,請關注PHP中文網。
以上是新手如何在JavaScript 中更好地使用陣列? (原始碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!