js中对象数据类型的深拷贝方法（5种）

处于菜鸟阶段的七七

已于 2022-06-17 09:45:54 修改

阅读量2.6w

点赞数 15

文章标签：前端 javascript

于 2022-03-24 21:24:00 首次发布

本文链接：https://blog.csdn.net/qq_52372296/article/details/123721413

版权

本文介绍了JavaScript中实现对象深拷贝的五种方法，包括JSON暴力转换、拓展运算符+解构赋值、Object.assign()、遍历对象以及递归循环深拷贝。这些方法各有优缺点，例如JSON方法会丢失函数和undefined，Object.assign()只进行浅拷贝等。深入理解这些拷贝方式对于优化代码和避免潜在问题至关重要。

摘要由CSDN通过智能技术生成

一、使用JSON暴力转换

二、使用拓展运算符+解构赋值

三、使用对象的合并，即通过Object.assign()方法

四、通过遍历对象

五、利用循环递归

一、使用JSON暴力转换

通过JSON.stringify() 和 JSON.parse() 将对象转为字符串之后在转为对象。

var obj = {name:'123'};
var obj2 = JSON.parse(JSON.stringify(obj))

二、使用拓展运算符+解构赋值

该方法的局限性在于，当值为undefined、function、symbol会在转换过程中被忽略。

var obj = {name:'123',age:13};
var obj2 = {...obj}

三、使用对象的合并，即通过Object.assign()方法

注意：该方法的第一个参数必须是空对象

var obj = {name:'123',age:13};
var obj2 = Object.assign({},obj);

四、通过遍历对象

var obj1 = {name:"123"};
var obj2 = {};
for(x in obj1) {
    obj2[x] = obj1[x];
}

五、利用循环递归

以上四种方法只能进行一层拷贝，即当对象的属性值也是对象时，就无法实现该属性的深拷贝，在这里提供一种利用循环递归进行深拷贝的方法。

    var obj = {
        name: "123",
        sex: { age: "小花" }
    };
    var newObj = {};
    function deepClone(obj, newObj) {
        var newObj = newObj || {};
        for (let key in obj) {
            if (typeof obj[key] == 'object') {
                newObj[key] = (obj[key].constructor === Array) ? [] : {}
                deepClone(obj[key], newObj[key]);
            } else {
                newObj[key] = obj[key]
            }
        }
        return newObj;
    }
    console.log(deepClone(obj, newObj));//{name: "123",sex: {age: '小花'}}