js 拷贝对象|极客笔记

js 拷贝对象

在 JavaScript 中，对象是一种复合数据类型，是由属性和方法组成的。当我们需要复制一个对象时，常常需要用到对象的深拷贝或者浅拷贝。深拷贝是指完全复制一个对象，包括对象的所有属性，而浅拷贝只是复制对象的引用，复制后的对象与原对象共享同一块内存。

本文将详细介绍如何在 JavaScript 中实现对象的深拷贝和浅拷贝，以及它们的应用场景和区别。

浅拷贝

什么是浅拷贝

浅拷贝是指将一个对象的引用复制给目标对象，目标对象与原对象共享同一块内存，当原对象发生变化时，目标对象也会相应改变。实现浅拷贝的方式包括直接赋值、Object.assign() 和扩展运算符(…)

直接赋值

直接赋值是最简单的浅拷贝方式，通过将原对象赋值给目标对象来实现拷贝。下面是一个示例：

let obj1 = { name: 'Alice', age: 25 };
let obj2 = obj1;

obj2.name = 'Bob';

console.log(obj1.name); // 输出 'Bob'

在这个示例中，我们将对象 obj1 赋值给了对象 obj2，当我们修改 obj2 的属性值时，原对象 obj1 的属性值也发生了改变，这证明了它们共享同一块内存。

Object.assign()

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象，并返回目标对象。在这个过程中，如果目标对象已经有相同属性，则会被覆盖。示例如下：

let obj1 = { name: 'Alice', age: 25 };
let obj2 = Object.assign({}, obj1);

obj2.name = 'Bob';

console.log(obj1.name); // 输出 'Alice'
console.log(obj2.name); // 输出 'Bob'

在这个示例中，我们使用 Object.assign() 方法将 obj1 的属性复制给 obj2，当我们修改 obj2 的属性值时，不会影响到原对象 obj1。

扩展运算符(…)

扩展运算符是 ES6 中新增的语法，用于将一个数组转为用逗号分隔的参数序列。在对象中，可以使用扩展运算符实现浅拷贝，示例如下：

let obj1 = { name: 'Alice', age: 25 };
let obj2 = { ...obj1 };

obj2.name = 'Bob';

console.log(obj1.name); // 输出 'Alice'
console.log(obj2.name); // 输出 'Bob'

与 Object.assign() 方法类似，使用扩展运算符(…) 也可以实现对象的浅拷贝。

浅拷贝的应用场景

浅拷贝适用于只需要复制对象的第一层属性，且属性值为基本类型（如字符串、数字等）的情况。当原对象中包含引用类型的属性（如数组、对象等）时，浅拷贝无法完全复制这些引用类型，就会出现共享内存的问题。

深拷贝

什么是深拷贝

深拷贝是指复制一个对象，包括对象的所有属性，属性值为基本类型时直接复制，属性值为引用类型时也进行递归复制。实现深拷贝的方式比较多，包括递归复制、JSON.parse() 和 JSON.stringify() 等方法。

递归复制

递归复制是实现深拷贝的一种常见方式，通过递归复制对象的每个属性来实现深拷贝。示例如下：

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

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

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

    return clone;
}

let obj1 = { name: 'Alice', age: 25, hobbies: ['reading', 'music'] };
let obj2 = deepClone(obj1);

obj2.hobbies.push('painting');

console.log(obj1.hobbies); // 输出 ['reading', 'music']
console.log(obj2.hobbies); // 输出 ['reading', 'music', 'painting']

在这个示例中，我们定义了一个 deepClone() 函数来实现深拷贝，通过递归地复制对象的每个属性来确保对象的每个属性都被复制到新对象中。

JSON.parse() 和 JSON.stringify()

另一种实现深拷贝的方式是利用 JSON 对象的 parse() 和 stringify() 方法，通过将对象转为 JSON 字符串再转回对象来实现深拷贝。示例如下：

let obj1 = { name: 'Alice', age: 25, hobbies: ['reading', 'music'] };
let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.hobbies.push('painting');

console.log(obj1.hobbies); // 输出 ['reading', 'music']
console.log(obj2.hobbies); // 输出 ['reading', 'music', 'painting']

使用 JSON.stringify() 方法将对象转为 JSON 字符串，再使用 JSON.parse() 方法将 JSON 字符串转回对象，这样可以完成对象的深拷贝。

深拷贝的应用场景

深拷贝适用于需要完全复制对象，包括对象的所有属性，且复制后的对象与原对象完全独立，互相不影响的情况。当原对象包括引用类型的属性时，深拷贝可以完整复制这些引用类型，避免共享内存的问题。

浅拷贝 vs 深拷贝

浅拷贝和深拷贝在实现方式和应用场景上有所不同，总结如下：

浅拷贝是复制原对象的引用，目标对象与原对象共享同一块内存，当修改目标对象时原对象也会受到影响；深拷贝是完全复制原对象，包括对象的所有属性，复制后的对象与原对象完全独立。
浅拷贝适用于只需要复制对象的第一层属性，且属性值为基本类型的情况；深拷贝适用于需要完全复制对象，包括对象的所有属性，且属性值可能包括引用类型的情况。
浅拷贝的实现方式包括直接赋值、Object.assign() 和扩展运算符(…)，深拷贝的实现方式包括递归复制、JSON.parse() 和 JSON.stringify() 等方法。
浅拷贝是一种浅层次的复制，仅仅复制对象的第一层属性，而深拷贝是一种完全复制，复制对象的所有层级属性。

在实际开发中，根据需求选择合适的拷贝方式是非常重要的，避免出现不必要的问题。