在这篇文章中,我们将了解常用的 Javascript 数组方法,这些方法使用迭代和回调函数来实现其功能。
迭代是指重复执行一组语句或代码块,它允许我们多次执行相同的操作。
简单来说,回调是作为参数传递给另一个函数的函数定义。
为了简单起见,我们将重点关注这三点。
在继续之前,让我们了解这些数组方法的结构。
// 数组方法(回调(我们要对数组中的每个项目执行的条件))
这些数组方法中的每一个都是一个接收回调作为参数的函数,我们在这个回调中指定要在每个数组项上执行的条件。
我们将在我们的示例中使用这个对象数组。
`常量数据 = [
{
"用户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(用户){
让 sumMessageSent = 0;
users.forEach(函数(用户){
sumMessageSent = user.messageSent;
})
返回sumMessageSent;
}
getMessageSent(data) // 输出:498
reduce:reduce 用于将数组缩减为单个值,例如此数组 [8, 7, 3] 可以缩减为数字 18。reducer 返回单个值。
reducer 函数接受两个参数,第一个参数是reducer(由总数和当前值组成),第二个参数是initialValue
总计:这通常称为累加器。我所说的总计是减速器函数的最后计算值。
当前指的是单个数组项。在我们的例子中,我们有四个项目(当前)。
initialValue 是我们在第一次调用时分配给总计的值。简单地说 initalValue 是 Total
的默认值const getMessageSent = (用户) => {
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 = (用户) => {
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.map((user) => {
const userPassCode = user.passCode.slice(-4);
返回${user.username} ${userPassCode.padStart(
用户.passCode.length,
“★”
)};
});
};
getUserNameAndPass(data)//输出:['弗朗西斯★★★★★★★7764', '摩西★★★★★★★2234', 'Vicky ★★★★★★8069', '少年★ ★★★★★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
这些是一些广泛使用的数组方法。
免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。
Copyright© 2022 湘ICP备2022001581号-3