天天看點

9個提高JavaScript 技能必須知道的數組方法

9個提高JavaScript 技能必須知道的數組方法

英文 | 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      
9個提高JavaScript 技能必須知道的數組方法

2、map()​

此方法将函數作為參數,并使用原始數組中每個元素的圖像建立一個新數組。元素的數量将相同,但你可以對其應用任何函數。

當你想将函數應用于數組的所有元素時,此方法很有用。

假設我們有一個包含 5 個元素編号的數組,我們的任務是應用 map 方法并将所有元素乘以 2。我們可以對其應用任何功能。現在,我隻是将每個元素乘以 2。

const Array = [1, 2, 4, 5, 6]
Array.map(x => x * 2 )
// output : 2
//   4   
//   8
//   10
//   12      
9個提高JavaScript 技能必須知道的數組方法

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]      
9個提高JavaScript 技能必須知道的數組方法

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 方法會派上用場。

9個提高JavaScript 技能必須知道的數組方法

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,它不代表任何索引。

9個提高JavaScript 技能必須知道的數組方法

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 ]      
9個提高JavaScript 技能必須知道的數組方法

sort 方法不僅适用于數字,而且在按字母順序對字元串進行排序時也很有用。讓我們假設一個場景,我們要按字母順序對 5 個名字進行排序。

const array=["John", "Evie", "Alex", "Ryan", "Sam"]
array.sort()
//output : [ "Alex", "Evie", "John", "Ryan", "Sam" ]      
9個提高JavaScript 技能必須知道的數組方法

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      
9個提高JavaScript 技能必須知道的數組方法

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個提高JavaScript 技能必須知道的數組方法

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 ]      
9個提高JavaScript 技能必須知道的數組方法

結論

希望你從這篇文章中學到了一些有用的東西。JavaScript 中還有許多其他數組方法。你現在可以檢視它們,因為你已經了解了數組方法。

感謝你的閱讀。

學習更多技能

請點選下方公衆号

繼續閱讀