Js 深拷贝的三种实现方式|极客笔记

Js 深拷贝的三种实现方式

在 JavaScript 中，深拷贝是一个常见的操作，它可以帮助我们创建一个原对象的完全独立的副本，使得修改副本不会影响到原对象。在实际开发中，我们经常需要对复杂的对象或数组进行深拷贝操作，以便于在处理数据时不破坏原始数据结构。本文将介绍三种常见的 JavaScript 深拷贝实现方式，并进行详细的解释和比较。

什么是深拷贝？

深拷贝是指创建一个新的对象或数组，并将原对象或数组中的所有子对象、子数组都复制到新对象或数组中的过程。换句话说，深拷贝会递归的复制整个对象结构，确保新对象与原对象完全独立。

实现方式一：递归实现

递归实现深拷贝是最常见的方法之一，它通过递归遍历原对象的所有属性，并分别进行复制得到新对象。

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    let result = Array.isArray(obj) ? [] : {};

    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            result[key] = deepClone(obj[key]);
        }
    }

    return result;
}

示例：

let obj = {
    a: 1,
    b: {
        c: 2,
        d: 3
    }
};

let cloneObj = deepClone(obj);
console.log(cloneObj); // { a: 1, b: { c: 2, d: 3 } }
console.log(cloneObj === obj); // false

实现方式二：JSON 序列化实现

利用 JSON.stringify() 和 JSON.parse() 方法也可以实现深拷贝。首先将原对象转换成 JSON 字符串，然后再将 JSON 字符串转换为新对象。

function deepClone(obj) {
    return JSON.parse(JSON.stringify(obj));
}

示例：

let obj = {
    a: 1,
    b: {
        c: 2,
        d: 3
    }
};

let cloneObj = deepClone(obj);
console.log(cloneObj); // { a: 1, b: { c: 2, d: 3 } }
console.log(cloneObj === obj); // false

实现方式三：使用第三方库实现

除了手动实现深拷贝外，还可以使用第三方库如 lodash 的 _.cloneDeep() 方法来实现深拷贝。

const _ = require('lodash');

let obj = {
    a: 1,
    b: {
        c: 2,
        d: 3
    }
};

let cloneObj = _.cloneDeep(obj);
console.log(cloneObj); // { a: 1, b: { c: 2, d: 3 } }
console.log(cloneObj === obj); // false