JavaScript数组shift()与unshift()方法详解及模拟实现
本文详细解析JavaScript中shift()与unshift()两个核心数组方法的定义、语法及返回值。通过对比原生方法与手动模拟实现的代码，展示如何修改原数组并获取操作结果，帮助开发者深入理解数组头部元素增删的原理与具体应用。
本文通过具体实例，深入讲解JavaScript中数组方法shift()与unshift()的具体用法，供读者参考学习。
shift()方法
1. 定义：该方法用于移除数组的第一个元素，并返回被移除元素的值。执行后，原数组的长度会相应减少。 2. 语法：arr.shift() 3. 参数：无 4. 返回值：返回被移除的元素；若数组为空，则返回undefined。
具体代码实现如下：
实现方式一：
var arr1 = [1, 2, 3, 4, 'A', 'B', 'C'];
var arr2 = [];
Array.prototype.copyShift = function() {
var result = [],
newArr = [];
result = this[0];
for(var i = 1; i < this.length; i++) {// 将数组的第二个至最后一项的值赋值给newArr
newArr[newArr.length] = this[i];
}
for(var i = 0; i < newArr.length; i++) { //newArr赋值给原数组
this[i] = newArr[i];
}
this.length = newArr.length;
return result;
};
console.log(arr1.copyShift()); // 1
console.log(arr1); // [2, 3, 4, 'A', 'B']
console.log(arr2.copyShift()); // undefined
console.log(arr2); // []
运行结果如下：
实现方式二：对前述代码进行优化，去除中间数组newArr，直接在原数组上进行元素移动操作。
var arr1 = [1, 2, 3, 4, 'A', 'B', 'C'];
var arr2 = [];
Array.prototype.copyShift = function() {
var result = [];
result = this[0];
/*
for(var i = 1; i < this.length; i++) {// 将数组的第二个至最后一项的值赋值给newArr
newArr[newArr.length] = this[i];
}
for(var i = 0; i < newArr.length; i++) { //newArr赋值给原数组
this[i] = newArr[i];
}
this.length = newArr.length;
*/
// 将数组的后一项赋值给前一项
for(var i = 0; i < this.length; i++) {
this[i] = this[i + 1];
}
if(this.length > 1) {//去掉数组最后一项
this.length = this.length - 1;
}
return result;
};
console.log(arr1.copyShift()); // 1
console.log(arr1); // [2, 3, 4, 'A', 'B']
console.log(arr2.copyShift()); // undefined
console.log(arr2); // []
运行结果如下：
unshift()方法
1. 定义：用于将一个或多个元素添加到数组的开头，并返回新数组的长度。 2. 语法：arr.unshift(element1, ..., elementN) 3. 参数：可在数组前端添加任意数量的元素。 4. 返回值：返回调用该方法后的数组长度。
具体代码实现如下：
实现方式一：
var arr1 = [1, 2, 3, 4, 'A', 'B', 'C'];
var arr2 = [1, 2, 3, 4];
Array.prototype.copyUnshift = function() {
var newArr = [],
argLen = arguments.length,
len = argLen + this.length;
for(var i = 0; i < len; i++) {
/*
if(i < argLen) {
newArr[i] = arguments[i];
}
else {
newArr[i] = this[i - argLen];
}
*/
// 上述代码也可写为：
newArr[i] = (i < argLen) ? arguments[i] : this[i - argLen];
}
for(var i = 0; i < len; i++) {
this[i] = newArr[i];
}
return len;
};
console.log(arr1.copyUnshift('XXX', 'YYY', 'ZZZ')); // 10
console.log(arr1); // ['XXX', 'YYY', 'ZZZ', 1, 2, 3, 4, 'A', 'B']
console.log(arr2.copyUnshift()); // 4
console.log(arr2); // [1, 2, 3, 4]
运行结果如下：
//同方法一一样，只不过是for循环以递减的形式
var arr1 = [1, 2, 3, 4, 'A', 'B', 'C'];
var arr2 = [1, 2, 3, 4];
Array.prototype.copyUnshift = function() {
var newArr = [],
argLen = arguments.length,
len = argLen + this.length;
//同方法一一样，只不过是for循环以递减的形式
for(var i = len - 1; i >= 0; i--) {
/* if(i < argLen) {
newArr[i] = arguments[i];
}
else {
newArr[i] = this[i - argLen];
} */
// 上述代码也可写为：
newArr[i] = (i < argLen) ? arguments[i] : this[i - argLen];
}
for(var i = 0; i < len; i++) {
this[i] = newArr[i];
}
return len;
};
结合前文递减形式的for循环，可进一步修改代码逻辑如下：
实现方式二：直接修改原数组，无需借助中间数组。
var arr1 = [1, 2, 3, 4, 'A', 'B', 'C'];
var arr2 = [1, 2, 3, 4];
Array.prototype.copyUnshift = function() {
var argLen = arguments.length,
len = argLen + this.length;
for(var i = len - 1; i >= 0; i--) {
/* if(i > argLen - 1) {
this[i] = this[i - argLen];
}
else {
this[i] = arguments[i];
}
*/
this[i] = (i > argLen - 1) ? this[i - argLen] : arguments[i];
}
return len;
};
console.log(arr1.copyUnshift('XXX', 'YYY', 'ZZZ')); // 10
console.log(arr1); // ['XXX', 'YYY', 'ZZZ', 1, 2, 3, 4, 'A', 'B']
console.log(arr2.copyUnshift()); // 4
console.log(arr2); // [1, 2, 3, 4]
运行结果如下：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
D3.js 比例尺与坐标轴的配置详解
2026-11-05 16:54:46
JavaScript怎么遍历对象的Symbol键和不可枚举属性
2026-11-05 13:13:39
封装一个健壮的JS字符串判空工具函数
2026-11-05 12:16:14
JavaScript合并数组的三种常用方法：concat、扩展运算符与push
2026-11-05 11:22:29
JavaScript立即执行函数(IIFE)是什么及基本语法
2026-11-05 10:51:19