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,一经查实,立即删除!

相关文章

php同时删除两个列表数据库,PHP 处理 数据库多表,既能高效又能思路清晰如何处理的?...

【情况如下】在表1中 记录着自行车编号 租户商家1 a2 a3 b4 c[这里的意思是,不同的商家。拥有的自行车,商家拥有自行车表]表2自行车编号 租出时间 租出金额1 2 41 3 51 6 102 3 53 4 7[这里 意味着。不同的商家 对自己的自行车 租出时间不同设置的价格&a…

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

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

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

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

php include无效,php 两次include后,第一个include里的变量无效了

php 目录结构 rootindex.phpconfig.phpcindex.phproot/config.php 里的内容回复讨论(解决方案)首先,解析顺序如下1.文件路径是绝对路径?是, 包含, 解析结束。不是, 进入下一步。2.文件路径是相对路径(就像你的"../index.php")?是, 跳过include_path, 解析相对路径。…

RedShift到MaxCompute迁移实践指导

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

冲击中国超融合第一,浪潮的底气从何而来?

2016年被业内很多人称为“超融合元年”,一众存储、服务器、网络、安全厂商如同“摔杯为号”一般,齐齐迈入了超融合市场。于是,风助火势,火借风威,那年的“超融合”烧得正热。六年后的今天,当我们再度将目光…

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

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

three.js和php,threejs--初创项目

一.环境介绍倘若你只是使用Three.js库中所提供的几何体,且不载入任何纹理贴图,则网页是可以从本地的文件系统中打开,并且是能够直接运行的,只需在文件管理器中双击HTML文件,它就可以在浏览器中进行显示。 (此时你将在地…

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

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

云上更安全?亚马逊云科技宣布将持续加大在中国区域安全合规领域投入

编辑 | 宋慧 出品 | CSDN云计算 新冠疫情对我们工作产生了深远的影响,远程在线的工作与交流愈加普及,国内更多公司在推出居家办公的“混合办公”模式。不过,这也给了网络攻击更多的机会,CSDN看到,有多个安全领域的报告…

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

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

基于 KubeVela 的 GitOps 交付

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

php curlopt_postfields,PHP的CURLOPT_POSTFIELDS参数使用数组和字符串的区别 - CSDN博客

PHP的CURL组件是非常常用的HTTP请求模拟器。通常要发送post数据时,我已经习惯于这样写:curl_setopt( $ch, CURLOPT_POSTFIELDS,$post_data);但是在向某一个服务器发送请求的时候,服务器返回500。而使用socket方式连接上去发送请求&#xff0c…

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…