常用的 Javascript 数组方法

你在学习文章相关的知识吗？本文《常用的 Javascript 数组方法》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

在这篇文章中，我们将了解常用的 Javascript 数组方法，这些方法使用迭代和回调函数来实现其功能。

迭代是指重复执行一组语句或代码块，这使得我们可以多次执行相同的操作。

简单来说，回调是作为参数传递给另一个函数的函数定义。

为了简单起见，我们将重点关注这三点。

1. 何时应该使用特定的数组方法。
2. 数组方法返回什么。
3. 数组方法的代码示例。 **

在继续之前，让我们先了解一下这些数组方法的结构。

// 数组方法（回调（我们要在数组中的每个项目上执行的条件））

每个数组方法都是一个接收回调作为参数的函数，在这个回调中我们指定要在每个数组项上执行的条件。

我们将在我们的示例中使用这个对象数组。

`常量数据 = [
{
“用户ID”：1，
“用户名”：“弗朗西斯”，
"message": "嘿，怎么样？",
“时间戳”：“2024-02-18T12:30:00Z”，
"状态": "在线",
“消息已发送”：28，
“角色”：“用户”，
“密码”：“293087O7764”

},
{
“用户ID”：2，
“用户名”：“摩西”，
"message": "不错，只是在做一个项目。",
“时间戳”：“2024-02-18T12:35:00Z”，
“状态”：“离开”，
“已发送消息”：74，
“角色”：“用户”，
“密码”：“675147O2234”
},
{
“用户ID”：3，
“用户名”：“Vicky”，
"message": "嘿伙计们！最新的八卦是什么？",
“时间戳”：“2024-02-18T12:40:00Z”，
“状态”：“在线”，
“已发送消息”：271，
“角色”：“主持人”，
“密码”：“76352O8069”

},
{
“用户ID”：4，
“用户名”：“初级”，
"message": "不多，只是放松一下。你呢？",
“时间戳”：“2024-02-18T12:45:00Z”，
“状态”：“离线”，
“已发送消息”：125，
“角色”：“管理员”，
“密码”：“21876O3483”
}
]`

forEach： forEach 当我们想要对所有数组项执行条件时使用。 forEach 返回未定义。

函数 getMessageSent(users){
让 sumMessageSent = 0;
users.forEach(函数(用户){
sumMessageSent += user.messageSent;
})
返回已发送消息总数；
}
getMessageSent(data) // 输出：498

reduce：reduce 用于将数组缩减为单个值，例如此数组 [8, 7, 3] 可以缩减为数字 18。reducer 返回单个值。

reducer 函数接受两个参数，第一个是reducer（由总计和当前组成），第二个是initialValue

总计：这通常称为累加器。我所说的总计是减速器函数的最后计算值。

当前指的是单个数组项。在我们的例子中，我们有四个项目（当前）。

initialValue 是我们在第一次调用时分配给总计的值。简单来说 initalValue 是总计的默认值

const getMessageSent = (users) => {
return users.reduce((总计, 当前) => 总计 += current.messageSent, 0)
}

getMessageSent(data) // 输出：498

filter： Array.filter 用于当我们只想收集数组中满足特定条件的项目时。 array.filter 返回一个数组。

const onlineUsers =（用户）=> {
return users.filter(user => user.status === "在线")
}

onlineUsers(data) // 输出：[object 对象]

find 当我们只想获取满足回调中定义的条件的第一个数组 Item 时，可以使用 Array.find 。 array.find 返回不是数组中的第一个项目，而是以项目的格式返回，在我们的例子中，如果未找到匹配项，则该项目将是一个对象或未定义。

const getUserRole = (users) => {
return users.find(user => user.role === "user")
}

getUserRole(data) // 输出：{userId：1，用户名：'Francis'，消息：“嘿，怎么样？”，时间戳：'2024-02-18T12：30：00Z'，状态：'在线' , ...}

注意如何仅返回第一个满足条件的用户。

map Array.map 当我们想要转换数组中的项目时使用。 array.map 返回满足回调条件的转换项数组。

const getUserNameAndPass = (users) => {
return users.map((user) => {
const userPassCode = user.passCode.slice(-4);
返回${user.username} ${userPassCode.padStart(
user.passCode.length,
“★”
)};
});
};

getUserNameAndPass(data)//输出：['Francis ★★★★★★★7764', 'Moses ★★★★★★★2234', 'Vicky ★★★★★★8069', 'Junior ★★★ ★★★3483']

every array.every 当我们想要检查所有数组项是否通过我们定义的条件时使用。 array.every 返回一个布尔值。如果所有项目都满足条件，则为 true；如果任何项目不满足条件，则为 false。

const isOnline = data.every(user => dataItem.status === '在线')

console.log(isOnline) // 输出：false

Some array.some 当我们想要检查某些数组项是否通过给定条件时使用。 array.some 返回一个布尔值。如果某些项目通过了条件，则为 true；如果所有项目通过或失败，则为 false。

const isOnline = data.every(user => dataItem.status === '在线')

console.log(isOnline) // 输出：true

这些是一些广泛使用的数组方法。

今天关于《常用的 Javascript 数组方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！