平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“一文彻底解读前端深浅拷贝的理解和几种采用做法”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

前言

落到代码里，深拷贝和浅拷贝是面试中经常被问到了，理解其原理和深浅拷贝差异以及多种深浅拷贝方法才能熟练在实际项目中采用做到游刃有余。本文将从作用原理到具体代码实现和多种采用方法进行展开解读。

深浅拷贝的理解

浅拷贝

浅拷贝落到代码里，从字面意义上就是浅层的拷贝对象，不涉及到深层次的拷贝，也就是说只复制对象表层数据，只是为原来的对象新建新的内存，但是嵌套的引用类型（如：数组、子对象）仍然需与原对象共享内存，修改副本的嵌套字段会同步影响原对象，进而产生污染。

从实现思路看，其核心就是，由于JS的数据类型的存储机制，基本类型（字符串、数字等）直接存在栈内存中,复杂类型（对象、数组等）在栈中只存堆内存的地址引用，而堆内存才存实际的数据。浅拷贝时，只是复制栈内存而不对堆内存进行复制。 如图：

极简代码理解就是：

// 原始对象
const userInfo = { 
    name: "张三", // 基本类型（直接存在栈内存里） 
    address: { city: "北京" } // 复杂数据类型（地址引用在栈，实际数据在堆） 
    };
// 浅拷贝：创建新对象
const formData = { ...userInfo }; 
// 1. 对比新对象本身的地址
console.log(userInfo === formData); // false，说明地址不同，是新的内存
// 2. 对比嵌套address的地址
console.log(userInfo.address === formData.address); // true，相同，说明内存共享，指向的是同一个地址
// 3. 修改嵌套字段，验证污染 
formData.address.city = "上海"; 
console.log(userInfo.address.city); // 输出"上海"，说明原对象被污染了

深拷贝

理解了浅拷贝，深拷贝就是完全复制原始对象及所有的嵌套数据从实现思路看，，会为原对象和所有嵌套的引用类型（如数组、子对象）新建独立的内存空间，副本与原对象彻底隔离，修改副本不会影响到原对象。

深浅拷贝的方法

浅拷贝的5种常用方法

1. 对象展开运算符{...obj}，最简洁的实现方法，适用来普通对象

const shallowCopy = { ...userInfo };

2.数组展开运算符,数组专属浅拷贝

const shallowCopy = { ...originArr };

3.Object.assign(target,source),能够合并多个对象，仅浅拷贝源对象表层

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

4.数组slice()，数组截取（不传参时等价于浅拷贝）

const shallowCopy = originalArr.slice();

5.数组concat()，拼接空数组实现浅拷贝

const shallowArr = originalArr.concat([]);

深拷贝的4种常用方法

1.JSON.parse(JSON.stringify(obj)),最常用（局限性：不兼容函数、Symbol、Date、RegExp）

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

2.递归遍历拷贝， 自定义实现（灵活处理所有类型，需手写逻辑），面试手写题常考

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.第三方库， 稳定可靠（开发首选）

• Lodash中的 _.cloneDeep(obj)（兼容所有类型，处理循环引用）
• jQuery中的 $.extend(true,{},obj)（第一个参数为true表示深拷贝）

4.structuredClone()， 浏览器原生API，兼容循环引用、Date/RegExp,但不兼容函数

总结

实际处理时，总的来说，深浅拷贝的实现方法适合结合实际项目边做边理解。先抓住核心思路，再逐步补上细节和边界处理，最后效果会更稳定，也更容易复用。