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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
JS实现悬浮移动窗口(悬浮广告)的特效
Mar 12 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
使用js判断TextBox控件值改变然后出发事件
Mar 07 Javascript
拥有一个属于自己的javascript表单验证插件
Mar 24 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
es6基础学习之解构赋值
Dec 10 Javascript
微信小程序实现文件、图片上传功能
Aug 18 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 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
一个简洁的多级别论坛
2006/10/09 PHP
PHP中TP5 上传文件的实例详解
2017/07/31 PHP
谷歌浏览器 insertCell与appendChild的区别
2009/02/12 Javascript
javaScript arguments 对象使用介绍
2013/10/18 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
基于jquery实现的树形菜单效果代码
2015/09/06 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
js给table赋值的实例代码
2016/10/13 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
vuex入门最详细整理
2020/03/04 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
前端 javascript 实现文件下载的示例
2020/11/24 Javascript
编写Python的web框架中的Model的教程
2015/04/29 Python
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
Python numpy 点数组去重的实例
2018/04/18 Python
浅谈OpenCV中的新函数connectedComponentsWithStats用法
2020/07/05 Python
SmartBuyGlasses比利时:购买品牌太阳镜和眼镜
2019/08/09 全球购物
和平主题的演讲稿
2014/01/12 职场文书
爱国卫生月活动总结范文
2014/04/25 职场文书
教学改革问题查摆整改措施
2014/09/27 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
行政申诉状范文
2015/05/20 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
浅谈CSS不规则边框的生成方案
2021/05/25 HTML / CSS
基于Python实现流星雨效果的绘制
2022/03/18 Python