8 个你应该知道的JavaScript 数组方法

短命女 2022-08-31 00:54 230阅读 0赞

![4ea73ccda621983219a404ed7428853d.png][]

原文 | 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。

**最后的想法**

如果你喜欢阅读这篇文章并认为其他人也会喜欢它，请不要犹豫，分享它。

感谢你的阅读，编程愉快！

#  #

**学习更多技能**

**请点击下方公众号**

![c7a4d1a36631d6eafc91680e77aa3903.gif][]

![b61a58df578e0add99232996c97574bf.png][]

![233705a6cebd04863644ef637a32d4df.png][]

[4ea73ccda621983219a404ed7428853d.png]: /images/20220829/b36d7744f97846d8b438618d6d99a86b.png
[c7a4d1a36631d6eafc91680e77aa3903.gif]: /images/20220829/de198e47668242c3be57477f7723d93c.png
[b61a58df578e0add99232996c97574bf.png]: /images/20220829/7ab31725fb844e588a168c13fd8b226b.png
[233705a6cebd04863644ef637a32d4df.png]: /images/20220829/b65df951100640c3aaeba05db6b08d89.png