JavaScript 数组常用方法详细教程

在 JavaScript 中,数组是一种非常重要的数据结构,用于存储多个值。JS 提供了许多内置方法来操作数组,使得数据处理变得更加简单和高效。本文将详细介绍一些常用的 JavaScript 数组方法,这些不但是平时开发常用的方法,也是面试的重点,现在带着大家一起复习复习~

1. push() 和 pop()

push()

push() 方法用于在数组末尾添加一个或多个元素,并返回新数组的长度。

let arr = [1, 2, 3];let newLength = arr.push(4, 5); // newLength is 5, arr is [1, 2, 3, 4, 5]

参数: 要添加到数组末尾的一个或多个元素。

返回值: 新数组的长度。

pop()

pop() 方法用于删除数组末尾的一个元素,并返回该元素。

let arr = [1, 2, 3, 4];
let removedElement = arr.pop(); // removedElement is 4, arr is [1, 2, 3]

参数: 无。

返回值: 被删除的元素。

2. shift() 和 unshift()

shift()

shift() 方法用于删除数组开头的一个元素,并返回该元素。

let arr = [1, 2, 3, 4];let removedElement = arr.shift(); // removedElement is 1, arr is [2, 3, 4]

参数: 无。

返回值: 被删除的元素。

unshift()

unshift() 方法用于在数组开头添加一个或多个元素,并返回新数组的长度。

let arr = [2, 3, 4];
let newLength = arr.unshift(0, 1); // newLength is 5, arr is [0, 1, 2, 3, 4]

参数: 要添加到数组开头的一个或多个元素。

返回值: 新数组的长度。

3. slice() 和 splice()

slice()

slice() 方法用于返回一个从开始到结束(不包括结束)选择的新数组。原数组不会被修改。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.slice(1, 3); // newArr is [2, 3], arr is [1, 2, 3, 4, 5]

参数:

begin(可选): 从该索引(包括该索引)开始提取。

end(可选): 在该索引(不包括该索引)之前结束提取。

返回值:

一个新数组,包含从 beginend(不包括 end)的元素。

splice()

splice() 方法用于通过删除或替换现有元素或者添加新元素来修改数组的内容。返回值是被删除的元素。

let arr = [1, 2, 3, 4, 5];
let removedElements = arr.splice(2, 2, 6, 7); // removedElements is [3, 4], arr is [1, 2, 6, 7, 5]

参数:

start: 指定修改的开始位置。

deleteCount(可选): 整数,表示要删除的元素数量。

item1, item2, ...(可选): 要添加到数组的新元素。

返回值: 一个包含被删除元素的数组。

4. concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let newArr = arr1.concat(arr2, [7, 8]); // newArr is [1, 2, 3, 4, 5, 6, 7, 8]

参数: 要合并到当前数组中的数组或值。

返回值: 一个新数组。

5. forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。

let arr = [1, 2, 3, 4];
arr.forEach((element, index) => {console.log(`Element at index ${index} is ${element}`);
});
// Output:
// Element at index 0 is 1
// Element at index 1 is 2
// Element at index 2 is 3
// Element at index 3 is 4

参数: 一个函数,该函数接受当前元素、元素索引及数组本身作为参数。

返回值: 无。

6. map()

map() 方法创建一个新数组,其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

let arr = [1, 2, 3, 4];
let newArr = arr.map(element => element * 2); // newArr is [2, 4, 6, 8]

参数: 一个函数,该函数接受当前元素、元素索引及数组本身作为参数。

返回值: 一个新数组。

7. filter()

filter() 方法创建一个新数组,其包含通过所提供函数实现的测试的所有元素。

let arr = [1, 2, 3, 4, 5];
let newArr = arr.filter(element => element > 2); // newArr is [3, 4, 5]

参数: 一个函数,该函数接受当前元素、元素索引及数组本身作为参数,并返回一个布尔值。

返回值: 一个新数组。

8. reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的 reducer 函数(升序执行),将其结果汇总为单个返回值。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0); // sum is 10

参数:reducer 函数,该函数接受累加器和当前值作为参数。

initialValue(可选): 作为第一次调用 callback 函数时第一个参数的值。

返回值: 累加的结果。

9. find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

let arr = [1, 2, 3, 4];
let foundElement = arr.find(element => element > 2); // foundElement is 3

参数: 一个函数,该函数接受当前元素、元素索引及数组本身作为参数,并返回一个布尔值。

返回值: 第一个通过测试的元素值。

10. includes()

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false

let arr = [1, 2, 3, 4];
let hasElement = arr.includes(3); // hasElement is true
let notIncluded = arr.includes(5); // notIncluded is false

参数:

valueToFind: 需要查找的元素值。

fromIndex(可选): 从此索引处开始查找。

返回值: 布尔值。

通过学习这些常用的 JavaScript 数组方法,我们可以更加高效地处理后端传递的数据并编写更简洁、易读的代码。希望本文对您有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/45369.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【建议收藏】一万字图文并茂,终于有人把GPT的玩法整理全了

1. 学生常用 1.1 辅导作业、写作业 打数学建模和写期末作业~ Openai GPT-4o 模型从 2024 年 5 月发布以来,作为各项性能评测综合第一的 GPT。 对于法律类,语言类的作业,随意秒杀了!! 所以我决定让他做一道高等数学…

抽象代数精解【1】

文章目录 群概述一、群的定义二、群的基本性质三、群的分类与例子四、群的应用 难点与例子 参考文献 群 概述 下面由文心一言生成 数学中的“群”(group)是一个重要的代数结构概念,它起源于对方程解析解的探索,由伽罗瓦&#xff…

keepalived+nginx实现高可用

1. keepalived需要了解的知识 1.1 业务场景: 如果我们有个网站,最开始只有一台服务器对用户提供服务,业务架构图如下: 当业务量增大时,这台服务器支撑不了那么大的流量,随时会出现宕机的风险,…

Dr4g0nb4ll靶机

信息收集 使用arp-scan生成网络接口地址,查看ip 输入命令: arp-scan -lnmap扫描端口开放 TCP 输入命令: nmap --min-rate 10000 -p- 192.168.187.184 //以最低10000的发包速率扫描全部端口可以看到目标只开放http的22和80端口 UDP …

嵌入式应用开发之代码整洁之道二

前言:本系列教程旨在如何将自己的代码写的整洁,同时本系列参考 正点原子 , C代码整洁之道,编写可读的代码艺术。 #函数的应用规范 #函数作用的功能 函数功能:函数应该只做一件事,做好这件事,只…

鸿蒙Harmony--文本组件Text属性详解

金樽清酒斗十千,玉盘珍羞直万钱。 停杯投箸不能食,拔剑四顾心茫然。 欲渡黄河冰塞川,将登太行雪满山。 闲来垂钓碧溪上,忽复乘舟梦日边。 行路难,行路难,多歧路,今安在? 长风破浪会有…

2024最新国际版抖音TikTok安装教程,免root免拔卡安卓+iOS,附全套安装工具!

我是阿星,今天给大家带来是2024年最新TikTok国际版抖音的下载和安装教程,而且还是免root免拔卡的那种,安卓和iOS都能用哦!由于某些原因,国内用户并不能使用TikTok。今天阿星就教一下大家怎么安装TikTok。 TikTok在全球…

张爱华:身残志坚谱写人间大爱 推己及人彰显巾帼风采

张爱华,女,1963年2月出生,响水县聚贤养老协会会长、响水县小尖镇爱华老年公寓院长。张爱华因患小儿麻痹症导致下肢重度残疾,但她身残志坚,通过创办服装厂慢慢走上致富之路。2011年,她先后筹资、贷款600多万…

vue 项目代码架构

Vue项目的代码架构通常遵循一定的组织结构和约定,以提高项目的可维护性、可扩展性和可读性。以下是对Vue项目代码架构的详细解析: 一、项目目录结构 Vue项目的目录结构通常包括以下几个关键部分: 根目录: package.json&#x…

Linux下解压.tar.gz文件

.tar.gz 是一种常用的压缩包格式,尤其在Unix、Linux以及macOS系统中非常普遍。这个格式结合了两种不同的功能: Tar (.tar): “Tar” 是“Tape Archive”的缩写,最初是为了将数据备份到磁带上而设计的。Tar命令可以将多个文件和目录打包成一个…

UART串口通信实验

一.通信种类 1.1按照数据通信方式 1.1.1串行通信 优点:占用的引脚少,成本低 缺点:传输速度慢 适用场合:长距离、低速率的通信场合 1.1.2并行通信 优点:传输速率快 缺点:占用引脚多,成本…

Java学习笔记整理: 关于设计模式:模板方法模式 2024/7/10;

模板方法模式 自理解:通过指定流程创建模板类并写入指定方法和抽象方法要求子类重写,然后创建类继承该模板类进行统一操作; 优点 1、封装不变部分,扩展可变部分。 2、提取公共代码,便于维护。 3、行为由父类控制,子类实现。 缺点 每一个不同的…

【开源项目的机遇与挑战】探索、贡献与应对

💓 博客主页:倔强的石头的CSDN主页 📝Gitee主页:倔强的石头的gitee主页 ⏩ 文章专栏:《热点时事》 期待您的关注 目录 引言 一:开源项目的发展趋势 🍃开源项目的蓬勃发展现状 🍃开…

VSCode 远程反复输入密码不能链接问题解决

通过 vscode 远程连接服务器时出现了连接不上,而且一直要循环输入密码的问题,可能是因为上次异常退出导致。 主要解决思路是删除当前 vscode 远端服务后,重新建立连接。 解决方法一 在 vscode 端接口删除 vscode 服务。 View->Commond…

“超级攻略:如何快速排查和优化慢SQL,提升系统速度!“

慢查询指的是数据库中执行时间超过指定阈值的 SQL 语句。不同业务场景下,这个阈值通常各不相同。在我们公司内部,这个阈值被设定为 1 秒钟。也就是说,任何执行时间超过 1 秒的 SQL 语句都会被视为慢查询。 对慢查询进行问题排查通常分为以下…

vue 使用腾讯地图 标点 自定义瓦片 折线配置

vue 使用腾讯地图 标点 自定义瓦片 折线配置 申请腾讯地图秘钥 key 腾讯地图开发者 https://lbs.qq.com/dev/console/application/mine 腾讯地图开发文档 https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview 添加 key 代码中引入 // 入口文件 index.html // 填…

【通信原理】其实QPSK就是一种特殊的QAM,即4-QAM

文章目录 幅度调制和相位调制QPSK(Quadrature Phase Shift Keying)QAM(Quadrature Amplitude Modulation)QPSK作为4-QAMQPSK(Quadrature Phase Shift Keying)和QAM(Quadrature Amplitude Modulation)都是数字调制技术,用于在无线信号中传输数据。要理解“QPSK其实就是…

新旧电脑数据转移方法

随着科技的发展和电脑性能的不断提升,许多用户在工作和生活中都需要更换新电脑。当我们购买了一台新电脑后,如何将旧电脑中的数据转移到新电脑上成许多用户关注的问题。本文将详细介绍几种有效的电脑数据转移方法,帮助大家顺利完成数据迁移。…

国产麒麟、uos在线编辑word文件并控制编辑区域(局部编辑)

windows系统也适用,该插件可同时支持windows和国产系统 在实际项目开发中,以下场景可能会用到Word局部编辑功能: 合同审批公文流转策划设计报告汇签单招投标(标书文件)其他,有模板且需要不同人员协作编辑…

06.TMS570LC43入门指南——中断操作

06.TMS570LC43入门指南——中断操作 文章目录 06.TMS570LC43入门指南——中断操作一、简介二、中断(VIM)介绍2.1 VIM架构2.2 CPU 中断处理2.3 VIM中断通道映射2.4 中断请求默认分配 三、项目实现3.1 硬件部分3.2 软件部分3.2.1 HALCoGen 配置3.2.2 CCS 配…