一文彻底解读前端深浅拷贝的理解和几种使用方法

// 原始对象
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); // 输出"上海"，说明原对象被污染了

const shallowCopy = { ...userInfo };

const shallowCopy = { ...originArr };

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

const shallowCopy = originalArr.slice();

const shallowArr = originalArr.concat([]);

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

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;
}