JavaScript中數(shù)組slice和splice的對比小結(jié)
前言
今天重溫了一下Javascript,看到了數(shù)組的方法,其中有兩個(gè)比較相似的方法——splice和splice,看著很像,就是多了一個(gè)p,但是用法卻相當(dāng)不一樣。
在使用中,可以通過選擇一個(gè)具有強(qiáng)語義表達(dá)性的 API 來減少混淆的發(fā)生。
1、slice
slice是指定在一個(gè)數(shù)組中的元素創(chuàng)建一個(gè)新的數(shù)組,即原數(shù)組不會變
數(shù)組的 slice (ECMAScript 5.1 標(biāo)準(zhǔn) 15.4.4.10 節(jié))非常類似于字符串的 slice。根據(jù)規(guī)范,slice 需要兩個(gè)參數(shù),起點(diǎn)和終點(diǎn)。它會返回一個(gè)包含了從起點(diǎn)開始,到終點(diǎn)之前之間所有元素的新數(shù)組。
理解 slice 的功能并不是太難:
'abc'.slice(1,2) // "b" [14, 3, 77].slice(1, 2) // [3]
需要特別注意的是它并不會修改原數(shù)組。
下面的代碼段描述了這個(gè)行為,x 的值沒有變,y 則是被截取的部分。
var x = [14, 3, 77]; var y = x.slice(1, 2); console.log(x); // [14, 3, 77] console.log(y); // [3]
2、splice
splice是JS中數(shù)組功能最強(qiáng)大的方法,它能夠?qū)崿F(xiàn)對數(shù)組元素的刪除、插入、替換操作,返回值為被操作的值。
splice刪除:color.splice(1,2)
(刪除color中的1、2兩項(xiàng));
splice插入:color.splice(1,0,'brown','pink')
(在color鍵值為1的元素前插入兩個(gè)值);
splice替換:color.splice(1,2,'brown','pink')
(在color中替換1、2元素);
雖然 splice(15.4.4.12 節(jié))也需要(至少)兩個(gè)參數(shù),但它的意義則完全不同。
[14, 3, 77].slice(1, 2) // [3] [14, 3, 77].splice(1, 2) // [3, 77]
除此之外,splice 還會改變原數(shù)組。
不要太驚訝,這正是 splice 的本意。
var x = [14, 3, 77] var y = x.splice(1, 2) console.log(x) // [14] console.log(y) // [3, 77]
當(dāng)你編寫自己的模塊時(shí),選擇一個(gè)最不容易發(fā)生混淆的 API 非常重要。理論上,你的用戶不應(yīng)該總是通過閱讀文檔來判斷他們需要哪一個(gè)。那么我們應(yīng)該遵循哪種命名規(guī)范呢?
我最熟悉的規(guī)范(與我之前在 QT 上的經(jīng)驗(yàn)有關(guān))是正確地選擇動詞:現(xiàn)在時(shí)表示可能的修改行為,過去時(shí)則不會修改原對象,而是返回一個(gè)新的版本。如果可以的話,這兩種版本都要提供。
參考下面的例子:
var p = new Point(100, 75); p.translate(25, 25); console.log(p); // { x: 125, y: 100 } var q = new Point(200, 100); var s = q.translated(10, 50); console.log(q); // { x: 200, y: 100 } console.log(s); // { x: 210, y: 150 }
注意(在二維笛卡爾坐標(biāo)系中)移動位置的 translate()
和僅創(chuàng)建一個(gè)移動過的坐標(biāo)的 translated()
之間的區(qū)別。調(diào)用 translate 會修改點(diǎn) p 的值。然而,因?yàn)?translated()
不修改原對象,對象 q 沒有被修改,而只返回了一個(gè)新的拷貝 s。
總結(jié)
如果這個(gè)規(guī)范能夠非常一致地部署到你的應(yīng)用中,那么上面提到的那種混淆則會被最大化地減低。以上就是這篇文章的全部內(nèi)容了,希望能對大家的學(xué)習(xí)或者工作帶來一定的幫助。
相關(guān)文章
用javascript替換URL中的參數(shù)值示例代碼
本篇文章主要是對用javascript替換URL中的參數(shù)值示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01使用Javascript監(jiān)控前端相關(guān)數(shù)據(jù)的代碼
本篇文章詳細(xì)的介紹了使用Javascript監(jiān)控前端相關(guān)數(shù)據(jù),可以及時(shí)的監(jiān)控前端的錯(cuò)誤,加載時(shí)間等,有需要的可以了解一下。2016-10-10基于JavaScript實(shí)現(xiàn)百度搜索框效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)百度搜索框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07詳解javascript new的運(yùn)行機(jī)制
這篇文章主要介紹了javascript new的運(yùn)行機(jī)制的相關(guān)資料,需要的朋友可以參考下2016-01-01