JS数组push、unshift、pop、shift操作详解及实例

在JavaScript中，数组是用于存储一组有序数据的数据结构。在处理数组时，有时我们需要在数组的开头或结尾添加或删除元素。JS数组提供了几个内置方法来实现这些操作，分别是`push`、`unshift`、`pop`和`shift`。下面我们将详细探讨这些方法的实现原理和使用方法。 1. 尾部添加 - push `push`方法用于在数组的末尾添加一个或多个元素，并返回数组的新长度。这个方法不会改变原有数组元素的索引。实现`push`的方法如下： ```javascript 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] ``` 2. 头部添加 - unshift `unshift`方法用于在数组的开头添加一个或多个元素，并返回数组的新长度。这个方法会改变原有数组元素的索引。实现`unshift`的方法如下： ```javascript 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(9, 8); console.log(arr); // [9, 8, 1, 2, 3, 4] ``` 3. 尾部删除 - pop `pop`方法用于删除并返回数组的最后一个元素，数组的长度会减一。实现`pop`的方法很简单，因为只需要移除数组的最后一个元素即可： ```javascript Array.prototype._pop = function () { if (this.length === 0) return undefined; var lastItem = this[this.length - 1]; delete this[this.length - 1]; this.length--; return lastItem; } var arr = [1, 2, 3, 4]; console.log(arr._pop()); // 4 console.log(arr); // [1, 2, 3] ``` 4. 头部删除 - shift `shift`方法用于删除并返回数组的第一个元素，数组的长度也会减一。实现`shift`的方法涉及到对数组中所有元素的重新排列： ```javascript Array.prototype._shift = function () { if (this.length === 0) return undefined; var firstItem = this[0]; for (let i = 1; i < this.length; i++) { this[i - 1] = this[i]; } delete this[this.length - 1]; this.length--; return firstItem; } var arr = [1, 2, 3, 4]; console.log(arr._shift()); // 1 console.log(arr); // [2, 3, 4] ``` 以上四个方法都是对数组操作的重要组成部分，它们可以帮助我们方便地在数组的两端进行元素的添加和删除。在实际开发中，了解这些方法的工作原理和使用方式，能帮助我们更高效地处理数组数据。需要注意的是，这些方法都会直接修改原数组，而不是创建新的数组副本，所以在某些情况下可能需要先复制数组再进行操作。