0

0

常用的 Javascript 数组方法

王林

王林

发布时间:2024-07-18 09:13:01

|

590人浏览过

|

来源于dev.to

转载

常用的 javascript 数组方法

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

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

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

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

立即学习Java免费学习笔记(深入)”;

  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

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

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1502

2023.10.24

php中foreach用法
php中foreach用法

本专题整合了php中foreach用法的相关介绍,阅读专题下面的文章了解更多详细教程。

76

2025.12.04

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

531

2023.09.20

length函数用法
length函数用法

length函数用于返回指定字符串的字符数或字节数。可以用于计算字符串的长度,以便在查询和处理字符串数据时进行操作和判断。 需要注意的是length函数计算的是字符串的字符数,而不是字节数。对于多字节字符集,一个字符可能由多个字节组成。因此,length函数在计算字符串长度时会将多字节字符作为一个字符来计算。更多关于length函数的用法,大家可以阅读本专题下面的文章。

928

2023.09.19

golang map内存释放
golang map内存释放

本专题整合了golang map内存相关教程,阅读专题下面的文章了解更多相关内容。

75

2025.09.05

golang map相关教程
golang map相关教程

本专题整合了golang map相关教程,阅读专题下面的文章了解更多详细内容。

36

2025.11.16

golang map原理
golang map原理

本专题整合了golang map相关内容,阅读专题下面的文章了解更多详细内容。

61

2025.11.17

java判断map相关教程
java判断map相关教程

本专题整合了java判断map相关教程,阅读专题下面的文章了解更多详细内容。

42

2025.11.27

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

14

2026.01.30

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号