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

moddx發表於2019-02-17

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

談起這兩個方法,新手不蒙,我是不信!正如吐槽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 colors = [`red`, `green`, `blue`, `orange`]
let removed = colors.splice(2, 1, `yellow`, )
console.log(removed) // [ `blue` ]
console.log(colors) // [ `red`, `green`, `yellow`, `orange` ]

上面程式碼中,splice接收了三個引數,第一個參數列示要刪除的第一項的位置,第二個參數列示要刪除的項數,第三個參數列示要新增的項。
原來,它的替換功能實際上是通過刪除和新增來完成的。

說完splice,接下來說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

我曾經一直困惑陣列中的刪除方法,當知道刪除這項偉大的任務竟然交給了splice,我心裡是失望的。
不應該是del或者remove才像話嗎?刪除的功能它佔了也就算了,新增的功能它也佔了!它既能新增,也能刪除,還能拼接,那它為什麼沒有七十二變?

吐槽slice

一個西瓜,被菜刀切成幾塊,這西瓜還是原來的西瓜嗎?那一個陣列,被你切了幾下,那陣列還是原來的陣列嗎?

相關文章