快捷導(dǎo)航

一文徹底解讀前端深淺拷貝的理解和幾種使用方法

更新時(shí)間：2026年02月11日 09:49:29 作者：LeeAt

在前端面試當(dāng)中,經(jīng)常會(huì)被問到淺拷貝與深拷貝的問題,這主要是考察面試者對(duì)基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的理解,這篇文章主要介紹了前端深淺拷貝理解和幾種使用方法的相關(guān)資料,需要的朋友可以參考下

前言

深拷貝和淺拷貝是面試中經(jīng)常被問到了，理解其原理和深淺拷貝差異以及多種深淺拷貝方法才能熟練在實(shí)際項(xiàng)目中使用做到游刃有余。本文將從作用原理到具體代碼實(shí)現(xiàn)和多種使用方法進(jìn)行展開解讀。

深淺拷貝的理解

淺拷貝

淺拷貝從字面意義上就是淺層的拷貝對(duì)象，不涉及到深層次的拷貝，也就是說只復(fù)制對(duì)象表層數(shù)據(jù)，只是為原來的對(duì)象創(chuàng)建新的內(nèi)存，但是嵌套的引用類型（如：數(shù)組、子對(duì)象）仍然需要與原對(duì)象共享內(nèi)存，修改副本的嵌套字段會(huì)同步影響原對(duì)象，進(jìn)而產(chǎn)生污染。

其核心就是，由于JS的數(shù)據(jù)類型的存儲(chǔ)機(jī)制，基本類型（字符串、數(shù)字等）直接存在棧內(nèi)存中,復(fù)雜類型（對(duì)象、數(shù)組等）在棧中只存堆內(nèi)存的地址引用，而堆內(nèi)存才存實(shí)際的數(shù)據(jù)。淺拷貝時(shí)，只是復(fù)制棧內(nèi)存而不對(duì)堆內(nèi)存進(jìn)行復(fù)制。如圖：

極簡(jiǎn)代碼理解就是：

// 原始對(duì)象
const userInfo = { 
    name: "張三", // 基本類型（直接存在棧內(nèi)存里） 
    address: { city: "北京" } // 復(fù)雜數(shù)據(jù)類型（地址引用在棧，實(shí)際數(shù)據(jù)在堆） 
    };
// 淺拷貝：創(chuàng)建新對(duì)象
const formData = { ...userInfo }; 
// 1. 對(duì)比新對(duì)象本身的地址
console.log(userInfo === formData); // false，說明地址不同，是新的內(nèi)存
// 2. 對(duì)比嵌套address的地址
console.log(userInfo.address === formData.address); // true，相同，說明內(nèi)存共享，指向的是同一個(gè)地址
// 3. 修改嵌套字段，驗(yàn)證污染 
formData.address.city = "上海"; 
console.log(userInfo.address.city); // 輸出"上海"，說明原對(duì)象被污染了

深拷貝

理解了淺拷貝，深拷貝就是完全復(fù)制原始對(duì)象及所有的嵌套數(shù)據(jù)，會(huì)為原對(duì)象和所有嵌套的引用類型（如數(shù)組、子對(duì)象）創(chuàng)建獨(dú)立的內(nèi)存空間，副本與原對(duì)象徹底隔離，修改副本不會(huì)影響到原對(duì)象。

深淺拷貝的方法

淺拷貝的5種常用方法

1. 對(duì)象展開運(yùn)算符{...obj}，最簡(jiǎn)潔的實(shí)現(xiàn)方式，適用于普通對(duì)象

const shallowCopy = { ...userInfo };

2.數(shù)組展開運(yùn)算符,數(shù)組專屬淺拷貝

const shallowCopy = { ...originArr };

3.Object.assign(target,source),可以合并多個(gè)對(duì)象，僅淺拷貝源對(duì)象表層

const shallowCopy = Object.assign({},userInfo1,userInfo2,userInfo3,....);

4.數(shù)組slice()，數(shù)組截取（不傳參時(shí)等價(jià)于淺拷貝）

const shallowCopy = originalArr.slice();

5.數(shù)組concat()，拼接空數(shù)組實(shí)現(xiàn)淺拷貝

const shallowArr = originalArr.concat([]);

深拷貝的4種常用方法

1.JSON.parse(JSON.stringify(obj)),最常用（局限性：不支持函數(shù)、Symbol、Date、RegExp）

const deepCopy = JSON.parse(JSON.stringify(userInfo));

2.遞歸遍歷拷貝， 自定義實(shí)現(xiàn)（靈活處理所有類型，需手寫邏輯），面試手寫題常考

function deepClone(obj){
    // 類型判斷 
    if(obj isntanceof Date) return new Date(obj);
    if(obj instanceof RegExp) return new RegExp(obj);
    if(obj instanceof Error) return new Error(obj.message);
    if(obj instanceof Function) return function(...args){
        return obj.call(this,...args);
    };
    if( obj === null || typeof obj !== 'object') return obj;
    
    const newObj = Array.isArray(obj) ? [] : {};
    
    for(let key in obj){
        if(Object.hasOwn(obj,key)){
            if(typeof obj[key] === "object"){
                newObj[key] = deepClone(obj[key]); // 遞歸拷貝嵌套層
            }
            else{
                newObj[key] = obj[key]
            }
        }
         
    }
    return newObj;
}

3.第三方庫(kù)， 穩(wěn)定可靠（開發(fā)首選）