10-2. 数组 Array 的实例方法

news2024/11/23 12:19:06

本文并没有写出数组的全部使用方法,想看全的可以看一下这个 Array - JavaScript | MDN

目录

1  常用内置方法

1.1  合并数组 concat()

1.2  复制元素覆盖到指定位置 copyWithin()

1.3  返回其他变量的数组形式 Array.from()

1.3.1  基本使用

1.3.2  将伪数组转换为真数组

1.4  判断数组中有无指定的值 includes()

1.4.1  索引参数为正数

1.4.2  索引参数为负数

1.4.3  NaN问题

1.5  元素在数组中第一次出现的位置 indexOf()

1.6  判断变量是否为数组 Array.isArray()

1.7  元素在数组中最后一次出现的位置 lastIndexOf()

1.8  删除数组中的最后一个元素并返回删除的元素 pop()

1.9  增加一个或多个元素并返回新的长度 push()

1.10  返回逆序后的数组 reverse()

1.11  删除元组的第一个元素并返回删除的值 shift()

1.12  数组切片 slice()

1.13  在指定位置删除后添加元素 splice()

1.14  返回数组字符串形式 toString()

1.15  在数组开头添加一个或多个元素 unshift()

1.16  将所有元素放进一个字符串 join()

2  不常用内置方法

2.1  返回数组的可迭代对象 entries()

2.2  指定位置覆盖为指定字符 fill()

2.3  返回数组索引的可迭代对象 keys()

2.4  返回原始值 valueOf()

2.5  判断每一个元素是否都满足条件 every()

2.6  筛选出符合条件的元素 filter()

2.7  返回数组中满足条件的第一个值 find()

2.8  返回数组中满足条件的第一个值的索引 findIndex()

2.9  将所有元素依次带入函数并执行函数 forEach()

2.10  将所有元素依次带入函数并执行函数然后返回数组 map()

2.11  从左到右将数组中的元素变为一个变量 reduce()

2.11.1  基本使用

2.11.2  给初始值

2.11.3  一个例子

2.12  从右到左将数组中的元素变为一个变量 reduceRight()

2.13  元素中是否存在一个能满足条件的元素 some()

2.14  对数组进行排序 sort()


1  常用内置方法

1.1  合并数组 concat()

可以合并两个或者多个

1.2  复制元素覆盖到指定位置 copyWithin()

我们现在复制[3,6)号元素之后从第0位开始覆盖

  • 后面两个参数包含左,不包含右

他的算法是这样的,首先将3-5号元素复制出来

然后给他会从第0位开始覆盖,虽然我们选的是0,但是由于复制出来的长度不只一位,所以1,2也被覆盖掉了

最后就变成了这样

最后一个参数是可选参数,像这样如果不写就从3号位到最后一个元素

这样复制出来的就是3,4,5,6,被覆盖的就是0,1,2,3

1.3  返回其他变量的数组形式 Array.from()

1.3.1  基本使用

返回值为数组,原值不变

数字型与布尔型都不会被拆开

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript from() 方法 | 菜鸟教程

1.3.2  将伪数组转换为真数组

伪数组是看着像数组,但实际不是数组的变量,比如document.queryselectorAll()的返回值

1.4  判断数组中有无指定的值 includes()

有会返回true

没有会返回false

1.4.1  索引参数为正数

可以指定开始的位置,比如我从第7位开始找

如果从第6位找就是true

写100就是从100位开始找,100位以前就不找了

1.4.2  索引参数为负数

可以为负值,比如-3,就是从元素的倒数第三个开始找,前面就不找了

写-100就是从倒数100位开始找,实际就是全找

1.4.3  NaN问题

使用下面的方法是没办法判断数组中有没有NaN的

如果你用includes()就可以判断出来

1.5  元素在数组中第一次出现的位置 indexOf()

如果没有就会返回-1

可以添加从哪一位开始找的参数

1.6  判断变量是否为数组 Array.isArray()

我们也可以用 instanceof Array来检测变量是否是数组

1.7  元素在数组中最后一次出现的位置 lastIndexOf()

如果没有就返回-1

可以指定结束位置,我们下面就找前三位最后一次出现的位置

1.8  删除数组中的最后一个元素并返回删除的元素 pop()

这里注意原值发生了变化

1.9  增加一个或多个元素并返回新的长度 push()

这里注意原值发生了变化

1.10  返回逆序后的数组 reverse()

这里注意原值也发生了变化

1.11  删除元组的第一个元素并返回删除的值 shift()

这里注意原值发生了变化

1.12  数组切片 slice()

  • 包含左不包含右
  • slice()不会改变原数组

这两个参数都是可选参数,如果都不写就是截取全部

可以给负数,比如我想截取最后三个元素

倒数第三与倒数第二

1.13  在指定位置删除后添加元素 splice()

splice()的语法是这样的

splice(a,b,c,d,e)

  • a 从几号位开始
  • b 删除几个,可选参数
  • c,d,e 添加的元素(一个或多个),可选参数

我们现在从2号位开始,删除3个元素

发现原值会被删除,且会返回被删除的元素

删除后,我们再加上2个元素

返回值不变,原值的指定位置添加了指定元素

如果你只想添加,那么就删除0个

如果可选参数都不填,那么就会从2号位删到最后

1.14  返回数组字符串形式 toString()

1.15  在数组开头添加一个或多个元素 unshift()

返回值为添加后的数组长度

1.16  将所有元素放进一个字符串 join()

分隔符默认为逗号,我们可以换任意字符串作为分隔符

2  不常用内置方法

所有需要自己定义一个方法的,其实都是不常用的,与其这么复杂,我们不如自己遍历一遍元素,想怎么操作就怎么操作

2.1  返回数组的可迭代对象 entries()

我们遍历看一下

发现迭代器中有5个数组,子数组第一个值是索引号,第二个是索引号对应的值

2.2  指定位置覆盖为指定字符 fill()

我们现在将world覆盖到[1,3)的位置

  • 包含左不包含右

第二个参数是起始位置,第三个参数是中止位置,两个都是可选参数,如果都不写就会覆盖所有元素

2.3  返回数组索引的可迭代对象 keys()

2.4  返回原始值 valueOf()

2.5  判断每一个元素是否都满足条件 every()

every()需要配合函数使用,参数为函数名,我现在在函数中定义返回大于等于3的值

如果其中有一个不满足就返回false

我们现在把条件换成0

  • 注意不要定义同一个函数两次不同的内容

如果都满足就返回true

every()会判断所有元素,并非只是数值元素

如果是空数组直接返回true

所以every的逻辑是这样的

num可以换成其他变量,条件也可以换成其他的,归纳一下就是这样的

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript Array every() 方法 | 菜鸟教程

2.6  筛选出符合条件的元素 filter()

ilter()是过滤数组用的

代码

如果是空数组会返回空数组

通常在项目中,我们会简写成这样

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript Array filter() 方法 | 菜鸟教程

2.7  返回数组中满足条件的第一个值 find()

  • 注意返回的是值,而不是位置

如果没有满足条件的元素就返回undefined

如果是空数组也返回undefined

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript find() 方法 | 菜鸟教程

2.8  返回数组中满足条件的第一个值的索引 findIndex()

如果没有符合条件的元素会返回-1,空数组也会返回-1

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript findIndex() 方法 | 菜鸟教程

2.9  将所有元素依次带入函数并执行函数 forEach()

元素有3个就带入三次,执行三次。有4个就带入4次,执行四次

注意这个函数是没有返回值的(返回值为undefined),无论给不给函数return都没有返回值

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript forEach() 方法 | 菜鸟教程

2.10  将所有元素依次带入函数并执行函数然后返回数组 map()

map()的作用是这样的,我 原数组是一些原材料,经过map中定义的方法,可以得到一些成品

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript Array map() 方法 | 菜鸟教程

2.11  从左到右将数组中的元素变为一个变量 reduce()

2.11.1  基本使用

reduce只返回一个值

与forEach()的区别

  • forEach()与返回值无关,与执行语句有关
  • reduce()与返回值有关,与执行语句无关,使用reduce()在定义函数时必须有两个参数,第一个是最终返回的值,第二个是当前的值

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript reduce() 方法 | 菜鸟教程

2.11.2  给初始值

除了function,第二个值可以给初始值,比如我现在设置初始值为20

他是这样算的 20+1+2+3+4+'hello'+5

2.11.3  一个例子

现在我想把对象中的salary都加起来

也可以这样写

2.12  从右到左将数组中的元素变为一个变量 reduceRight()

与reduce的区别仅为执行顺序不同,其余没有区别

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript reduceRight() 方法 | 菜鸟教程

2.13  元素中是否存在一个能满足条件的元素 some()

every()是每一个元素都要满足才返回true,some只有有一个就返回true

空值或都不满足返回false

由于some()遇到第一个符合的值就return了,所以不会在遍历后面的内容,相对于遍历所有内容是比较省资源的方法

还有其他的参数,但用的地方不多,详情可以看一下 JavaScript Array some() 方法 | 菜鸟教程

2.14  对数组进行排序 sort()

可以给规则,如果不给规则默认先按首位字符,第二位字符这种顺序升序排序

  • sort()会改变原值

可以自定义规则,这样就是升序

这样就是降序

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

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

相关文章

Hive Metastore、Hive server和Hive thrift服务

Hive Metastore Hive Metastore是Hive的核心元数据管理服务,它提供了元数据的持久化存储和访问控制的能力,使得 Hive 成为一个强大的数据仓库和分析平台,适用于处理大数据和进行复杂的数据查询与分析任务。 Apache Hive是一个建立在 Apache Hadoop 上的数据仓库和分析工具…

java多线程之FutureTask、Future、CompletableFuture

前面已经在多线程创建的时候有提到Future和FutureTask的简单用法,这里详细介绍下FutureTask以及CompletableFuture 一、FutureTask 1、FutureTask简介 FutureTask除了实现Future接口外,还实现了Runnable接口。因此,FutureTask可以交给 Exe…

回溯法实现N皇后问题

题1:(需打印矩阵) 按照国际象棋的规则,皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。 n 皇后问题 研究的是如何将 n 个皇后放置在 nn 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n &#…

命名空间,缺省参数与函数重载

目录 一,命名空间 1.何为命名空间 2.命名空间的使用 ​编辑 4.::作用域限定符 3.命名空间的展开 全局展开: 局部展开: 4.嵌套命名空间 二,缺省参数与函数重载 1.什么是缺省参数 2.什么是函数重载 3.两者的冲突 一&…

内部数据泄露:保护数据安全的挑战与解决方案

导语: 在当今数字化时代,数据是企业的核心资产之一。然而,随着科技的快速发展和信息的日益增长,数据安全问题也日益突出。其中,内部数据泄露成为企业所面临的重大挑战之一。本文将探讨内部数据泄露的危害,…

简直太高效了!一篇文章帮你快速了解企业如何实现无纸化办公

随着科技的发展和信息技术的普及,无纸化办公已经成为了现代企业的一个趋势。无纸化办公即指在企业日常工作中,尽量减少或不使用纸张作为工作载体,通过电子邮件、电子文档、电子表格等工具实现信息的传递和共享。无纸化办公不仅有利于环保&…

路由器隔绝广播,为什么还要VLAN?

路由器能隔绝广播,那要VLAN有什么用,既配置了VLAN又划分在不同的网段是不是有些多余了? 题主的意思是不要VLAN,可以吗? 当然可以。可以是可以,但是每台主机都能接收到路由器同一个接口(三层/路…

如何正确有效的学习java前端(合集)

大量阅读 我是一个劲头十足的读者。所以,我的第一个关于学习JavaScript的技巧就是关于阅读,这绝不是巧合。书籍和其他的资源(如文章)可以在很大程度上帮助你学习JavaScript。通过实践学习,书籍是我学习新学科最喜欢的方式。在学习JavaScript的…

如何快速新建Linux虚拟机,安装linux系统步骤

1、安装好VMware workstation 软件:vmware workstation centos 7 2、点击创建新的虚拟机 3、选择安装操作系统,(我这里使用centos-7 最简安装包,这种系统开销比较小,对机器性能要求不高) 硬盘根据实际…

【C++修炼之路】内存管理

👑作者主页:安 度 因 🏠学习社区:StackFrame 📖专栏链接:C修炼之路 文章目录 一、C/C 内存分布二、考题三、C语言动态内存管理方式四、C内存管理方式1、对内置类型2、对自定义类型 五、C对动态管理的升级六…

vue使用echarts根据页面大小 echarts窗口自适应

1. 使用window.onresize var myChart echarts.init(document.getElementById(myChart)); window.onresize () > {myChart.resize() }优点: 可以根据窗口大小实现自适应 缺点: window.onresize是绑定到window上的,切换vue页面时监听依…

WEB APIs day4 (1)

一、日期对象 1.实例化 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevi…

做私域选个微还是企微,哪个有优势?

做私域&#xff0c;你必须要有一个&#xff0c;引流新客户及留存老客户的地方。 于是&#xff0c;就有很多人讨论或者纠结&#xff1a;做私域&#xff0c;选择个人微信&#xff1f;还是企业微信&#xff1f; 让我们一起来看看个人微信和企业微信在功能和使用上有哪些区别&…

什么是 DevOps?看这一篇就够了!

目录 一、前因 二、记忆 三、他们说…… 3.1、Atlassian 回答“什么是 DevOps&#xff1f;” 3.2、微软回答“什么是 DevOps&#xff1f;” 3.3、AWS 回答“什么是 DevOps&#xff1f;” 四、DevOps 文化 4.1、什么是文化&#xff1f; 4.2、什么是 DevOps 文化&#xf…

谈人工智能和数据治理

一、说明 生成式人工智能已经开始撼动数据治理的世界&#xff0c;并且将继续这样做。 自 ChatGPT 发布以来才 6 个月&#xff0c;但感觉我们已经需要回顾了。在这篇文章中&#xff0c;我将探讨生成式人工智能如何影响数据治理&#xff0c;以及它在不久的将来可能会把我们带到哪…

APP打包教程(使用HBuilder X工具打包uni-app)

App打包&#xff08;使用Hbuilder进行App打包&#xff09; 一、修改接口地址 1.打开uni-app下config/app.js修改接口地址&#xff0c;将下图红框中的地址修改成您的域名 二、配置参数 1.打开 uni-app 根目录下的 manifest.json 文件&#xff0c; 点击《基础配置》&#xff0…

户外运动耳机怎么选?这几款耳机最适合在运动时佩戴!

随着人们开始追求运动和健身带来的乐趣&#xff0c;以及在运动过程中享受音乐的过程&#xff0c;耳机逐渐成为当下的刚需&#xff0c;其中骨传导耳机凭借防水防汗、佩戴稳固不掉落加上开放式聆听受到当下消费者的热烈欢迎&#xff0c;有优点就有缺点&#xff0c;由于骨传导耳机…

opengauss 在一个机器上搭建主备集群

项目上需要高斯主备集群&#xff0c;试了好几个版本。最后搭建出一个在一个机器上的主备。用做测试&#xff0c;记录一下。 下载安装包 从openGauss开源社区下载对应平台的安装包。 a. 通过软件包 | openGauss登录openGauss开源社区&#xff0c;选择3.1.0版本对应平台极简版安…

【网络可用性】

网络可用性 Availability defined in a service-level agreement (SLA) between a network operator (carrier) and a customer. 关于SLA&#xff0c;可参考 思科Service Level Management: Best Practices White Paper 可用性对应的停机时间 转载于 https://blog.csdn.net/a…

Spark(27):Spark任务调度机制

目录 0. 相关文章链接 1. Spark任务调度概述 2. Spark Stage级调度 3. Spark Task级调度 3.1. 调度策略 3.1.1. FIFO调度策略 3.1.2. FAIR调度策略 3.2. 本地化调度 3.3. 失败重试与黑名单机制 0. 相关文章链接 Spark文章汇总 1. Spark任务调度概述 在生产环境下&am…