[譯文] 如何在 JavaScript 中更好地使用數組

原文連接：Here's how you can make better use of JavaScript arrays

本文短小精悍，我保證。在過去的數個月裏，我注意到在我審閱的 pull request 中有四個（關於數組使用的）錯誤常常出現。同時，我本身也會犯這些錯誤，所以有了這篇文章。讓咱們一塊兒學習，以確保之後能正確地使用數組方法！

使用 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'] }
// ]
複製代碼

這就是本文的所有內容！

但願這對你有幫助。若是你對本文有任何意見或（關於數組方法使用的）例子須要討論，請在評論中告訴我。若是你以爲本文不錯，請給我點贊 👏 （譯者注：對燈發誓，這是原文，不是譯者騙贊！）並分享給更多的小夥伴。感謝你的閱讀！

PS: 你能夠在 Twitter 上關注我 。

注意：請在使用 Array.find 和 Array.includes 前檢查瀏覽器是否支持相關方法，上述兩個方法在 Internet Explorer 上並不支持（譯者注：可使用 Polyfill）。