JS的深淺復制詳細
1、淺復制的意思
淺復制是僅僅對數(shù)據(jù)存放在棧內(nèi)的引用的復制，沒有復制引用指向堆內(nèi)的內(nèi)容。多個數(shù)據(jù)的淺復制，這復制多個引用，這多個引用共同指向堆內(nèi)的同一個內(nèi)容。當一個淺復制數(shù)據(jù)做出修改，即堆內(nèi)的引用指向的內(nèi)容發(fā)生修改，這時，其他通過引用指向這里的數(shù)據(jù)也會隨著改變。
let obj = {
a:1,
b:2,
c:{
c1:10,
c2:20
}
}
let objA = obj;
objA.a = 'a';
console.log(obj.a); // 'a'
console.log(objA.a); // 'a'
2、深復制的意思
深復制是指連同堆的內(nèi)容一塊復制，生成一個新的對象。多個深復制將是多個不同的對象，也就有不同的引用，也就指向不同的堆內(nèi)容。
3、使用深復制的原由
在平常開發(fā)中，有時會有數(shù)據(jù)的傳遞與接收，當拿到傳過來的數(shù)據(jù)后，難免需要對數(shù)據(jù)進行加工和改造，為了不破壞原有數(shù)據(jù)結(jié)構(gòu)，這時就可以使用深復制拷貝數(shù)據(jù)，然后處理生成的新的數(shù)據(jù)。深復制也可以防止修改多個引用后引用混亂的問題，減少BUG的產(chǎn)生機會。
4、可實現(xiàn)深復制的幾種方法
實現(xiàn)方式一：JSON的序列化與反序列化
let obj = {
a:1,
b:2,
c:{
c1:10,
c2:20
}
}
let objA = JSON.parse(JSON.stringify(obj));//JSON的序列化與反序列化
objA.a = 'a';
console.log(obj.a); // 1
console.log(objA.a); // 'a'
雖然JSON的序列化與反序列化可以實現(xiàn)深復制，但有幾個缺點需要注意：
date日期對象被轉(zhuǎn)成日期日期字符串- 沒法訪問到原型
- 復制不了
undefined的屬性 NAN和無窮被轉(zhuǎn)為NULL
let d1 = new Date();
let obj = {
d1,
d2: undefined,
d3:NaN
}
let objD = JSON.parse(JSON.stringify(obj));
console.log(obj)
console.log(objD)
實現(xiàn)方式二：Object.assign()
let obj = {
a:1,
b:2,
c:{
c1:10,
c2:20
}
}
let objA = Object.assign(obj);
objA.a = 'a';
console.log(obj.a); // 1
console.log(objA.a); // 'a'
雖然Object.assign()可以實現(xiàn)深復制，但對于更深層次的對象引用也是僅僅淺復制。
let obj = {
a:1,
b:2,
c:{
c1:10,
c2:20
}
}
let objA = Object.assign(obj);
objA.c.c1 = 'c1'; //Object.assign()僅僅是一層深復制。
console.log(obj.c.c1); // 'c1'
console.log(objA.c.c1); // 'c1'
實現(xiàn)方式三：擴展運算符
let obj = {
a:1,
b:2,
c:{
c1:10,
c2:20
}
}
let objA = {...obj};;
objA.a = 'a';
console.log(obj.a); // 1
console.log(objA.a); // 'a'
雖然擴展運算符" … "可以實現(xiàn)深復制，但對于更深層次的對象引用也是僅僅淺復制。
let obj = {
a:1,
b:2,
c:{
c1:10,
c2:20
}
}
let objA = {...obj};
objA.c.c1 = 'c1'; //擴展運算符"..."同Object.assign()一樣，僅僅是一層深復制，不能多層深復制。
console.log(obj.c.c1); // 'c1'
console.log(objA.c.c1); // 'c1'
實現(xiàn)方式四：使用遞歸
想要實現(xiàn)深復制，且實現(xiàn)多層深復制則可以使用遞歸循環(huán)復制。
let obj = {
a:1,
b:2,
c:{
c1:10,
c2:20
}
}
const ReCopy = function (paramter) {
let target = null;
let isObject = paramter.constructor === Object;
let isArray = paramter.constructor === Array;
if (isObject || isArray) {
target = Array.isArray(paramter) ? [] : {};
for (let i in paramter) {
target[i] = ReCopy(paramter[i]);
}
} else {
target = paramter;
}
return target;
}
let objA = ReCopy(obj);
objA.c.c1 = 'c1';
console.log(obj.c.c1); // 10
console.log(objA.c.c1); // 'c1'
5、ladash深拷貝
lodash深復制是更專業(yè)的深復制方式。
安裝lodash
先初始化，生成package.json文件，然后使用一下命令安裝。
npm i -S lodash
引入lodash
var _ = require('lodash');
使用lodash
let obj = {
a:1,
b:2,
c:{
c1:10,
c2:20
}
}
let objA = _.cloneDeep(obj);
objA.c.c1 = 'c1';
console.log(obj.c.c1); // 10
console.log(objA.c.c1); // 'c1'
到此這篇關(guān)于JS的深淺復制詳細的文章就介紹到這了,更多相關(guān)JS的深淺復制內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了微信小程序WXSS樣式文件教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步早日升職加薪2022-04-04
這篇文章主要介紹了微信小程序 template模板詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要介紹JS 基本概念，對于初學者來說，Javascript 乍一看似乎很容易，因為它的類似于 C 的語法，但不管它的運行方式如何，對語言 (ESNext) 及其框架所做的不斷變化可能會讓初學者不知所措。下面我們就來看JS 初學者怎么入門吧2021-10-10
微信小程序 在Chrome瀏覽器上運行以及WebStorm的使用
這篇文章主要介紹了微信小程序 在Chrome瀏覽器上運行以及WebStorm的使用的相關(guān)資料,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了JS實現(xiàn)一個可以當鏡子照的?Button的方法示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-03-03
這篇文章主要介紹了微信小程序 swiper組件詳解及實例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了手把手教你從0搭建前端腳手架詳解,腳手架就是在啟動的時候詢問一些簡單的問題，并且通過用戶回答的結(jié)果去渲染對應(yīng)的模板文件,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了 微信小程序 Buffer緩沖區(qū)的詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
Javascript中除了基本數(shù)據(jù)（Undefined、Null、Boolean、Number、String），其他都是對象（Object）2012-11-11
這篇文章主要為大家介紹了javascript進階篇深拷貝實現(xiàn)的四種方式詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07