js对象和数组的几种深拷贝的常用方法

白马非马的逻辑

已于 2023-07-03 17:16:17 修改

阅读量552

点赞数

文章标签： javascript 前端开发语言 vue.js html

于 2023-01-16 11:32:46 首次发布

本文链接：https://blog.csdn.net/qq_29705009/article/details/128701671

版权

文章探讨了在JavaScript中实现对象深拷贝的三种常见方法：1)使用JSON.parse(JSON.stringify(obj))，但无法处理undefined和函数；2)利用ES6的扩展运算符(...)，仅能拷贝第一层，无法处理引用类型的嵌套；3)通过递归实现深拷贝，能完美解决上述问题，适用于复杂对象和数组的拷贝。

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

1，利用JSON.parse(JSON.stringify(obj))

缺点：当字段中有undefined和函数时不能拷贝

let obj = {
	a: 1,
	b: 2,
	c: undefined,
	d: {a: 6},
	e: () => {},
	list: ['a', 'b'],
    u: null
}

let objOne = JSON.parse(JSON.stringify(obj))
console.log(objOne)

// 输出 {a: 1, b: 2, d: {a: 6}, list: ["a", "b"], u: null}

2，利用es6的扩展运算符（...）实现

缺点：只能拷贝第一层，当对象中有字段还是引用数据类型时，对象中字段拷贝后的数据还是指向同一个引用。

3，利用递归循环创建复制每个字段，最完美的解决方法。

function deepCopy(obj) {
    // 判断要深拷贝的数据是什么类型，如果不是对象和数组，则不存在深拷贝的问题直接返回
    if(!(obj instanceof Object) && !(obj instanceof Array)) {
        return obj;
    }

    let copyObj = obj instanceof Array ? [] : {};
    for(let key in obj) {
        let value = obj[key];
        // 判断value是否是数组或对象，如果是，递归复制数据
        if(value instanceof Array || value instanceof Object) {
            copyObj[key] = deepCopy(value);
        } else {
            copyObj[key] = value;
        }
    }
    return copyObj;
}