8 個你應該知道的JavaScript 數組方法

原文 | https://javascript.plainenglish.io/8-javascript-array-methods-you-should-know-81947c9e46de

原譯 | 楊小二

數組構成了幾乎任何程式設計語言的組成部分。了解數組對于揭示程式設計概念非常重要。

根據維基百科的解釋，數組可以定義為由一組元素組成的資料結構，每個元素由至少一個數組索引或鍵辨別。存儲一個數組，以便可以通過數學公式從其索引元組計算每個元素的位置。

在本文中，我們将研究 JavaScript 數組方法以及如何使用它們。

簡單來說，數組隻是一個變量，在給定時間可以儲存多個值。

另外需要注意的是，幾乎所有主流浏覽器都支援這些數組方法。

1、map() 方法

map() 方法是一種數組方法，它通過對父數組中存在的每個元素調用函數來建立數組。

此方法不會為沒有值的數組元素執行函數。

map() 數組方法的行為就像一個純函數，不會改變原始數組。

例子：

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const userAge=users.map((user)=>{
return user.name
})
console.log(userAge)      

這将傳回給定數組中的所有名稱。

2、filter() 方法

filter() 數組方法傳回一個給定的數組，該數組從原始數組傳遞給定的計算。在filter()内部，我們提供了如下所示的功能。

filter() 函數不能用于沒有值的數組元素。

filter() 函數不會改變原始數組，是以它的行為就像一個純函數。

例子：

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const filterUsers = users.filter((user)=>{
return user.age <=27
})
console.log(filterUsers)      

3、find() 方法

find() 數組方法用于在數組中查找給定對象。

此方法傳回通過給定語句測試的第一個元素的值。

此方法對數組中存在的每個元素執行一次給定的函數。

find() 方法不會改變提供的原始數組。

例子：

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const findUser= users.find((user)=>{
return user.name === ‘Debby’
})
console.log(findUser)      

4、forEach() 方法

forEach() 數組方法用于為數組中的每個元素調用特定的函數。

例子：

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
users.forEach((user)=>{
console.log(user.name)
})      

該函數将傳回給定數組中的所有名稱。在大多數情況下，forEach() 方法使處理數組變得非常容易。

5、some() 方法

some() 數組方法用于檢查數組中給定的一組元素是否通過特定測試。

some() 數組方法的行為就像一個純函數。

如果傳遞了值，則傳回true（并且不檢查剩餘值），否則傳回false。

例子：

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const midUsers = users.some((user)=>{
return user.name <= 27
})
console.log(midUsers)      

6、every()方法

every() 方法執行并檢查給定數組中的所有元素是否通過提供的測試。

它的行為就像一個純函數，不會改變原始數組。

例子：

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const everyUsers = users.every((user)=>{
return user.name <= 25
})
console.log(everyUsers)      

7、reduce() 方法

顧名思義，它将原始數組簡化為一對值，并為每個給定的值執行給定的函數。

例子：

const users = [
{name:’John’, age:33},
{name:’Philip’, age:40},
{name:’Carl’, age:30},
{name:’Frank’, age:27},
{name:’Florin’, age:25},
{name:’Debby’, age:21},
{name:’Liam’, age:26}
]
const totalAge= users.reduce((curr, user)=>{
return user.age + curr
}, 0)
console.log(totalAge)      

8、includes()  方法

includes() 數組方法檢查數組中是否包含給定元素。

例子：

const ages = [19,56,45,54,30,32,21,33,21,18,23,23]
const hasTwentyThree=ages.includes(23)      

如果給定的測試通過，則傳回 true，否則傳回 false。

最後的想法

如果你喜歡閱讀這篇文章并認為其他人也會喜歡它，請不要猶豫，分享它。

感謝你的閱讀，程式設計愉快！