吐槽Javascript系列二：陣列中的splice和slice方法

摘要： 戰鬥英雄你當，漂亮媳婦兒你娶，怎麼啥好事都被你給佔了——《激情燃燒的歲月》 談起這兩個方法，新手不蒙，我是不信！正如吐槽Javascript系列一：slice()、substr()和 substring() 中提到的，字串中也有一個slice方法，極易混淆！ ...

戰鬥英雄你當，漂亮媳婦兒你娶，怎麼啥好事都被你給佔了——《激情燃燒的歲月》

談起這兩個方法，新手不蒙，我是不信！正如吐槽Javascript系列一：slice()、substr()和 substring() 中提到的，字串中也有一個slice方法，極易混淆！

但其實呢，在陣列中，他們還是很好區分的。

splice

splice，譯為拼接，它的功能非常強大，能夠刪除，新增，修改原陣列，功能三合一哦，我們先來看它的刪除功能：

// 刪除
let colors = ['red', 'green', 'blue']
let removed = colors.splice(0, 1)
console.log(removed) // [ 'red' ]
console.log(colors) // [ 'green', 'blue' ]

上面程式碼中，splice接收了二個引數，第一個引數表示要刪除的第一項的位置，第二個引數表示要刪除的項數。

我們再來看看它的新增功能：

// 新增
let colors = ['red', 'green', 'blue']
let removed = colors.splice(1, 0, 'yellow', 'orange')
console.log(removed) // []
console.log(colors) // [ 'red', 'yellow', 'orange', 'green', 'blue' ]

上面程式碼中，splice接收了四個引數，第一個引數表示要刪除的第一項的位置，第二個引數表示要刪除的項數，從第三個引數開始，表示要新增的項。

我們再來看看它的替換功能：

// 替換
let arr = ['red', 'green', 'blue', 'yellow']
let arr1 = arr.slice(1)
let arr2 = arr.slice(1, 2)

console.log(arr1) // [ 'green', 'blue', 'yellow' ]
console.log(arr2) // [ 'green' ]
console.log(arr) // [ 'red', 'green', 'blue', 'yellow' ]

上面程式碼中，splice接收了三個引數，第一個引數表示要刪除的第一項的位置，第二個引數表示要刪除的項數，第三個引數表示要新增的項。

原來，它的替換功能實際上是通過刪除和新增來完成的。

說完splice，接下來說slice。

slice

slice，譯為切開，我們來看例子：

// slice
let arr = ['red', 'green', 'blue', 'yellow']
let arr1 = arr.slice(1)
let arr2 = arr.slice(1, 2)

console.log(arr1) // [ 'green', 'blue', 'yellow' ]
console.log(arr2) // [ 'green' ]
console.log(arr) // [ 'red', 'green', 'blue', 'yellow' ]

slice接受一或兩個引數，即要返回項的起始和結束位置。在只有一個引數的情況下，slice()方法返回從該引數指定位置開始到當前陣列末尾的所有項。它並不改變原陣列。

吐槽

我曾經一直困惑陣列中的刪除方法，當知道刪除這項偉大的任務竟然交給了splice，我心裡是失望的。

不應該是del或者remove才像話嗎？刪除的功能它佔了也就算了，新增的功能它也佔了！它既能新增，也能刪除，還能拼接，那它為什麼沒有七十二變？