js里面有一個數(shù)據(jù)類型為object(如json和數(shù)組),它創(chuàng)建的是一塊內(nèi)存區(qū)域且叁,存放的是一個地址都哭,所以當(dāng)你直接將一個對象=另一個對象時,會發(fā)生引用谴古。而深拷貝和淺拷貝的區(qū)別是深拷貝不會發(fā)生引用质涛。
最最簡單的淺拷貝稠歉,適用于json和數(shù)組的方法是借助JSON全局對象的parse和stringify來實(shí)現(xiàn)
function jsonClone(obj) {
return JSON.parse(JSON.stringify(obj));
}
var clone = jsonClone({ a:1 });
就數(shù)組而言還有一些其他的方法:
1.Array.from() 方法從一個ArrayLike或Iterable對象中創(chuàng)建一個新的數(shù)組實(shí)例掰担。這是一種深拷貝的方法
備注:所謂 ArrayLike 對象指具有數(shù)組某些行為的對象,表現(xiàn)出來的特征就是具有 length 屬性怒炸,但是這一類對象不能調(diào)用數(shù)組所具有的方法(push/forEach/map之類)带饱。最常見的有兩種:DOM中的 NodeList 和函數(shù)中的 arguments 。
在平時開發(fā)中經(jīng)常遇到會遇到這樣的情形阅羹,譬如將ArrayLike轉(zhuǎn)化為數(shù)組從而用使用數(shù)組的方法勺疼,這時我們可以利用Array.from()
var args = Array.from(arguments);
var imgs = Array.from(document.querySelectorAll('img'));
在我之前的博客中還遇到了這樣的情形,就是創(chuàng)建0-99的連續(xù)數(shù)組捏鱼,你會發(fā)現(xiàn)new Array(100)在谷歌下顯示的是[undefined × 100]执庐,而且此時你是不能使用數(shù)組的方法,原因很簡單导梆,這時其實(shí)只有長度,故而不能使用map等方法轨淌,當(dāng)時我的解決辦法是fill(1)之后再使用map迂烁,這里其實(shí)有更簡單的辦法
var arr = Array.from({length:100}).map((item,index) => index);
備注:這個方法的效率很低,反而for循環(huán)一個一個寫效率更高
2.copyWithin()方法
這是一種淺拷貝的方法递鹉,會發(fā)生引用盟步,看如下案例
var a=[1,2] //a為[1,2]
var b=a.copyWithin(0) //b為[1,2]
b[2]=3 //此時b為[1,2,3]
console.log(a) //a為[1,2,3]
3.slice
slice方法之前用了很多,大多知道的是創(chuàng)建一個新的數(shù)組躏结,但不知道的是它其實(shí)一種淺拷貝却盘。
對于字符串、數(shù)字及布爾值來說媳拴,slice會拷貝這些值到新的數(shù)組里黄橘。在別的數(shù)組里修改這些字符串或數(shù)字或是布爾值,將不會影響另一個數(shù)組屈溉。但如果該元素是對象旬陡,是會發(fā)生引用