快捷導(dǎo)航

JavaScript數(shù)組方法的錯(cuò)誤使用例子

更新時(shí)間：2018年09月13日 08:41:25 投稿：laozhang

在本篇文章中我們給大家分享了幾種使用JavaScript數(shù)組容易出錯(cuò)的例子，需要的朋友們可以參考下。

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

“如果你要在數(shù)組中查找元素，使用Array.indexOf!”。記得在我學(xué)習(xí)JavaScript課程時(shí)候，有這樣一句話。這句話沒(méi)錯(cuò)，確實(shí)可以這么使用！

根據(jù)MDN文檔：“Array.indexOf會(huì)返回被查找元素第一個(gè)匹配的位置的下標(biāo)。”因此，如果后面需要用到這個(gè)索引，Array.indexOf是一個(gè)很好的解法。但是，我們要解決的問(wèn)題是：查找數(shù)組中是否包含某個(gè)元素。這是一個(gè)Yes/No的問(wèn)題，是一個(gè)返回布爾類型的真假問(wèn)題。因此，我建議使用Array.includes，它會(huì)返回一個(gè)布爾值。

'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是一個(gè)很有用的函數(shù)，它返回一個(gè)滿足過(guò)濾條件的新數(shù)組。正如其名字表達(dá)的含義，它是用來(lái)做過(guò)濾的。

但是，如果我們知道我們要的結(jié)果只有一個(gè)元素的時(shí)候，我就不建議使用它了。比如，如果我們的回調(diào)函數(shù)定義用一個(gè)唯一的ID來(lái)過(guò)濾，那么結(jié)果必然唯一了。在這個(gè)情況下，Array.filter會(huì)返回只有一個(gè)元素的數(shù)組。因?yàn)榧热荒芡ㄟ^(guò)一個(gè)特定的ID來(lái)查找，我們已經(jīng)確定只有一個(gè)元素了，那么使用數(shù)組就沒(méi)有意義。

另外，我們?cè)賮?lái)聊聊性能問(wèn)題。為了返回所有匹配的元素，Array.filter需要查找整個(gè)數(shù)組?？梢韵胂笠幌拢绻猩习賯€(gè)元素滿足過(guò)濾條件，那么返回的數(shù)組就很大。

為了避免這樣的情況，我建議使用Array.find。它僅僅返回第一個(gè)滿足過(guò)濾條件的元素。而且，Array.find會(huì)在查找到第一個(gè)滿足條件的元素后就結(jié)束執(zhí)行，而不會(huì)查找整個(gè)數(shù)組。

'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

我承認(rèn)我犯過(guò)很多次錯(cuò)誤。后來(lái)，一個(gè)很要好的朋友讓我去看看MDN的文檔，說(shuō)有更好的解決方案。這個(gè)情況和剛剛提到的Array.indexOf/Array.includes很像。

在前面的例子中，我們看到Array.find接受一個(gè)過(guò)濾函數(shù)，返回滿足的元素。那么，如果我們要查找一個(gè)數(shù)組是否包含某個(gè)元素的時(shí)候，Array.find是否是最佳的方案呢？可能不是，因?yàn)樗祷氐氖窃鼐唧w的值，而不是布爾值。

我推薦大家使用Array.some，它會(huì)返回布爾值。

'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有點(diǎn)難以理解！但是，如果我們每次在同時(shí)使用Array.filter和Array.map的時(shí)候，你是否覺(jué)察到需要點(diǎn)東西，對(duì)不？

我的意思是：我們對(duì)整個(gè)數(shù)組循環(huán)了2遍。第一次是過(guò)濾返回一個(gè)新的數(shù)組，第二次通過(guò)map又構(gòu)造一個(gè)新的數(shù)組。我們使用了兩個(gè)數(shù)組方法，每一個(gè)方法都有各自的回調(diào)函數(shù)，而且Array.filter返回的數(shù)組以后再也不會(huì)用到。

為了避免低效率，我建議使用Array.reduce。同樣的結(jié)果，更優(yōu)雅的代碼！請(qǐng)看下面的例子：‘'

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

您可能感興趣的文章: