常用的 Javascript 数组方法。

PHPz
发布: 2024-07-18 10:12:02
原创
409 人浏览过

Commonly used Javascript Array Methods.

在这篇文章中,我们将了解常用的 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((total, current) => Total += 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',状态:'在线' , ...}

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

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

const getUserNameAndPass = (사용자) => {
return users.map((사용자) => {
const userPassCode = user.passCode.slice(-4);
return${user.username} ${userPassCode.padStart(
user.passCode.length,
"★"
)};
});
};

getUserNameAndPass(data)// 출력:['프란시스 ★★★★★★★7764', '모세 ★★★★★★★2234', '비키 ★★★★★★8069', '주니어 ★★★ ★★★3483']

everyarray.every는 모든 배열 항목이 정의된 조건을 통과했는지 확인하려는 경우에 사용됩니다. array.every는 부울을 반환합니다. 모든 항목이 조건을 통과하면 true이고, 항목 중 하나라도 조건을 실패하면 false입니다.

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

console.log(isOnline) // 출력:false

Somearray.some은 배열 항목 중 일부가 주어진 조건을 통과하는지 확인하려고 할 때 사용됩니다. array.some은 부울을 반환합니다. 일부 항목이 조건을 통과하면 true이고, 모든 항목이 통과하거나 실패하면 false입니다.

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

console.log(isOnline) // 출력: true

다음은 널리 사용되는 배열 방법 중 일부입니다.

以上是常用的 Javascript 数组方法。的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!