关于 assign 的克隆问题与解决办法（深复制与浅复制）

最新推荐文章于 2025-06-08 17:23:59 发布

原创最新推荐文章于 2025-06-08 17:23:59 发布 · 739 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#深复制与浅复制 #object.assign

js 专栏收录该内容

30 篇文章

订阅专栏

本文探讨了在JavaScript中使用`Object.assign`进行对象复制时遇到的浅复制问题，以及为了解决这个问题提出的四种解决方案：通过JSON转换、使用lodash的深复制、jQuery的extend方法和自定义工具类的比较。文章详细分析了每种方法的优缺点和适用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Object.assign

关于使用Object.assign复制时，对于引用类型里存放引用类型时，此时里面存放引用类型是浅复制。具体事例看测试:

var obj={a:1,b:{name:"cc"}}

var cloneObj=Object.assign({},obj); 

obj.a=2;

cloneObj.a  //1  对于基本数据类型则是深复制

obj.b.name="wcc";
cloneObj.b.name //wcc 对于引用类型则是浅复制(引用地址)

//数组
var arr=[1,{age:12}]
var cloneArr=Object.assign([],arr);
arr[0]=3;
cloneArr[0] //1
arr[1].age=15;
cloneArr[1].age //15

解决:

一、使用 JSON复制

var obj={a:1,b:{name:"cc"}}

var cloneObj=JSON.Stringify(obj)
cloneObj=JSON.Parse(cloneObj) 

obj.b===cloneObj.b  //false

该方法有局限性:

会忽略 undefined
不能序列化函数
不能解决循环引用的对象

let person = {
    age: undefined,
    work: function() {},
    name: 'cc'
}
let p = JSON.parse(JSON.stringify(person))
console.log(p) // {name: "cc"}

二、loadsh的深复制

var objects = [{ 'a': 1 }, { 'b': 2 }];
 
var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);

三、使用 Jquery中 extend

var obj={a:1,b:{name:"cc"}}

var cloneObj=$.extend(true,{},obj);


obj.b===cloneObj.b  //false

四、工具类简单比较

const type=obj=>{
    const toString=Object.prototype.toString;
    const map={
        '[object Array]':'array',
        '[object Object]':'object'
    };
    return map[toString.call(obj)]
}
const deepClone=data=>{
    const t=type(data);
    let o,i,length;
    if(t==='array'){
        //数组类型，新建数组
        o=[];
        for(i=0,length=data.length;i<length;i++){
            o.push(deepClone(data[i]))
        }
        return o;
    }else if(t==='object'){
        //新建对象
        o={};
        for(i in data){
            o[i]=deepClone(data[i])
        }
        return o;
    }else{
        //基本数据类型,直接返回
        return data
    }
}

以上是在项目中碰到的问题，与解决方案...fighting