js拷貝的三種方式對比(深拷貝、淺拷貝、遞歸拷貝)
更新時(shí)間：2025年09月15日 09:45:23 作者：影子信息
在JavaScript編程中,拷貝是一個(gè)常見的操作,而區(qū)分深拷貝和淺拷貝對于理解程序行為和預(yù)測程序結(jié)果至關(guān)重要,這篇文章主要介紹了js拷貝的三種方式對比,分別是深拷貝、淺拷貝、遞歸拷貝,需要的朋友可以參考下
背景：
拷貝就是復(fù)制，拷貝的是javascript對象。
深拷貝是對象里面嵌套對象，全部拷貝；淺拷貝只拷貝一層，不會(huì)全部拷貝。
拷貝的三種方式對比：
(一)、JSON.parse(JSON.stringify(obj))
理論知識(shí)：
let newObj = JSON.parse(JSON.stringify(obj))
特點(diǎn):
能實(shí)現(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);代碼控制臺(tái)：
(二)、擴(kuò)展運(yùn)算符…obj <=> Object.assign(obj)
理論知識(shí)：
特點(diǎn)：
不能深拷貝，即只能拷貝一層,如下圖【淺拷貝】；
所有數(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);代碼控制臺(tái)：
(三)、遞歸拷貝
背景：
深拷貝和淺拷貝有各自的優(yōu)點(diǎn)和缺點(diǎn)，所以考慮把二者的優(yōu)點(diǎn)結(jié)合起來。
解決思路：
1. 如果對象屬性值沒有對象，只有一層,使用展開運(yùn)算符{…obj}
2. 如果對象數(shù)據(jù)類型不是Function也不是數(shù)據(jù)值為undefined,
使用JSON.parse(JSON.stringify(obj))
4. 否則使用遞歸
代碼封裝：
/**
* 深拷貝-遞歸實(shí)現(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 = "不會(huì)游泳";
cloneObj.arr[0].score = 100;
console.log("obj :", obj, "\n cloneObj :", cloneObj);
cloneObj.say();
obj.say();
};
testCloneDeepObj();代碼控制臺(tái)：
附：使用場景
無論是淺拷貝還是深拷貝，一般都用于操作Object 或 Array之類的復(fù)合類型。
1、例如：
比如：想對某個(gè)數(shù)組 或 對象的值進(jìn)行修改，但是又想保留原來數(shù)組 或 對象的值不被修改！
此時(shí)：就可以用深拷貝來創(chuàng)建一個(gè)新的數(shù)組 或 對象，從而達(dá)到操作(修改)新的數(shù)組 或 對象時(shí)，保留原來數(shù)組 或 對象。
2、擴(kuò)展：
在JS中還有一些原生封裝好的淺拷貝方法：
如數(shù)組方法：concat()，filter()，slice()，map()等。
它們在修改數(shù)組時(shí)，不會(huì)修改原來的數(shù)組，而是返回一個(gè)新的數(shù)組。
總結(jié)
到此這篇關(guān)于js深拷貝、淺拷貝、遞歸拷貝的文章就介紹到這了,更多相關(guān)js深拷貝、淺拷貝、遞歸拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家?guī)硪黄狫S判斷是否為JSON對象及是否存在某字段的方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11
JavaScript使用localStorage判斷設(shè)置值是否過期
本文主要介紹了JavaScript使用localStorage判斷設(shè)置值是否過期，通過設(shè)置過期時(shí)間，我們可以使用 setItemWithExpiration 函數(shù)將數(shù)據(jù)存儲(chǔ)到 localStorage 中，并使用 getItemWithExpiration 函數(shù)獲取數(shù)據(jù)并檢查是否過期，感興趣的可以了解一下2023-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)畫實(shí)現(xiàn)下拉刷新動(dòng)畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
利用純JavaScript實(shí)現(xiàn)讀取和導(dǎo)出Excel文件
在 Web 開發(fā)中,導(dǎo)入和導(dǎo)出 Excel 文件是一個(gè)常見的需求,特別是對于數(shù)據(jù)報(bào)表和分析等場景,雖然有很多第三方庫（如 xlsx 和 sheetjs）提供了非常強(qiáng)大的功能,但本文將探討如何不依賴第三方庫,利用純 JavaScript 來實(shí)現(xiàn)讀取和導(dǎo)出Excel文件,需要的朋友可以參考下2025-03-03
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單的無縫輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
javascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】
下面小編就為大家?guī)硪黄猨avascript中利用柯里化函數(shù)實(shí)現(xiàn)bind方法【推薦】。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧2016-04-04
JS 實(shí)現(xiàn)Json查詢的方法實(shí)例
曾經(jīng)看過一個(gè)大牛寫的實(shí)現(xiàn)Json的一個(gè)模板類，今天突然沒事就來自己試著寫寫。還好，一些東西還記得，思路還算清晰。直接上代碼了2013-04-04
JavaScript中數(shù)組去重的辦法總結(jié)
你是否在面試的過程中被考到過給你一個(gè)數(shù)組讓你去掉重復(fù)項(xiàng)呢，下面小編就來總結(jié)一下對于數(shù)組去重這道簡單的面試題時(shí)，我們可以回答的方法有什么吧2023-06-06
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單掃雷，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08
javascript數(shù)組對象的slice方法從數(shù)組中分離出一個(gè)子數(shù)組，功能類似于字符串對象的substring方法。今天我們就來詳細(xì)探討下javascript的這個(gè)不太常用的slice()方法。2015-04-04