js数组再倒数第二个添加元素_归纳JS中数组的使用(一)元素新增和删除

新增元素

js中给数组新增元素主要通过2个方法 push 和 unshift

Array.prototype.push

功能概述

push() 方法将一个或多个元素添加到数组的末尾,并返回该数组的新长度(该方法修改原有数组)。

语法

arr.push(element1, ..., elementN)

关注点

新增的元素出现在数组的末尾

可以一次性添加多个元素

返回值是数组的最新长度

代码示例

简单使用

let arr = [1,2];

let newLength = arr.push(3,4);

console.log(newLength)// newLength: 4

对比通过脚本添加和ES6析构的方式添加性能对比

function push() {

let arr = [1,2];

let newLength = arr.push(3,4);

}

function add() {

let arr = [1,2];

let len = arr.length;

arr[len] = 3;

arr[len+1] = 4;

}

function es6() {

let arr = [1,2];

arr = [

...arr,

3,

4

]

}

let sum = 1000000;//1百万次

console.time('push')

for (let index = 0; index < sum; index++) {

push();

}

console.timeEnd('push');

console.time('add')

for (let index = 0; index < sum; index++) {

add();

}

console.timeEnd('add')

console.time('es6')

for (let index = 0; index < sum; index++) {

es6();

}

console.timeEnd('es6')

输出的结果

push: 470.538818359375ms

add: 454.7177734375ms

es6: 2625.546142578125ms

结论

push 和 通过角标去添加元素性能接近,而es6的析构会慢很多;原因是 es6的析构可以等效如下代码

let arr = [1,2];

arr = [...arr,4,5]; //1

arr = arr.concat(4,5); //2

Array.prototype.unshift

功能概述

unshift()方法将一个或多个元素添加到数组的开头,并返回该数组的新长度(该方法修改原有数组)

语法

arr.unshift(element1,...,elementN)

关注点

新增单个或者多个元素到数组的头部

如果是多个元素,会以块的方式添加到数组头部,也就是说会保持参数的原有顺序

函数返回新数组的长度

代码示例

简单使用

let arr = [1,2];

let newLength = arr.unshift(10);

console.log(newLength);// 3,新数组长度

区分一次添加多个元素和循环添加

let arr = [1,2];

arr.unshift(3,4,5);

console.log(arr); //#1

let arrMap = [1,2];

let add = [3,4,5];

add.map(val=>{

arrMap.unshift(val);

})

console.log(arrMap);//#2

第一处的输出和第二处的输出结果是不一样

删除元素

数组中提供了2个删除元素的方法分别是pop()和shift();和新增元素一样,一个是从末尾删除一个是从头部删除

Array.prototype.pop

功能概述

pop()方法从数组中删除最后一个元素,并返回该元素的值(此方法更改数组的长度)。

语法

arr.pop()

关注点

从元素末尾删除

返回被删除的元素

如果数组是空,返回的元素是 undefined

代码示例

let arr = [1,2];

let delEle = arr.pop();

console.log(delEle);// 2

console.log(arr); // [1];

Array.prototype.shift

功能概述

shift() 方法从数组中删除第一个元素,并返回该元素的值(此方法更改数组的长度)。

语法

arr.shift()

关注点

从数组头部开始删除元素

返回删除元素的本身

如果数组是空,返回的元素是 undefined

实现数据结构中的栈和队列

数据结构(栈)

栈(stack)又名堆栈,它是一种运算受限的线性表。限定仅在表尾进行插入和删除操作的线性表。这一端被称为栈顶,相对地,把另一端称为栈底。向一个栈插入新元素又称作进栈、入栈或压栈,它是把新元素放到栈顶元素的上面,使之成为新的栈顶元素;从一个栈删除元素又称作出栈或退栈,它是把栈顶元素删除掉,使其相邻的元素成为新的栈顶元素

代码实现

从概念描述来说,我们只需要满足 先进后出(后进先出)这个特性就可以了;所以如果我们入栈的时候是在数组的末尾,那么出栈的时候也得从末尾开始,如果入栈的时候是数组的头部那么出栈的时候也对在数组的头部

从数组末尾入栈

function Stack(initData){

this.data = initData || [];

}

// 入栈

Stack.prototype.in = function (element) {

return this.data.push(element);

}

// 出栈

Stack.prototype.out = function(){

return this.data.pop();

}

从数组头部入栈

function Stack(initData){

this.data = initData || [];

}

// 入栈

Stack.prototype.in = function (element) {

return this.data.unshift(element);

}

// 出栈

Stack.prototype.out = function(){

return this.data.shift();

}

数据结构(队列)

队列是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表。进行插入操作的端称为队尾,进行删除操作的端称为队头。

代码实现

和栈一样,我们可以把数组的任意一头作为队列的 前端;

把数组的头部当作前端,那么数组的末尾就是后端,也就是删除元素得在数组的头部,而新增元素就在数组的尾部

// 使用 shift 和 push 实现

function Queue(initData){

this.data = initData || [];

}

// 添加

Queue.prototype.in = function (element) {

return this.data.pop(element);

}

// 删除

Queue.prototype.out = function(){

return this.data.shift();

}

总结

push,pop,unshift,shift这4个函数是数组提供的对数组内元素进行新增和删除;在日常开发中组合使用能够帮助我们快速实现很多功能,在结合vue和angular这些框架使用的时候,需要注意他们的双向数据绑定对数组的限制

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

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

相关文章

基于谷歌模型gemini-pro 的开发的QT 对话项目

支持的功能&#xff0c;新建对话框&#xff0c;目前发现相关梯子不支持访问谷歌的api 的可能代理设置的不对&#xff0c; QNetworkAccessManager manager;// Set up your requestQNetworkRequest request;request.setUrl(QUrl("https://generativelanguage.googleapis.com…

PS快速将白底图片变为透明图片的解决办法

公司的公章被傻逼老板带到国外去啦&#xff0c;现在还得用公章&#xff0c;就只能拿以前的文件p图啦。 在将白底图片修改为透明图片时&#xff0c;我首先能想到的是简单的利用磁性套索工具选择图片&#xff08;非常细微的操作&#xff09;&#xff0c;但是一不小心就容易出错&a…

Lucene.net站内搜索—5、搜索引擎第一版实现

目录 Lucene.net站内搜索—1、SEO优化 Lucene.net站内搜索—2、Lucene.Net简介和分词 Lucene.net站内搜索—3、最简单搜索引擎代码Lucene.net站内搜索—4、搜索引擎第一版技术储备&#xff08;简单介绍Log4Net、生产者消费者模式&#xff09;Lucene.net站内搜索—5、搜索引擎第…

java ee jms_Java EE6事件:JMS的轻量级替代品

java ee jms我今天要讨论的功能是Java EE 6中的事件机制。一般的想法是触发一个事件&#xff0c;并让事件监听器来接收它。 我创建了这个完全没有用的示例&#xff0c;但是它的简单性帮助我专注于重要的内容。 我将从后备操作中触发LogEvent&#xff0c;该事件将记录到java.uti…

All your files have been encrypted

小弟的姑姑家的老板收银的电脑被黑客黑了,我来解决一下,小孩玩游戏玩电脑中的病毒, 方法很多种,仅供参考。 问题邮件截图: 参考方式: 方法一:给对方钱,一般比较贵,还不如重装系统。哈哈。 方法二:下载解密工具,尝试解密恢复数据, Ransomware File Decrypto Too…

8s yaml 配置生成_接口测试框架实战(六) | 配置的数据驱动

《Python 测试开发实战进阶》课程&#xff0c;4 个月挑战 BAT 大厂年薪 50W Offer&#xff0c;文末加群&#xff01;在实际工作中&#xff0c;为了便于维护&#xff0c;对于环境的切换和配置&#xff0c;通常不会使用硬编码的形式完成。在之前文章《多环境下的接口测试》中&…

机房合作(一):我怎样做组长(敢于承担责任)

导读&#xff1a;小组合作开始了&#xff0c;不怕死的我&#xff0c;揽下了组长的活儿。然后开始了我的漫漫长征路。不过&#xff0c;不怕猪一样的组长&#xff0c;咱有神一样的组员。机房合作到现在&#xff0c;真的感激组员的配合以及对我这个猪组长的指点。接下来&#xff0…

使用JAXB和Jackson从XSD生成JSON模式

在本文中&#xff0c;我演示了一种从XML Schema &#xff08;XSD&#xff09;生成JSON Schema的 方法 。 在概述从XML Schema创建JSON Schema的方法的同时&#xff0c;本文还演示了JAXB实现的用法&#xff08;与JDK 9捆绑在一起的xjc版本2.2.12-b150331.1824 [build 1.9.0-ea-b…

成功人士都有的好习惯

人们常问的一个问题是:那些成功的人是如何获得成功的。这个问题的众多答案之一可能就隐藏在他们的日常习惯之中——但这些习惯到底是什么,它们与成功又有什么关系呢? 习惯是指以固定的方式定期进行的实践或行为模式。在这种情况下,意味着成功人士必须采取日常实践,才有可…

有多个python版本_python 多版本共存

有时候需要在同一台机器上安装多个版本的python常见的解决方式如下&#xff1a;一、1. 下载python2.7和python3.7&#xff0c;然后在C盘下新建一个Python文件夹&#xff0c;python2.7安装到 C:\Python\Python27python3.7安装到 C:\Python\Python372. 检查 系统变量中是否有…

Spring Integration完整示例

本文是我们名为“ Spring Integration for EAI ”的学院课程的一部分。 在本课程中&#xff0c;向您介绍了企业应用程序集成模式以及Spring Integration如何解决它们。 接下来&#xff0c;您将深入研究Spring Integration的基础知识&#xff0c;例如通道&#xff0c;转换器和适…

为什么要创业

在这个时代,成为一名企业家比以往任何时候都要容易,技术正在缩小世界,打开市场,让许多人在他们梦想的领域中独辟蹊径。 然而,许多拥有好点子的人却害怕采取行动。不要让自己成为那些后悔没有创业的人。如果你想掌控你的生活,实现你的梦想。那么你就有无数的理由创业,我…

heroku_简单的Twitter:Heroku上的Play框架,AJAX,CRUD

heroku因此&#xff0c;重大的公告已经发布– Heroku开始为Play Framework应用程序提供本机支持&#xff01; 如果您还没有听说过&#xff0c;请在Heroku的博客上查看Jesper Joergensen的帖子 。 因此&#xff0c;对于演示&#xff0c;我将建立一个非常基本的Twitter副本&#…

配置环境_JavaJDK环境变量配置

1.Java环境搭建1.1 JDK与JREJDK(Java Development Kit Java开发工具包)JDK是提供给Java开发人员使用的&#xff0c;其中包含了java的开发工具&#xff0c;也包括了JRE。所以安装了JDK&#xff0c;就不用在单独安装JRE了。其中开发工具&#xff1a;编译工具(javac.exe)打包工具(…

僵固式思维 OR 成长式思维

有意无意中&#xff0c;看到这样的一篇文章&#xff0c;觉得非常富有正能量&#xff0c;而且也比较有同感。而且&#xff0c;不仅仅对于职场暂时失落或者失意的人有帮助&#xff0c;就是对学生&#xff0c;也一样的。故特分享&#xff0c;以共勉之。 我想每个新人进入职场之后都…

Linux常用命令(知道啦就赶紧收藏吧)

作为职业黑客,Linux命令不可不知。赶紧拿起你的小本本。 w-显示目前登入系统的用户信息 ab-Apache服务器的性能测试工具 ip-网络配置工具 ld-将目标文件连接为可执行程序 xz-POSIX 平台开发具有高压缩率的工具。 ln-用来为文件创件连接 ar-建立或修改备存文件,或是从备…

在Spring使用AWS SQS创建消息驱动Bean

在我之前的文章中&#xff0c;我展示了一个简单的示例&#xff0c;该示例如何将AWS SQS与Spring Framework结合使用以将消息放入队列中并从队列中读取消息。 在本文中&#xff0c;我将更进一步&#xff0c;并使用Spring创建一个“消息驱动的Bean”&#xff0c;以便对放入队列中…

springboot中得注解_Spring以及SpringBoot中的常用的注解小结

一、注解的基本概念Annotation(注解)就是Java提供了一种元程序中的元素关联任何信息和着任何元数据(metadata)的途径和方法。Annotion(注解)是一个接口&#xff0c;程序可以通过反射来获取指定程序元素的Annotion对象&#xff0c;然后通过Annotion对象来获取注解里面的元数据。…

Asp.net MVC 的一些总结(二)——图片显示

这里实现的是&#xff0c;如下图片所示的效果&#xff1a; 当然&#xff0c;当你看的下图的时候&#xff0c;请不要自己想当然的认为是简单的html布局&#xff01;&#xff01;&#xff01; &#xff08;1&#xff09;业务说明&#xff1a;图片地址是数据库里存的&#xff0c;图…

Spring整合基础

本文是我们名为“ Spring Integration for EAI ”的学院课程的一部分。 在本课程中&#xff0c;向您介绍了企业应用程序集成模式以及Spring Integration如何解决它们。 接下来&#xff0c;您将深入研究Spring Integration的基础知识&#xff0c;例如通道&#xff0c;转换器和适…