首頁 >web前端 >js教程 >分享四個錯誤使用JavaScript數組方法的例子

分享四個錯誤使用JavaScript數組方法的例子

yulia
yulia原創
2018-09-12 18:02:171500瀏覽

當初學JavaScript時,沒有深入學習,對有些知識一知半解。在過去的一段時間裡,我檢查的所有的pull request中,都犯了這4個的錯誤。我寫這篇文章的另一個原因在於我自己也曾經犯過這些錯。讓我們來看看如何正確地使用它們!

1. 不要使用Array.indexOf,使用Array.includes

「如果你要在陣列中尋找元素,使用Array.indexOf!」。記得在我學習JavaScript課程時候,有這樣一句話。這句話沒錯,確實可以這麼使用!

根據MDN文件:「Array.indexOf會傳回被尋找元素第一個符合的位置的下標。」因此,如果後面需要用到這個索引,Array.indexOf是一個很好的解法。但是,我們要解決的問題是:找出陣列中是否包含某個元素。這是一個Yes/No的問題,是一個返回布林類型的真假問題。因此,我建議使用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

2. 不要使用Array.filter,使用Array.find

Array.filter是一個很有用的函數,它會傳回一個符合過濾條件的新數組。正如其名字所表達的含義,它是用來做過濾的。

但是,如果我們知道我們要的結果只有一個元素的時候,我就不建議使用它了。例如,如果我們的回呼函數定義用一個唯一的ID來過濾,那麼結果必然唯一了。在這個情況下,Array.filter會傳回只有一個元素的陣列。因為既然能透過一個特定的ID來查找,我們已經確定只有一個元素了,那麼使用陣列就沒有意義。

另外,我們再來聊聊效能問題。為了傳回所有符合的元素,Array.filter需要尋找整個陣列。可以想像一下,如果有上百個元素滿足過濾條件,那麼傳回的陣列就很大。

為了避免這樣的情況,我建議使用Array.find。它只是傳回第一個滿足過濾條件的元素。而且,Array.find會在查找到第一個滿足條件的元素後就結束執行,而不會找到整個陣列。

'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' }

3. 不要使用Array.find,使用Array.some

我承認我犯過很多次錯誤。後來,一個很要好的朋友要我去看看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

4. 不要使用Array.map和Array.filter組合,使用Array.reduce

Array.reduce有點難以理解!但是,如果我們每次在同時使用Array.filter和Array.map的時候,你是否覺察到需要點東西,對不?

我的意思是:我們對整個陣列循環了2遍。第一次是過濾回傳一個新的數組,第二次透過map構造一個新的數組。我們使用了兩個陣列方法,每一個方法都有各自的回呼函數,而且Array.filter傳回的陣列以後再也不會用到。

為了避免低效率,我建議使用Array.reduce。同樣的結果,更優雅的程式碼​​!請看下面的範例:

'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數組方法的例子的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn