本文例項講述了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,4,9,8 ]

頭部新增(unshift)

unshift() 方法將一個或多個元素新增到陣列的開頭，並返回該陣列的新長度(該方法修改原有陣列)。

向陣列的頭部新增元素，陣列的長度也會發生變化，但不像尾部新增的操作，陣列原有元素索引不改變。做頭部新增的操作，需要將原有元素的索引向右移動。

例如只新增一位，則需要將陣列的每個元素的索引依次向右移一位，假設原來陣列長度是4，頭部新增一個元素，長度變為5.

所以現在就變成：array.length = 5，而目前array[5 - 1]是最後一個元素，現在由於依次往後移動，所以，array[5]必須是最後一個元素

所以我們可以從陣列的最後一位的下一位往前迴圈，將array[i]

過程如下

具體程式碼實現：

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,4]
arr._unshift(8)
console.log(arr); // [ 8,1,4 ]

但上面的程式碼只實現了一個元素的頭部新增，unshift方法支援新增多個元素。例如：

var arr = [1,4]
arr.unshift(8,7)
console.log(arr); // [ 8,7,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,4\]
arr._unshift(9,8)
console.log(arr); // [ 9,8,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,4]
arr._pop()
console.log(arr); // [ 1,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,4]
arr._shift()
console.log(arr); // [ 2,4 ]

感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具：http://tools.jb51.net/code/HtmlJsRun測試上述程式碼執行效果。

更多關於JavaScript相關內容感興趣的讀者可檢視本站專題：《JavaScript陣列操作技巧總結》、《JavaScript遍歷演算法與技巧總結》、《javascript面向物件入門教程》、《JavaScript數學運算用法總結》、《JavaScript資料結構與演算法技巧總結》及《JavaScript錯誤與除錯技巧總結》

希望本文所述對大家JavaScript程式設計有所幫助。