JS数组push、unshift、pop、shift方法的实现与使用方法示例


Posted in Javascript onApril 29, 2020

本文实例讲述了JS数组push、unshift、pop、shift方法的实现与使用方法。分享给大家供大家参考,具体如下:

尾部添加(push)

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

从解释中可以看出,push方法只要将要添加的元素依次放到数组的最后即可,不会改变原有数组元素的索引。所以循环参数列表,将新元素依次放到数组的最后即可。

Array.prototype._push = function(...value) {
 for (var i = 0; i < arguments.length; i++) {
 this[this.length] = arguments[i]
 }
 return this.length
}
var arr = [1, 2, 3, 4]
arr._push(9, 8)
console.log(arr) // [ 1, 2, 3, 4, 9, 8 ]

头部添加(unshift)

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

向数组的头部添加元素,数组的长度也会发生变化,但不像尾部添加的操作,数组原有元素索引不改变。做头部添加的操作,需要将原有元素的索引向右移动。

例如只添加一位,则需要将数组的每个元素的索引依次向右移一位,假设原来数组长度是4,头部添加一个元素,长度变为5.

所以现在就变成:array.length = 5,而目前array[5 - 1]是最后一个元素,现在由于依次往后移动,所以,array[5]必须是最后一个元素

所以我们可以从数组的最后一位的下一位往前循环,将array[i]赋值为array[i - 1],循环到1停止,将array的第0项赋值为需要添加的值。

过程如下

JS数组push、unshift、pop、shift方法的实现与使用方法示例

具体代码实现:

Array.prototype._unshift = function(value) {
 for (let i = this.length; i > 0; i--) {
 this[i] = this[i - 1]
 }
 this[0] = value
 return this.length
}
var arr = [1, 2, 3, 4]
arr._unshift(8)
console.log(arr); // [ 8, 1, 2, 3, 4 ]

但上面的代码只实现了一个元素的头部添加,unshift方法支持添加多个元素。例如:

var arr = [1, 2, 3, 4]
arr.unshift(8, 7)
console.log(arr); // [ 8, 7, 1, 2, 3, 4 ]

针对这样的情况,需要知道传入了几个参数,可以从arguments对象入手,思路还是上面的思路:
先以最后生成的数组长度为基准从后往前循环,依次移动元素,然后将新元素依次放到数组的头部

新数组的长度等于原数组的长度 + 参数的个数,从后往前循环,将原数组的最后一位,移动到新数组的最后一位,

因为需要在头部插入数量为入参个数的元素,所以循环的起点为原数组的长度 + 参数的个数,循环的终点为入参的个数。

但由于索引总是比长度少一位,所以起点和终点都需要减1。

现在可以先把循环移动的逻辑写出来

Array.prototype._unshift = function(...value) {
 for (var i = (this.length + arguments.length - 1); i > arguments.length - 1; i--) {
 this[i] = this[i - arguments.length]
 }
}

再思考一下,由于上一步已经移动完了,数组头部的位置已经空出来了,第二步是有几个参数就要插入几个元素。所以现在只需要循环插入就好:

for(var k = 0; k < arguments.length; k++) {
 this[k] = arguments[k]
}

完整的代码如下:

Array.prototype._unshift = function(...value) {
 for (var i = (this.length + arguments.length - 1); i > arguments.length - 1; i--) {
 this[i] = this\[i - arguments.length]
 }
 for(var k = 0; k < arguments.length; k++) {
 this[k] = arguments[k]
 }
 return this.length
}
var arr = [1, 2, 3, 4\]
arr._unshift(9, 8)
console.log(arr); // [ 9, 8, 1, 2, 3, 4 ]

尾部删除 (pop)

`pop() 方法将删除 arrayObject 的最后一个元素,把数组长度减 1,并且返回它删除的元素的值。如果数组已经为空,则 pop() 不改变数组,
并返回 undefined 值。`

这个很好实现,按照定义一步一步做就可以。首先,记录下最后一个元素,便于返回,之后从数组中删除最后一个元素,
将其指向null释放掉,然后将数组的长度减1,最后判断一下是否为空数组。

Array.prototype._pop = function () {
 if (!this.length) {
 return undefined
 }
 var end = this[this.length - 1]
 this[this.length - 1] = null
 this.length = this.length - 1
 return end
}
var arr = [1, 2, 3, 4]
arr._pop()
console.log(arr); // [ 1, 2, 3 ]

头部删除(shift)

shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。

头部删除,会改变原有数组元素的索引,也就是将未被删除的元素索引都往左移一位,首先要将被删除的元素记录下来便于返回,之后将数组第一个元素指向null,

最后循环数组,移动索引。

Array.prototype._shift = function () {
 if (!this.length) {
 return undefined
 }
 var start = this[0]
 this[0] = null
 for(var i = 0; i < this.length - 1; i++) {
 this[i] = this[i + 1]
 }
 this.length = this.length - 1
 return start
}
var arr = [1, 2, 3, 4]
arr._shift()
console.log(arr); // [ 2, 3, 4 ]

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
禁止拷贝网页内容的js代码
Jan 22 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
js学使用setTimeout实现轮循动画
Jul 17 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
Dec 16 Javascript
ES6 Promise对象的应用实例分析
Jun 27 Javascript
JavaScript生成随机验证码代码实例
Sep 28 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
基于JavaScript实现控制下拉列表
May 08 Javascript
Postman如何实现参数化执行及断言处理
Jul 28 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
axios封装与传参示例详解
Oct 18 Javascript
JS实现手写 forEach算法示例
Apr 29 #Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 #Javascript
Node.js API详解之 string_decoder用法实例分析
Apr 29 #Javascript
深入浅析vue全局环境变量和模式
Apr 28 #Javascript
你准备好迎接vue3.0了吗
Apr 28 #Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 28 #Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
逐步提升php框架的性能
2008/01/10 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
php远程下载类分享
2016/04/13 PHP
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
IE6/7 and IE8/9/10(IE7模式)依次隐藏具有absolute或relative的父元素和子元素后再显示父元素
2011/07/31 Javascript
JS实现简单的Canvas画图实例
2013/07/04 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
Javascript节点关系实例分析
2015/05/15 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
JS实现拼图游戏
2021/01/29 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
vue+animation实现翻页动画
2020/06/29 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python2.6.6如何升级到python2.7.14
2018/04/08 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
10款最好的Python开发编辑器
2019/07/03 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
python进行参数传递的方法
2020/05/12 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Kears 使用:通过回调函数保存最佳准确率下的模型操作
2020/06/17 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
2014年党员整改措施范文
2014/09/21 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
群众路线教育实践活动方案
2014/10/31 职场文书
出生公证书
2015/01/23 职场文书
出国留学单位推荐信
2015/03/26 职场文书
零基础学java之带返回值的方法的定义和调用
2022/04/10 Java/Android