吐槽Javascript系列二:数组中的splice和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 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

一个西瓜,被菜刀切成几块,这西瓜还是原来的西瓜吗?那一个数组,被你切了几下,那数组还是原来的数组吗?

    原文作者:前端
    原文地址: https://segmentfault.com/a/1190000018170710
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞