js 數(shù)組克隆方法 小結(jié)
更新時間:2010年03月20日 18:38:04 作者:
在JS中,對于對象類型的變量的引用是通過類似C之類的“指針”的方式來操作的,及如果多個變量引用同一個對象,則任意一個變量對對象的操作都會影響到其它的變量。
因此如果要創(chuàng)建一個與已經(jīng)存在的對象內(nèi)容相同的對象,不能通過簡單的賦值操作。這樣說的可能還是不太明白。
看下面的例子:
var a=[1,2,3,4]; var b=a;c=b; a.pop(); //移除最后一個元素 alert(b); //彈出1,2,3 alert(c); //彈出1,2,3
var a=[1,2,3,4]; var b=a;c=b; a.pop(); //移除最后一個元素 alert(b); //彈出1,2,3 alert(c); //彈出1,2,3
我們執(zhí)行上面的代碼發(fā)現(xiàn),在a的內(nèi)容做改變后,變量b和c的結(jié)果也改變了。
上面的情況也許不是我們所需要的,我們希望的是創(chuàng)建一個與原對象內(nèi)容一樣的“新”對象。這樣我們就需要通過一些克隆的辦法來實(shí)現(xiàn)。
JS里Array也是一種Object。這里我們主要總結(jié)一下Array的克隆方式,我們這里為Array原生對象擴(kuò)展一個clone方法。
1、最簡單的辦法,就是創(chuàng)建一個新數(shù)組,并遍歷數(shù)組逐項(xiàng)添加到新數(shù)組中。
Array.prototype.clone=function(){ var a=[]; for(var i=0,l=this.length;i<l;i++) a.push(this[i]); return a; }
Array.prototype.clone=function(){ var a=[]; for(var i=0,l=this.length;i<l;i++) a.push(this[i]); return a; }
這種實(shí)現(xiàn)方式是最容易想到也是最容易理解的,但是代碼有點(diǎn)復(fù)雜了,我們仔細(xì)研究Array的一些方法,其實(shí)還有一個很簡單的辦法。下面說一下其它的兩種辦法。
2、通過Array對象的slice方法。
slice方法是通過參數(shù)start和end的傳入值來返回數(shù)組中的一段,該方法不對原數(shù)組進(jìn)行操作。我們通過slice(0)可以使其返回所有項(xiàng)。
Array.prototype.clone=function(){ return this.slice(0); }
Array.prototype.clone=function(){ return this.slice(0); }
3、通過Array對象的concat方法。
concat方法是用來實(shí)現(xiàn)數(shù)組的合并的。通過和一個空函數(shù)的合并,即可實(shí)現(xiàn)我們的克隆功能。
Array.prototype.clone=function(){ return [].concat(this); } //或者 Array.prototype.clone=function(){ return this.concat(); }
Array.prototype.clone=function(){ return [].concat(this); } //或者 Array.prototype.clone=function(){ return this.concat(); }
如果發(fā)揮想象應(yīng)該還有其它的辦法,以上只是本人想到的兩種方法。
JavaScript 克隆數(shù)組最簡單的方法
JavaScript數(shù)組的快速克隆(slice()函數(shù))和數(shù)組的排序、亂序和搜索(sort()函數(shù))
看下面的例子:
復(fù)制代碼 代碼如下:
var a=[1,2,3,4]; var b=a;c=b; a.pop(); //移除最后一個元素 alert(b); //彈出1,2,3 alert(c); //彈出1,2,3
var a=[1,2,3,4]; var b=a;c=b; a.pop(); //移除最后一個元素 alert(b); //彈出1,2,3 alert(c); //彈出1,2,3
我們執(zhí)行上面的代碼發(fā)現(xiàn),在a的內(nèi)容做改變后,變量b和c的結(jié)果也改變了。
上面的情況也許不是我們所需要的,我們希望的是創(chuàng)建一個與原對象內(nèi)容一樣的“新”對象。這樣我們就需要通過一些克隆的辦法來實(shí)現(xiàn)。
JS里Array也是一種Object。這里我們主要總結(jié)一下Array的克隆方式,我們這里為Array原生對象擴(kuò)展一個clone方法。
1、最簡單的辦法,就是創(chuàng)建一個新數(shù)組,并遍歷數(shù)組逐項(xiàng)添加到新數(shù)組中。
復(fù)制代碼 代碼如下:
Array.prototype.clone=function(){ var a=[]; for(var i=0,l=this.length;i<l;i++) a.push(this[i]); return a; }
Array.prototype.clone=function(){ var a=[]; for(var i=0,l=this.length;i<l;i++) a.push(this[i]); return a; }
這種實(shí)現(xiàn)方式是最容易想到也是最容易理解的,但是代碼有點(diǎn)復(fù)雜了,我們仔細(xì)研究Array的一些方法,其實(shí)還有一個很簡單的辦法。下面說一下其它的兩種辦法。
2、通過Array對象的slice方法。
slice方法是通過參數(shù)start和end的傳入值來返回數(shù)組中的一段,該方法不對原數(shù)組進(jìn)行操作。我們通過slice(0)可以使其返回所有項(xiàng)。
復(fù)制代碼 代碼如下:
Array.prototype.clone=function(){ return this.slice(0); }
Array.prototype.clone=function(){ return this.slice(0); }
3、通過Array對象的concat方法。
concat方法是用來實(shí)現(xiàn)數(shù)組的合并的。通過和一個空函數(shù)的合并,即可實(shí)現(xiàn)我們的克隆功能。
復(fù)制代碼 代碼如下:
Array.prototype.clone=function(){ return [].concat(this); } //或者 Array.prototype.clone=function(){ return this.concat(); }
Array.prototype.clone=function(){ return [].concat(this); } //或者 Array.prototype.clone=function(){ return this.concat(); }
如果發(fā)揮想象應(yīng)該還有其它的辦法,以上只是本人想到的兩種方法。
JavaScript 克隆數(shù)組最簡單的方法
JavaScript數(shù)組的快速克隆(slice()函數(shù))和數(shù)組的排序、亂序和搜索(sort()函數(shù))
您可能感興趣的文章:
- JS對象的深度克隆方法示例
- JS對象深度克隆實(shí)例分析
- JS擴(kuò)展類,克隆對象與混合類實(shí)例分析
- JavaScript 深層克隆對象詳解及實(shí)例
- JavaScript 用cloneNode方法克隆節(jié)點(diǎn)的代碼
- javascript dom操作之cloneNode文本節(jié)點(diǎn)克隆使用技巧
- JavaScript 克隆數(shù)組最簡單的方法
- JavaScript數(shù)組的快速克隆(slice()函數(shù))和數(shù)組的排序、亂序和搜索(sort()函數(shù))
- javascript淺層克隆、深度克隆對比及實(shí)例解析
相關(guān)文章
JavaScript限定范圍拖拽及自定義滾動條應(yīng)用(3)
這篇文章主要介紹了JavaScript限定范圍拖拽及自定義滾動條應(yīng)用的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05JavaScript使用正則表達(dá)式獲取全部分組內(nèi)容的方法示例
這篇文章主要介紹了JavaScript使用正則表達(dá)式獲取全部分組內(nèi)容的方法,結(jié)合實(shí)例形式分析了javascript正則匹配的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法
這篇文章主要介紹了Bootstrap3 input輸入框插入glyphicon圖標(biāo)的方法的相關(guān)資料,需要的朋友可以參考下2016-05-05JavaScript如何讓select選擇框可輸入和可下拉選擇
我們知道一般select下拉框是只能選擇的,而有時我們會遇到下拉框中沒有要選擇的信息項(xiàng)或者下拉選項(xiàng)特別多時,需要允許用戶輸入想要的內(nèi)容,這篇文章主要給大家介紹了關(guān)于JavaScript如何讓select選擇框可輸入和可下拉選擇的相關(guān)資料,需要的朋友可以參考下2023-10-10js實(shí)現(xiàn)二級聯(lián)動簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)二級聯(lián)動簡單實(shí)例,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-01-01javascript typeof的用法與typeof運(yùn)算符介紹[詳細(xì)]
下面是對于typeof運(yùn)算符的詳細(xì)介紹跟typeof的一些用法,分析,學(xué)習(xí)typeof的朋友,看完了,這篇應(yīng)該能有所收獲。2008-10-10