JavaScript 数组你都掰扯不明白,还敢说精通 JavaScript ?| 赠书

54e3c5320f9cb2f43454eb981bc5835d.gif

作者 | 哪吒

来源 | CSDN博客

最近小编在看文章的时候,总有很多刚刚入门的小白说精通这个,精通那个技术,更有意思的是,最近看到一则简历上说精通 JavaScript ,聊一聊发现数组还不明白,就对外说精通~所以今天小编就给大家说道说道,文末更是有福利,伙伴们可以积极领取呦~

9da0701dd1714d330b4d68f127d9ecda.png

如何判断一个对象是不是数组?

在只有一个全局作用域的时候,使用instanceof操作符就足矣:

if(value instanceof Array){//操作数组
}

使用instanceof的前提是只有一个全局执行上下文,如果网页里有多个框架,则可能涉及两个不同的全局上下文,因此就会有两个不同版本的Array构造函数。如果要把数组从一个框架传到另一个框架,则这个数组的构造函数将有别于第二个框架内本地创建的数组。

为了解决这个问题,ECMAScript提供了 Array.isArray()方法。这个方法的目的就是确定一个值是否为数组,而不用管它是在哪个全局执行上下文中创建的。

if(Array.isArray(value)){//操作数组
}

c0af7349bdefecf012037e06099ff730.png

填充方法fill()

1、ES6新增了两个方法

批量复制方法copyWithin(),以及填充数组方法fill()。

这两个方法的函数比较类似,都需要指定既有数组实例上的一个范围,包含开始索引,不包含结束索引,使用这个方法不会改变数组的大小。

2、fill()

使用fill()方法可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置,它是可选的。如果不提供结束索引,则一直填充到数组末尾。负值索引从数组末尾开始计算。

例如:

(1)用1填充整个数组

const arr = [0,0,0,0,0] 

arr.fill(1);//[1,1,1,1,1] 

arr.fill(0);//[0,0,0,0,0]//重置为0

(2)用2填充索引大于等于2的元素

arr.fill(2,2);//[0,0,2,2,2] 

arr.fill(0);//[0,0,0,0,0]//重置为0

(3)使用3填充索引大于等于1且小于3的元素

arr.fill(2,1,3);//[0,3,3,0,0]

(4)用4填充索引大于等于1且小于4的元素

arr.fill(4,-4,-1);//[0,4,4,4,0]

注意:fill()会自动忽略超出数组边界、零长度及方向相反的索引范围。

8503fcdd78558257fd8ab1e3f5a2c593.png

复制方法copyWithin()

copyWithin()会按照指定范围浅复制数组中的部分内容,然后将他们插入到指定索引开始的位置。

例如:

let arr,reset = () => arr = [0,1,2,3,4,5,6,7,8,9];
reset();

(1)从arr中复制索引5开始的内容,插入到索引0开始的位置

arr.copyWithin(0,5);//[5,6,7,8,9,5,6,7,8,9]
reset();

//从arr中复制索引0开始到索引3结束的内容,插入到索引4开始的地方

arr.copyWithin(4,0,3);//[0,1,2,3,0,1,2,7,8,9]

8baf2a6c245944281dda269137f2cf20.png栈方法

ECMAScript给数组提供了相当于栈操作的方法。

栈是一种后进先出(LIFO,Last-In-First-Out)的结构,也就是最近添加的元素先被删除。

  • 插入push();

  • 删除pop();

0719f25e5f859d05d9afb7368d30297b.png

队列方法

队列以先进先出(FIFO,First-In-First-Out)形式的结构。

  • 插入push();

  • 取出shift();

cd4dfbf11c921ee17afb35c647931c53.png

排序方法

数组有两个方法可以用来对元素进行重排序:

  • reverse()

  • sort()

1c18671a866a56770e0918a815cfd378.png

操作方法

1、合并concat()

2、切割slice()

slice()用于创建一个包含原有数组中一个或多个元素的新数组。

2459f1ac52df3e43a5b3189a1babfe45.png

搜索和位置方法

ECMAScript提供两类搜索数组的方法,按严格相等搜索和按断言函数搜索。

1、严格相当搜索

ECMAScript提供了3中严格相等的搜索方法:

  1. indexOf()

  2. lastIndexOf()

  3. includes()

2、断言函数

  1. find()

  2. findIndex()

1b003deb333535cbee4e4aac3c2c24a3.png

迭代方法

1、every()和some()

every()对数组每一项都进行传入的函数,如果对每一项函数都返回true,则这个方法返回true。

some()对数组每一项都运行传入的函数,如果有一项返函数返回true,则就返回true。

例如:

let nums = [1,2,3,4,5,4,3,2,1];
let ret = nums.every((item,index,array) => item > 2);//false
ret = nums.some((item,index,array) => item > 2);//true

2、filter()

filter()是基于给定的函数来决定某一项是否应该包含在它返回的数组中。

比如,要返回一个所有元素都大于2的数组:

let ret = nums.filter((item,index,array) => item>2);//[3,4,5,4,3]

3、map()

map()返回一个数组,这个数组的每一项都是原始数组中同样位置的元素进行传入函数而返回的结果。

例如,对数组中的所有元素都乘以2:

let ret = nums.map((item,index ,array) => item * 2);//[2,4,6,8,10,8,6,4,2]

4、foreach()

foreach()只会对每一项运行传入的函数,没有返回值。本质上foreach()就相当于for循环遍历数组。

nums.foreach((item,index,array) => {//执行某些操作
});

8c6668a83bbea871b0fd60c12283d1df.png归并方法reduce()

reduce()对每一项都会运行的归并函数。

reduce()函数有四个参数:

  1. 上一个归并值

  2. 当前项

  3. 当前项的索引

  4. 数组本身

这个函数返回的任何值都会作为下一次调用同一函数的第一个参数。如果没有传入可选的第二个参数(作为归并起始点),则第一次迭代将从数组的第二项开始,因此传递归并函数的第一个参数是数组的第一项,第二个参数是数组的第二项。

可以使用reduce()对数组中所有值进行求和操作。

let nums = [1,2,3,4,5];
let ret = nums.reduce((prev,cur,index,array){return prev+cur;
});
alert(ret);//15

9fc2f3c0c6cd2b055e503c71f03dcf40.gif

在评论区留言你对本文的观点

CSDN云计算将选出五名优质留言

携手【中国青年出版社-中青雄狮图书】送出

《JavaScript从入门到实战开发最强教科书:完全版》

截至4月1日14:00点

baded437b0970c127d151572472709d6.png

往期推荐

如果让你来设计网络

写时复制就这么几行代码,还是不会?

留不住客户?该从你的系统上找找原因了!

明明还有大量内存,为啥报错“无法分配内存”?

3283914c4852ef81b4fa28515f99d3b1.gif

点分享

6bddb81881742f573e19d0b592edcf26.gif

点收藏

e0f10791d60a5e73f05ff4d7f0c8cb4e.gif

点点赞

de268b268d8ada2523ebd5a6dceff248.gif

点在看

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

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

相关文章

基于消息队列 RocketMQ 的大型分布式应用上云实践

简介: Apache RocketMQ 作为阿里巴巴开源的支撑万亿级数据洪峰的分布式消息中间件,在众多行业广泛应用。在选型过程中,开发者一定会关注开源版与商业版的业务价值对比。 那么,今天就围绕着商业版本的消息队列 RocketMQ和开源版本 …

Gartner发布2022年政府行业主要技术趋势:XaaS、数字化、超自动化等

作者 | Gartner研究副总裁 Bettina Tratz-Ryan Gartner杰出研究副总裁John Kost Gartner高级研究总监 相斌斌 供稿 | Gartner 政府领导人和民选官员在2022年不仅要面对巨大的挑战,还要把握疫情与经济复苏应对措施、不断变化的政治需求和持续数字化变革所带来的机遇…

RedShift到MaxCompute迁移实践指导

简介: 本文主要介绍Amazon Redshift如何迁移到MaxCompute,主要从语法对比和数据迁移两方面介绍,由于Amazon Redshift和MaxCompute存在语法差异,这篇文章讲解了一下语法差异 1.概要 本文档详细介绍了Redshift和MaxCompute之间SQL…

数字农业WMS库存操作重构及思考

简介: 数字农业库存管理系统在2020年时,部门对产地仓生鲜水果生产加工数字化的背景下应运而生。项目一期的数农WMS中的各类库存操作均为单独编写。而伴随着后续的不断迭代,这些库存操作间慢慢积累了大量的共性逻辑:如参数校验、幂…

数字营销行业大数据平台云原生升级实战

简介: 加和科技CTO 王可攀:技术是为业务价值而服务 王可攀 加和科技CTO 本文将基于加和科技大数据平台升级过程中面临的问题和挑战、如何调整数据平台架构以及调整后的变化,为大家介绍数字营销行业大数据平台云原生升级实战经验。主要分为以…

场景模型驱动自动化测试在盒马的探索及实践

简介: 盒马业务有如下几个特点:线上线下一体化、仓储配送一体化、超市餐饮一体化、经营作业一体化、多业态与平台化。在以上的种种原因,生鲜及物流体验是盒马的特点,但仓储配送一体化作业中,如何能更高效的提升测试效率…

基于 KubeVela 的 GitOps 交付

简介: KubeVela 是一个简单、易用、且高可扩展的云原生应用管理和交付平台,KubeVela 背后的 OAM 模型天然解决了应用构建过程中对复杂资源的组合、编排等管理问题,同时也将后期的运维策略模型化,这意味着 KubeVela 可以结合 GitOp…

BCS2022大会将提前至5月 网络安全产业空间扩容将成热门话题

年度网络安全的盛会即将开启。 2022年3月30日,2022年北京网络安全大会(BCS2022)新闻发布会在北京奇安信安全中心召开,宣布2022年北京网络安全大会“提档”至5月24日至26日,并与北辰集团国家会议中心达成战略合作&#…

基于 Istio 的全链路灰度方案探索和实践

简介: 本文介绍的基于“流量打标”和“按标路由” 能力是一个通用方案,基于此可以较好地解决测试环境治理、线上全链路灰度发布等相关问题,基于服务网格技术做到与开发语言无关。同时,该方案适应于不同的7层协议,当前已…

图像检索在高德地图POI数据生产中的应用

简介: 高德通过自有海量的图像源,来保证现实世界的每一个新增的POI及时制作成数据。在较短时间间隔内(小于月度),同一个地方的POI 的变化量是很低的。 作者 | 灵笼、怀迩 来源 | 阿里技术公众号 一 背景 POI 是 Poin…

Redis HyperLogLog 是什么?这些场景使用它~

作者 | 就是码哥呀来源 | 码哥字节在移动互联网的业务场景中,数据量很大,我们需要保存这样的信息:一个 key 关联了一个数据集合,同时对这个数据集合做统计。统计一个 APP 的日活、月活数;统计一个页面的每天被多少个不…

matlab三角形分割,MATLAB 2014b及以上版本中带有画家渲染器的三角形拆分补丁

在解决实际问题之前,这是一个值得怀疑的解决方法:对角线只是三角形之间的空白区域,所以我们看到的是补丁后面的白色空间.愚蠢的想法:让我们用匹配的颜色填充该空间而不是白色.为此,我们将复制所有对象,并通过一个tiiiiny位来抵消新对象.码:hi…

网易云音乐音视频算法的 Serverless 探索之路

简介: 网易云音乐最初的音视频技术大多都应用在曲库的数据处理上,基于音视频算法服务化的经验,云音乐曲库团队与音视频算法团队一起协作,一起共建了网易云音乐音视频算法处理平台,为整个云音乐提供统一的音视频算法处理…

小小的 likely 背后却大有玄机!

作者 | 张彦飞allen来源 | 开发内功修炼今天我给大家分享一个内核中常用的提升性能的小技巧。理解了它对你一定大有好处。在内核中很多地方都充斥着 likely、unlikely 这一对儿函数的使用。随便揪两处,比如在 TCP 连接建立的过程中的这两个函数。//file: net/ipv4/t…

阿里云马涛:因云进化的基础软件

简介: 基础软件的云原生化。 编者按:2021 年10 月20 日,在2021 云栖大会云计算产业升级峰会上,阿里云“因云而生”云原生心智大图正式发布,包含弹性计算、云网络、基础产品、基础设施、操作系统、云安全、开放平台等7个…

阿里云ECI如何6秒扩容3000容器实例?

简介: 2021年云栖大会现场,阿里云工程师演示了在6秒时间内成功启动3000个ECI,并全部进入到Running状态。本文将为你揭开阿里云ECI是如何做到极速扩容的。 引言 根据最新CNCF报告,有超过90%的用户在生产环境使用容器,…

巧用友盟+U-APM 实现移动端性能优化—启动速度

简介: 移动端性能对用户体验、留存有着至关重要的影响,作为开发者是不是被这样吐槽过,“这个 APP 怎么这么大?”、“怎么一直在 APP 封面图转悠,点不进去”、“进入详情效果有些卡”、“用 4G 使用你们的 APP&#xff…

第25版 OpenStack Yoga 已发布

OpenStack社区今日正式发布第25版-Yoga,该版本通过支持先进的硬件技术如SmartNIC DPUs,优化与云原生软件如Kubernetes、Prometheus等的集成以及减少技术债等方式来保持OpenStack内核的稳定性与可靠性。 OpenStack作为开源基础设施即服务(Iaa…

项目实战总结以及接入U-APM

简介: 导致 App 性能低下的原因有很多,除去设备硬件和软件的外部因素,其中大部分是开发者错误地使用线、系统函数、编程范式、数据结构等导致的。即便是较有经验的程序员,也很难在开发时就能避免所有导致性能低下的“坑”&#xf…

oracle redo 200mb,Oracle的redo log在各场景下的恢复

Oracle的redo log非常重要,redo log损坏将导致数据库开法开启或数据丢失,针对redo log在各种场景下如何打开或恢复数据库,特别模拟测试说明:各场景包括如下(共6个场景):场景一.非归档下inactive状态的redo 恢复场景二.非归档下act…