首頁  >  文章  >  web前端  >  新手如何在JavaScript 中更好地使用陣列? (原始碼)

新手如何在JavaScript 中更好地使用陣列? (原始碼)

云罗郡主
云罗郡主轉載
2018-10-11 16:02:581981瀏覽

這篇文章帶給大家的內容是關於新手如何在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中文網其他相關文章!

陳述:
本文轉載於:qdfuns.com。如有侵權,請聯絡admin@php.cn刪除