英文 | https://javascript.plainenglish.io/9-must-know-array-methods-to-boost-your-javascript-skills-4ae1822f7751
翻譯 | 楊小二
在 JavaScript 中，數組是一種特殊類型的變量，可以存儲不同類型的元素。JavaScript 有一些内置的數組方法，它們在不同的情況下有不同的作用，如果你非常熟悉這些方法的話，将對你非常有幫助，比如，删除、添加、操作資料。了解這些方法将提升你的 JavaScript 技能。
在本文中，我們将看到 9 個基本的 JavaScript 數組方法，它們将幫助你正确操作資料。
9個數組方法如下：
- some()
- map()
- filter()
- find()
- findIndex()
- sort()
- includes()
- reverse()
- concat()
1、some()
如果數組中的特定元素比對，則 array.some() 方法将傳回 true 或 false 作為輸出。
當你想要比對數組中的元素時，此方法很有用。讓我們通過一個例子來了解這個方法。我們有一個包含 5 個字母的數組。
const Array = ["a", "b", "c", "d", "e"] 我們将在該數組上應用 array.some() 方法，它将輸出 true 或 false。
const Array = ["a", "b", "c", "d", "e"]
Array.some(test => test === "b")
// Output will be True 
2、map()
此方法将函數作為參數，并使用原始數組中每個元素的圖像建立一個新數組。元素的數量将相同，但你可以對其應用任何函數。
當你想将函數應用于數組的所有元素時，此方法很有用。
假設我們有一個包含 5 個元素編号的數組，我們的任務是應用 map 方法并将所有元素乘以 2。我們可以對其應用任何功能。現在，我隻是将每個元素乘以 2。
const Array = [1, 2, 4, 5, 6]
Array.map(x => x * 2 )
// output : 2
// 4
// 8
// 10
// 12 3、filter()
array.filter() 方法将一個函數作為參數，并傳回一個新數組，其中，包含原始數組中與我們在參數中傳遞的元素相比對的元素。其餘元素被過濾掉。
當你想使用在函數中傳遞的特定元素filter()數組時，此方法很有用。
讓我們通過一個簡單的例子來了解這個方法。我們已經聲明了一個有 5 個名字的數組。這些名稱可以重複或不同。
const array=["Dawn", "Sam", "Eve", "John", "John"] 我們需要從數組中過濾掉名字“John”。我們想要一個隻有“John”的數組。
const array=["Dawn", "Sam", "Eve", "John", "John"]
array.filter(element => element === "John")
//output : [John, John] 4、find()
array.find() 方法接受一個函數作為參數，并傳回在數組中找到的滿足測試函數的元素的值。否則，如果未找到測試值，它将傳回 Undefined 作為輸出。
需要一些例子來了解這一點嗎？假設我們有一個包含關鍵字和值的數組。關鍵字表示員工姓名，值将是他們的薪水。
const array=[
{name1:"John", salary:10000},
{name2:"Andrew", salary:25000},
{name3:"Tom", salary:10000}
] 而你的要求是找到工資為 10,000 美元的員工。
const array=[
{name1:"John", salary:10000},
{name2:"Andrew", salary:25000},
{name3:"Tom", salary:50000}
]
array.find(elements => elements.salary=10000) 驚人的！我們傳遞一個函數，在該函數中，我們試圖找到 10,000 的工資。如果它存在于數組中，它将輸出帶有關鍵字和值的内容部分。如果沒有，它将簡單地傳回 undefined。
當你想在具有數千或數百萬個元素的大型數組中查找值時，此 find 方法會派上用場。
5、findIndex()
如果你了解了 find 方法，那麼你就會很容易了解這個方法。array.findIndex() 方法的工作方式與 find 方法相同，但它不傳回值，而是傳回數組中值的索引。簡單來說，它輸出元素在數組中的位置。
當你要查找數組中元素的索引時，此方法很有用。你想知道元素出現在哪個位置，并據此執行你未來的代碼邏輯。
一個示例将幫助你清除此方法。假設我們有一個包含 20 個随機數的數組。
const array=[ 10, 6, 54, 67, 87, 89, 45, 83, 123, 90, 345, 346, 21, 56, 78, 30, 341, 98, 99, 100] 我們的任務是找到數字 123 的位置。
const array=[ 10, 6, 54, 67, 87, 89, 45, 83, 123, 90, 345, 346, 21, 56, 78, 30, 341, 98, 99, 100]
array.findIndex(elements => elements===123)
//output : 8
array.findIndex(elements => elements===101)
//output : -1 現在，你可以了解 findIndex 方法的工作原理了。它傳回 8 作為輸出，我們知道 123 出現在數組的第 8 個索引處。如果沒有找到數字，與傳回 undefined 的 find 方法不同，findIndex 方法傳回 -1，它不代表任何索引。
6、sort()
array.sort() 隻是将一個函數作為參數并傳回一個已排序的數組。當你想對數組重新排序時，此方法非常友善。
為了了解排序方法，假設你有一個由 20 個無序随機數組成的數組。
const array=[ 10, 6, 54, 67, 87, 89, 45, 83, 123, 90, 345, 346, 21, 56, 78, 30, 341, 98, 99, 100] 你的要求是按升序重新排列數組中的數字。
const array=[ 10, 6, 54, 67, 87, 89, 45, 83, 123, 90, 345, 346, 21, 56, 78, 30, 341, 98, 99, 100]
array.sort()
//output : [ 10, 100, 123, 21, 30, 341, 345, 346, 45, 54, 56, 6, 67, 78, 83, 87, 89, 90, 98, 99 ] sort 方法不僅适用于數字，而且在按字母順序對字元串進行排序時也很有用。讓我們假設一個場景，我們要按字母順序對 5 個名字進行排序。
const array=["John", "Evie", "Alex", "Ryan", "Sam"]
array.sort()
//output : [ "Alex", "Evie", "John", "Ryan", "Sam" ] 7、includes()
此方法不接受任何函數，而是将一個元素作為參數，并根據該值是否存在于該特定數組中來輸出 true 或 false。
當數組中有一堆元素并且你想檢查該數組中是否存在特定元素時，此方法很有用。顯然，我們可以使用 find 或 findIndex 方法。但有時，我們隻需要執行知道元素是否存在于數組中的簡單任務。
我們将舉一個例子來理清我們的概念。我們有一系列包含姓名和職業的資料。
const array=[ "Computer Scientist", "Programmer", "AI Expert", "Web Developer", "App Developer", "White Hacker"] 我們的任務是找出“Programmer”是否存在于數組中。
const array=[ "Computer Scientist", "Programmer", "AI Expert", "Web Developer", "App Developer", "White Hacker"]
array.includes("Programmer")
//output : true 8、forEach()
此方法将函數作為參數，并傳回與提供元素數組中的關鍵字比對的元素清單。
是的，當你想使用鍵查找元素時，此方法對字典數組特别有用。假設有一個帶有id 和 name 的資料數組。
const myAwesomeArray = [
{ id: 1, name: "john" },
{ id: 2, name: "Downey" },
{ id: 3, name: "Karlo" },
{ id: 4, name: "Harry" },
] 現在，我們需要與數組中的名稱鍵關聯的所有值的輸出。
const array = [
{ id: 1, name: "john" },
{ id: 2, name: "Downey" },
{ id: 3, name: "Karlo" },
{ id: 4, name: "Harry" },
]
array.forEach(element => console.log(element.name))
//output : John
// Downey
// Karlo
// Harry 9、concat()
array.concat() 方法将另一個數組而不是任何函數或元素作為參數，并傳回一個合并的數組。當我們想要将兩個數組合并為一個時，此方法很有用。
例如，假設我們有 2 個包含數字的數組。
const array1 = [1, 2, 3, 4, 5]
const array2 = [6, 7, 8, 9, 10] 現在，我們的任務是将 array1 與 array2 合并。
const array1 = [1, 2, 3, 4, 5]
const array2 = [6, 7, 8, 9, 10]
array1.concat(array2)
//output : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ] 結論
希望你從這篇文章中學到了一些有用的東西。JavaScript 中還有許多其他數組方法。你現在可以檢視它們，因為你已經了解了數組方法。
感謝你的閱讀。
學習更多技能
請點選下方公衆号