JavaScript中Array方法你該知道的正確打開方法

前言

在過去的幾個月，我發現個人拉取請求中存在四個徹底相同的 JavaScript 錯誤。因而我寫了這篇文章，總結了如何在 JavaScript 中正確使用地使用 Array 的方法！

Array對象爲JavaScript內置對象，具備如下屬性：

用 Array.includes 代替 Array.indexOf 「若是你要在數組中查找元素，請使用 Array.indexOf」。我記得在學習 JavaScript 的時候，在教材中讀到這樣的一句話。毫無疑問，這句話是真的！

MDN 文檔寫道，Array.indexOf 將「返回第一次出現給定元素的索引」。所以，若是咱們稍後要在代碼中使用這個返回的索引，那麼使用 Array.indexOf 找到索引就對了。

可是，若是咱們只想知道數組是否包含某個值，該怎麼辦？這彷佛是一個是與否的問題，或者說是一個布爾值問題。對於這種狀況，我建議使用返回布爾值的 Array.includes。

'use strict';
 
const characters = [
 'ironman',
 'black_widow',
 'hulk',
 'captain_america',
 'hulk',
 'thor',
];//前端全棧交流學習圈：866109386
 //幫助1-3年前端人員提高技術，思惟能力
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 是一個很是有用的方法。它接受一個回調函數做爲參數，基於一個包含全部元素的數組建立出一個新的數組。正如它的名字同樣，咱們使用這個方法來過濾元素，得到更短的數組。

可是，若是回調函數只能返回一個元素，那麼我就不推薦使用這個方法，例如使用回調函數來過濾惟一 ID。在這種狀況下，Array.filter 將返回一個只包含一個元素的新數組。咱們的意圖多是經過查找特定的 ID 找到數組中包含的惟一值。

咱們來看看這個方法的性能。要返回與回調函數匹配的全部元素，Array.filter 必須遍歷整個數組。此外，咱們假設有數百個元素能夠知足回調參數，那麼過濾後的數組會很是大。

爲了不這種狀況，我建議使用 Array.find。它須要一個像 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;
}//前端全棧交流學習圈：866109386
 //幫助1-3年前端人員提高技術，思惟能力
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，它返回所需的布爾值。另外，從語義上看，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' },
];//前端全棧交流學習圈：866109386
 //幫助1-3年前端人員提高技術，思惟能力
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.reduce 而不是連接 Array.filter 和 Array.map 讓咱們面對現實吧，Array.reduce 不容易理解。事實確實如此！可是，若是咱們使用 Array.filter 和 Array.map 的組合，感受缺乏了什麼，對吧？

個人意思是，咱們遍歷了兩次數組。第一次過濾數組並建立一個較短的數組，第二次又基於 Array.filter 得到數組建立一個包含新值的數組。爲了得到咱們想要的新數組，咱們使用了兩個 Array 方法。每一個方法都有本身的回調函數和一個用不到的數組——由 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'] }
// ]
複製代碼

英文原文： medium.freecodecamp.org/heres-how-y…