JavaScript 數組操作方法

這些數組的操作方法會改變原來的數組。在使用 Vue 或者 Angular 等框架的時候會非常實用，使用這些方法修改數組會觸發視圖的更新。

Array.prototype.push

該方法可以在數組末尾添加元素，接受一個或者多個元素作為參數。該方法返回數組新的長度。

使用方式為：array.push(item1, item2, ...)

添加單個元素到數組末尾：

var arr = [1, 2, 3]
var a = arr.push(4) // arr = [1, 2, 3, 4], a = 4

添加多個元素到數組末尾：

var arr = [1, 2, 3]
var a = arr.push(4, 5) // arr = [1, 2, 3, 4, 5], a = 5

將另外一個數組裡的每一個元素依次添加到原數組末尾：

// 使用 Function.prototype.apply 方法
var arr = [1, 2, 3]
var a = [].push.apply(arr, [4, 5]) // arr = [1, 2, 3, 4, 5], a = 5

// 使用 ES2015 Spread Operator
var b = arr.push(...[6, 7]) // arr = [1, 2, 3, 4, 5, 6, 7], b = 7

Array.prototype.unshift

該方法可以在數組開頭添加元素，接受一個或者多個元素作為參數。該方法返回數組新的長度。

使用方式為：array.unshift(item1, item2, ...)

添加單個元素到數組開頭：

var arr = [1, 2, 3]
var a = arr.unshift(0) // arr = [0, 1, 2, 3], a = 4

添加多個元素到數組開頭：

var arr = [1, 2, 3]
var a = arr.unshift(4, 5) // arr = [4, 5, 1, 2, 3], a = 5

將另外一個數組裡的每一個元素依次添加到原數組開頭：

// 使用 Function.prototype.apply 方法
var arr = [1, 2, 3]
var a = [].unshift.apply(arr, [4, 5]) // arr = [4, 5, 1, 2, 3], a = 5

// 使用 ES2015 Spread Operator
var b = arr.unshift(...[6, 7]) // arr = [6, 7, 4, 5, 1, 2, 3], b = 7

Array.prototype.shift

該方法刪除數組的第一個元素，沒有參數，並返回被刪除的元素：

var arr = [1, 2, 3]
var a = arr.shift() // arr = [2, 3], a = 1

如果數組已經為空，則數組不會有任何變化，返回值為 undefined。

Array.prototype.pop

該方法刪除數組的最後一個元素，沒有參數，並返回被刪除的元素：

var arr = [1, 2, 3]
var a = arr.pop() // arr = [1, 2], a = 3

如果數組已經為空，則數組不會有任何變化，返回值為 undefined。

上面兩個方法一次只能刪除一個元素。

Array.prototype.splice

該方法可以在數組指定位置刪除零個或多個元素，並用參數列表中聲明的一個或多個值來替換那些被刪除的元素。該方法返回被刪除的元素組成的新數組，如果沒有刪除元素則返回一個空數組。

使用方式為：array.splice(start, deleteCount, item1, item2, ...)

• 參數 start 表示指定的位置，從 0 開始
• 參數 deleteCount 表示刪除元素的個數，為 0 表示不刪除，該參數是可選的，如果不傳，則 deleteCount = array.length - start
• 參數 item1, item2, ... 表示將要添加的元素

在指定位置刪除一個元素：

var arr = [1, 2, 3, 4, 5]
var a = arr.splice(2, 1) // arr = [1, 2, 4, 5], a = [3]

在指定位置刪除多個元素：

var arr = [1, 2, 3, 4, 5]
var a = arr.splice(2, 2) // arr = [1, 2, 5], a = [3, 4]

刪除指定位置後面所有的元素，不傳第二個參數：

var arr = [1, 2, 3, 4, 5]
var a = arr.splice(2) // arr = [1, 2], a = [3, 4, 5]

清空數組：

var arr = [1, 2, 3, 4, 5]
var a = arr.splice(0) // arr = [], a = [1, 2, 3, 4, 5]

在指定位置添加一個或者多個元素，第二個參數為 0：

var arr = [1, 2, 3]
var a = arr.splice(2, 0, 4, 5) // arr = [1, 2, 4, 5, 3], a = []

在指定位置刪除一個或者多個元素並添加一個或者多個元素：

var arr = [1, 2, 6, 7, 5]
var a = arr.splice(2, 2, 3, 4) // arr = [1, 2, 3, 4, 5], a = [6, 7]

上面例子等同於修改數組中 arr[2] 和 arr[3] 的值。

將另外一個數組裡的每一個元素依次插入到原數組的指定位置：

var arr = [1, 2, 5]
var arr2 = [3, 4]

// 使用 ES2015 Spread Operator
arr.splice(2, 0, ...arr2) // arr = [1, 2, 3, 4, 5]

// 使用 Function.prototype.apply 方法
;[].splice.apply(arr, [2, 0].concat(arr2)) // arr = [1, 2, 3, 4, 3, 4, 5]

Array.prototype.reverse

該方法顛倒數組中元素的順序，沒有參數，並返回原數組的引用：

var arr = [1, 2, 3]
var a = arr.reverse() // arr = [3, 2, 1], a === arr

Array.prototype.sort

該方法對數組進行排序，並返回原數組的引用。

按字元順序進行排序：

var arr = [10, 5, 50, 15, 1, 25]
var a = arr.sort() // arr = [1, 10, 15, 25, 5, 50], a === arr

按數字從小到大進行排序：

var arr = [10, 5, 50, 15, 1, 25]
arr.sort((a, b) => a - b) // arr = [1, 5, 10, 15, 25, 50]

按數字從大到小進行排序：

var arr = [10, 5, 50, 15, 1, 25]
arr.sort((a, b) => b - a) // arr = [50, 25, 15, 10, 5, 1]