JavaScript中splice與slice的區(qū)別
splice與slice是數(shù)組中的兩個(gè)常用方法,但是很多初學(xué)者很容易將二者混淆。
slice的操作不影響原數(shù)組。會(huì)返回所選擇的元素。
splice往數(shù)組中指定位置添加或刪除元素,會(huì)影響原數(shù)組。返回被刪除的元素。
slice()
可從已有的數(shù)組中返回選定的元素。
語(yǔ)法
arrayObject.slice(start,end)
start 必需。規(guī)定從何處開始選取。如果是負(fù)數(shù),那么它規(guī)定從數(shù)組尾部開始算起的位置。也就是說(shuō),-1 指最后一個(gè)元素,-2 指倒數(shù)第二個(gè)元素,以此類推。
end 可選。規(guī)定從何處結(jié)束選取。該參數(shù)是數(shù)組片斷結(jié)束處的數(shù)組下標(biāo)。如果沒有指定該參數(shù),那么切分的數(shù)組包含從 start 到數(shù)組結(jié)束的所有元素。如果這個(gè)參數(shù)是負(fù)數(shù),那么它規(guī)定的是從數(shù)組尾部開始算起的元素。
var arr = [1,2,3,4,5,6] arr.slice(2, 3) //返回[3]
splice()
splice() 方法向/從數(shù)組中添加/刪除項(xiàng)目,然后返回被刪除的項(xiàng)目。
注釋:該方法改變?cè)紨?shù)組。arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整數(shù),規(guī)定添加/刪除項(xiàng)目的位置,使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。
howmany 必需。要?jiǎng)h除的項(xiàng)目數(shù)量。如果設(shè)置為 0,則不會(huì)刪除項(xiàng)目。
item1, ..., itemX 可選。向數(shù)組添加的新項(xiàng)目。
如,向數(shù)組的起始位置插一個(gè)新的元素 -1
var arr = [1,2,3,4,5,6] arr.splice(0,0, -1) //返回[],第二個(gè)參數(shù)為0,即不刪除任何元素 console.log(arr) > [-1, 1, 2, 3, 4, 5, 6]
用slice復(fù)制數(shù)組
使用 slice(0) 可以快速?gòu)?fù)制并生成 一個(gè)新的數(shù)組,不過(guò)數(shù)組是新的,里面的元素還是原來(lái)的引用,比如:
var o = [1, 2] var arr = [ 3, 4, o ] var clone = arr.slice(0) console.log(clone) > [3, 4, Array[2]]
用concat復(fù)制數(shù)組
Array.concat 數(shù)組拼接函數(shù)也可以用來(lái)復(fù)制數(shù)組,比如:
var o = [1, 2] var arr = [ 3, 4, o ] var clone = arr.concat() console.log(clone) > [3, 4, Array[2]]
不過(guò) slice和concat 生成的數(shù)組是新的,但里面的元素還是原來(lái)的引用,比如:
clone[2].push(3) console.log(o) > [1, 2, 3]
用JSON parse/ strinigfy 進(jìn)行深度復(fù)制
可以使用 JSON.parse(JSON.stringify(arr)) 對(duì)對(duì)象或數(shù)組進(jìn)行快速深度復(fù)制,此種方法無(wú)法復(fù)制 function 等無(wú)法序列化的對(duì)象,比如:
var o = [1, 2] var arr = [ 3, 4, o ] var clone = JSON.parse(JSON.stringify(arr)) console.log(clone) > [3, 4, Array[2]] clone[2].push(3) console.log(o) > [1, 2] //o元素沒有變化
參考:
//m.fzitv.net/w3school/jsref/jsref_slice_array.htm
//m.fzitv.net/w3school/jsref/jsref_splice.htm
相關(guān)文章
JavaScript中Number.NEGATIVE_INFINITY值的使用詳解
這篇文章主要介紹了JavaScript中Number.NEGATIVE_INFINITY值的使用,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
簡(jiǎn)述JavaScript中正則表達(dá)式的使用方法
這篇文章主要介紹了JavaScript中正則表達(dá)式的使用方法,正則表達(dá)式是JS進(jìn)階學(xué)習(xí)中的重要知識(shí),本文簡(jiǎn)述了JS對(duì)正則表達(dá)式的支持情況,需要的朋友可以參考下2015-06-06
JavaScript中__proto__與prototype的關(guān)系深入理解
本文將討論下對(duì)象的內(nèi)部原型(__proto__)和構(gòu)造器的原型(prototype)的關(guān)系,需要了解更多的朋友可以參考下2012-12-12
js setTimeout 常見問(wèn)題小結(jié)
主要包括this指向問(wèn)題、向setTimeout傳入?yún)?shù)等相關(guān)問(wèn)題,下面與大家分享下以上問(wèn)題的解決方法,感興趣的朋友可以參考下2013-08-08
JavaScript中join()方法的使用簡(jiǎn)介
這篇文章主要介紹了JavaScript中join()方法的使用簡(jiǎn)介,是JS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-06-06
JavaScript高級(jí)程序設(shè)計(jì)(第3版)學(xué)習(xí)筆記2 js基礎(chǔ)語(yǔ)法
這一篇復(fù)習(xí)一下ECMAScript規(guī)范中的基礎(chǔ)語(yǔ)法,英文好的朋友可以直接閱讀官方文檔。JavaScript本質(zhì)上也是一種類C語(yǔ)言,熟悉C語(yǔ)言的朋友,可以非常輕松的閱讀這篇文章,甚至都可以跳過(guò),不過(guò)建議你最好還是看一看,在介紹的同時(shí),我可能會(huì)引用一些自認(rèn)為不易理解且比較流行的用法。2012-10-10

