JavaScript数组push、unshift、pop、shift方法的底层实现原理与代码示例
本文详细解析JavaScript中数组尾部添加push、头部添加unshift、尾部删除pop及头部删除shift四个核心方法的底层实现逻辑。通过手动编写原型方法，深入讲解元素索引移动、长度变化及参数处理机制，并提供完整的JavaScript代码示例供参考学习。
本文通过具体实例，详细解析JavaScript数组中push、unshift、pop以及shift这四个常用方法的底层实现原理与使用方式，旨在为读者提供深入理解及参考。
尾部添加（push）方法的实现
尾部添加（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时停止，最后将数组的第0项赋值为需要添加的新值。
具体执行过程如下
以下是具体的代码实现：
头部添加（unshift）方法的实现
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，因此循环的起点和终点都需要减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）
`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）
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.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述的实现原理与代码示例对大家的JavaScript程序设计有所帮助。
JavaScript闭包与类(Class)的区别及适用场景对比
2026-11-05 15:48:57
JavaScript入门要学ES6吗？let与箭头函数等新特性解析
2026-11-05 14:49:16
JavaScript 8种数据类型详解：基本类型与引用类型的区别
2026-11-05 14:25:15
怎么在JavaScript中使用async/await优化Ajax异步流程
2026-11-05 13:56:15
JavaScript replace回调函数实现动态正则替换逻辑
2026-11-05 13:52:13