快捷導(dǎo)航

Javascript和jQuery的深淺拷貝詳解

更新時(shí)間：2022年02月22日 15:35:37 作者：王昭沒(méi)有君啊

這篇文章主要為大家詳細(xì)介紹了Javascript和jQuery的深淺拷貝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

JS的淺拷貝

直接復(fù)制拷貝的是數(shù)組/對(duì)象的內(nèi)存地址，本質(zhì)上是一個(gè)引用數(shù)據(jù)類(lèi)型，所有的變量存儲(chǔ)的是相同的內(nèi)存地址，操作的是同一個(gè)存儲(chǔ)空間，任意一個(gè)變量的操作，其他變量都會(huì)受影響。如下所示：

const arr1 = ['北京', '上海', '廣州', '深圳', '武漢'];
const arr2 = arr1;
console.log(arr1);
console.log(arr2);

變量arr1中存儲(chǔ)的是數(shù)組的內(nèi)存地址，淺拷貝是將變量arr1中存儲(chǔ)的數(shù)組的內(nèi)存地址賦值給變量arr2存儲(chǔ)，也就是變量arr2和變量arr1存儲(chǔ)的是相同的內(nèi)存地址，通過(guò)其中一個(gè)變量操作數(shù)組，另一個(gè)變量也受影響，將arr1里的北京改為天津，那么arr2里的北京也就變成了天津。

JS的深拷貝

復(fù)制拷貝的是數(shù)組/對(duì)象存儲(chǔ)的數(shù)值數(shù)據(jù)，本質(zhì)上執(zhí)行幾次深拷貝就有幾個(gè)獨(dú)立的引用數(shù)據(jù)類(lèi)型，存儲(chǔ)的是不同的內(nèi)存地址，操作的是不同的存儲(chǔ)空間，一個(gè)變量操作引用數(shù)據(jù)類(lèi)型對(duì)其他變量沒(méi)有影響，如下所示：

const arr1 = ['北京', '上海', '廣州', '深圳', '武漢'];
//創(chuàng)建一個(gè)新的引用數(shù)據(jù)類(lèi)型
const arr3 = [];
//循環(huán)遍歷arr1將arr1中的存儲(chǔ)獲取之后，存儲(chǔ)到arr3中
arr1.forEach(item => {
   arr3.push( item );
})

arr3是新的內(nèi)存地址，只是存儲(chǔ)的數(shù)據(jù)數(shù)值和arr1相同，arr1的操作是arr1內(nèi)存地址對(duì)應(yīng)的存儲(chǔ)空間，和arr3的存儲(chǔ)空間沒(méi)有關(guān)系，也沒(méi)有影響。arr1里的上海改為成都，arr3里面的數(shù)值不發(fā)生任何變化，所以，修改arr3里的數(shù)據(jù)，arr1里也同樣沒(méi)有變化。

jQuery的深淺拷貝

jQuery中的深淺拷貝比較特殊

1、jQuery中沒(méi)有封裝傳統(tǒng)意義上的淺拷貝的函數(shù)

2、jQuery中封裝的$.extend()默認(rèn)執(zhí)行的就是傳統(tǒng)意義上的深拷貝

3、jQuery中的所謂的深淺拷貝，指的是一維數(shù)據(jù) 深拷貝，二維數(shù)據(jù) 淺拷貝

4、jQuery中深淺拷貝的語(yǔ)法形式

const 變量 = 數(shù)組/對(duì)象;
$.extend(變量 , 原始數(shù)組/對(duì)象);
//淺拷貝，一維數(shù)據(jù) 深拷貝，多維數(shù)據(jù)  淺拷貝
$.extend(true, 變量, 原始數(shù)組/對(duì)象);
//深拷貝，一維數(shù)據(jù) 多維數(shù)據(jù) 都是深拷貝

如下所示：

//原始數(shù)組
const arr1 = ['北京' , '上海' , '廣州' , '深圳' , '武漢' , [100,200,300,400] , {name:'王昭沒(méi)有君啊' , age:22 , sex:'男'} ];
//jQuery的淺拷貝
//創(chuàng)建一個(gè)arr2
const arr2 = [];
//將arr1中的數(shù)據(jù)按照jQuery的淺拷貝語(yǔ)法復(fù)制到arr2中
//執(zhí)行的是jQuery的淺拷貝
$.extend( arr2 , arr1 );
//創(chuàng)建一個(gè)arr2
const arr3 = [];
//將arr1中的數(shù)據(jù)按照jQuery的深拷貝語(yǔ)法復(fù)制到arr3中
//執(zhí)行的是jQuery的深拷貝
$.extend(true, arr3, arr1);