js拷貝的三種方式對比(深拷貝、淺拷貝、遞歸拷貝)
更新時間：2025年09月15日 09:45:23 作者：影子信息
在JavaScript編程中,拷貝是一個常見的操作,而區(qū)分深拷貝和淺拷貝對于理解程序行為和預(yù)測程序結(jié)果至關(guān)重要,這篇文章主要介紹了js拷貝的三種方式對比,分別是深拷貝、淺拷貝、遞歸拷貝,需要的朋友可以參考下
背景：
拷貝就是復(fù)制，拷貝的是javascript對象。
深拷貝是對象里面嵌套對象，全部拷貝；淺拷貝只拷貝一層，不會全部拷貝。
拷貝的三種方式對比：
(一)、JSON.parse(JSON.stringify(obj))
理論知識：
let newObj = JSON.parse(JSON.stringify(obj))
特點:
能實現(xiàn)深拷貝，不能拷貝的數(shù)據(jù)類型為的Function函數(shù)、undefined
let obj = {
name: "Aj",
age: 18,
num: undefined,
say: function () {
console.log("say函數(shù)>>>");
},
arr: ["數(shù)組1", "數(shù)組2"],
objOption: {op01:'jack',op02:2022},
};
let newObj = JSON.parse(JSON.stringify(obj))
console.log("obj>>>", obj);
console.log("newObj>>>", newObj);
newObj.age = 24;
newObj.objOption.op02=2023
console.log("obj>>>", obj);
console.log("newObj>>>", newObj);代碼控制臺：
(二)、擴展運算符…obj <=> Object.assign(obj)
理論知識：
特點：
不能深拷貝，即只能拷貝一層,如下圖【淺拷貝】；
所有數(shù)據(jù)類型都能拷貝。
let obj = {
name: "Aj",
age: 18,
num: undefined,
say: function () {
console.log("say函數(shù)>>>");
},
arr: ["數(shù)組1", "數(shù)組2"],
objOption: {op01:'jack',op02:2022},
};
let newObj = {...obj}
console.log("obj>>>", obj);
console.log("newObj>>>", newObj);
newObj.age = 24;
newObj.objOption.op02=2023
console.log("obj>>>", obj);
console.log("newObj>>>", newObj);代碼控制臺：
(三)、遞歸拷貝
背景：
深拷貝和淺拷貝有各自的優(yōu)點和缺點，所以考慮把二者的優(yōu)點結(jié)合起來。
解決思路：
1. 如果對象屬性值沒有對象，只有一層,使用展開運算符{…obj}
2. 如果對象數(shù)據(jù)類型不是Function也不是數(shù)據(jù)值為undefined,
使用JSON.parse(JSON.stringify(obj))
4. 否則使用遞歸
代碼封裝：
/**
* 深拷貝-遞歸實現(xiàn)
* @param {*} data
* @returns
*/
const cloneDeep = (data) => {
const newData = Array.isArray(data) ? [] : {};
for (let key in data) {
if (data[key] && typeof data[key] === "object") {
newData[key] = cloneDeep(data[key]);
} else {
newData[key] = data[key];
}
}
return newData;
};
/**
* 拷貝對象 優(yōu)化方案
* @param {*} obj 原對象
* @param {*} cloneOjb 返回拷貝對象
*/
const cloneDeepObj = (obj) => {
if (obj === undefined) {
throw new TypeError("param is not undefined");
}
//判斷拷貝對象只有一層及屬性值都不是對象,使用Object.assign()
if (!isObjectValue(obj)) {
return { ...obj };
}
//判斷類型,如果不是Function或undefined使用JSON方式
if (!isFunctionOrUndefined(obj)) {
return JSON.parse(JSON.stringify(obj));
}
return cloneDeep(obj);
};
/**
* 遞歸判斷數(shù)據(jù)類型
* Function或undefined返回為true
*/
const isFunctionOrUndefined = (data) => {
for (let key in data) {
if (data[key] === undefined) {
return true;
} else if (
data[key] &&
Object.prototype.toString.call(data[key]) === "[object Function]"
) {
return true; //Function
} else if (data[key] && typeof data[key] === "object") {
isFunctionOrUndefined(data[key]);
}
}
};
/**
* 判斷對象屬性值是否有對象
* @param {} data
* @returns
*/
const isObjectValue = (data) => {
for (let key in data) {
if (data[key] && typeof data[key] === "object") {
if (
Object.prototype.toString.call(data[key]) !== "[object Function]"
) {
return true;
}
}
}
};
調(diào)用封裝代碼，示例如下：
const testCloneDeepObj = () => {
const obj = {
name: "jack",
age: 18,
hobby: { swiming: "游泳" },
arr: [{ score: 98 }],
say: function () {
console.log(this.name);
},
number: undefined,
};
const cloneObj = cloneDeepObj(obj);
cloneObj.name = "rose";
cloneObj.age = 20;
cloneObj.hobby.swiming = "不會游泳";
cloneObj.arr[0].score = 100;
console.log("obj :", obj, "\n cloneObj :", cloneObj);
cloneObj.say();
obj.say();
};
testCloneDeepObj();代碼控制臺：
附：使用場景
無論是淺拷貝還是深拷貝，一般都用于操作Object 或 Array之類的復(fù)合類型。
1、例如：
比如：想對某個數(shù)組 或 對象的值進(jìn)行修改，但是又想保留原來數(shù)組 或 對象的值不被修改！
此時：就可以用深拷貝來創(chuàng)建一個新的數(shù)組 或 對象，從而達(dá)到操作(修改)新的數(shù)組 或 對象時，保留原來數(shù)組 或 對象。
2、擴展：
在JS中還有一些原生封裝好的淺拷貝方法：
如數(shù)組方法：concat()，filter()，slice()，map()等。
它們在修改數(shù)組時，不會修改原來的數(shù)組，而是返回一個新的數(shù)組。
總結(jié)
到此這篇關(guān)于js深拷貝、淺拷貝、遞歸拷貝的文章就介紹到這了,更多相關(guān)js深拷貝、淺拷貝、遞歸拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript隨機位置鼠標(biāo)點擊檢測功能的實現(xiàn)方案
在JavaScript中獲取光標(biāo)位置通常指的是獲取鼠標(biāo)光標(biāo)在頁面上的坐標(biāo),或者是在文本框(input、textarea)中獲取光標(biāo)(插入點)的位置,這篇文章主要介紹了JavaScript隨機位置鼠標(biāo)點擊檢測功能的實現(xiàn)方案,需要的朋友可以參考下2025-09-09
arrayToJson將數(shù)組轉(zhuǎn)化為json格式的js代碼
arrayToJson將數(shù)組轉(zhuǎn)化為json格式的js代碼，需要的朋友可以參考下。2010-10-10
JS不同運算符下隱式類型轉(zhuǎn)換的實現(xiàn)示例
隱式轉(zhuǎn)換就是自動轉(zhuǎn)換,通常發(fā)生在一些數(shù)學(xué)運算中,本文就來介紹一下JS不同運算符下隱式類型轉(zhuǎn)換的實現(xiàn)示例,具有一定的參考價值,感興趣的可以了解一下2023-12-12
本文給大家分享的這段代碼并非是Bootstrap的遮罩，只是簡單版的遮罩效果，對bootstrap modal 遮罩效果感興趣的朋友可以參考下本文2016-11-11
在一些傳統(tǒng)的小型WEB應(yīng)用開發(fā)過程中，JavaScript通常只是拿來做表單驗證而以，所以你很少會遇到因為JavaScript事件冒泡而影響功能的實現(xiàn)情況，又或者事件冒泡對最終實現(xiàn)效果影響不大，可忽略。2010-01-01
這篇文章主要介紹了Javascript操作select控件代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-02-02
Uploadify是JQuery的一個上傳插件，實現(xiàn)的效果非常不錯，帶進(jìn)度顯示。接下來通過本文給大家介紹Uploadify上傳文件方法，涉及到Uploadify在Aspnet中的使用相關(guān)知識，本文介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友一起學(xué)習(xí)吧2016-03-03
jquery實現(xiàn)文本框textarea自適應(yīng)高度
這篇文章主要介紹了jquery實現(xiàn)文本框textarea自適應(yīng)高度的相關(guān)資料,需要的朋友可以參考下2016-03-03
JavaScript去掉空格的方法集合，腳本之家以前發(fā)布過很多的去除空格的代碼，這個更多更全面。2010-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡易ATM功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10