前言

在過去的幾個月，我發現我的拉取請求中存在四個完全相同的 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',];console.log(characters.indexOf('hulk'));// 2console.log(characters.indexOf('batman'));// -1console.log(characters.includes('hulk'));// trueconsole.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;}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' }