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

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