JavaScript 对象与数组的复制：从引用赋值到深拷贝的全面指南

在 JavaScript 开发中，对象和数组的复制是一个非常常见的操作。无论是函数参数传递、状态管理，还是避免不必要的副作用，了解和掌握各种复制方式至关重要。我们将系统梳理 JavaScript 中的几种常见复制方法，并对其应用场景进行详细说明。

一、引用赋值：简单高效的数据共享

概念：

引用赋值是 JavaScript 中最简单的操作。它不会真正创建对象的副本，而是让新的变量与原变量共享同一个内存地址。当你修改新变量时，原变量的数据也会被修改。

代码示例：

javascript 复制代码

let person = { name: "Alice", age: 25 };
let newPerson = person;
newPerson.age = 30;
console.log(person.age);  // 输出 30

适用场景：

在内存和性能上有要求时，可以避免不必要的复制。
需要共享数据或保持同步的场景，如状态管理或配置共享。

优点：

高效、节省内存。

缺点：

修改新变量会影响原对象，容易引发副作用。

二、浅拷贝：复制顶层属性

浅拷贝创建一个新对象，复制原对象的顶层属性，但如果属性是引用类型（如对象、数组），它们仍然指向原来的内存地址。

1. 扩展运算符 `...`

代码示例：

javascript 复制代码

let person = { name: "Alice", age: 25, details: { city: "New York" } };
let newPerson = { ...person };
newPerson.details.city = "Los Angeles";
console.log(person.details.city);  // 输出 "Los Angeles"

适用场景：

对象结构简单，或仅需浅层修改的情况。

2. `Object.assign()`

Object.assign() 也是一种浅拷贝方式，适用于将多个对象合并到目标对象。

代码示例：

javascript 复制代码

let target = { a: 1 };
let source = { b: 2 };
let newObject = Object.assign(target, source);

适用场景：

当你需要将多个对象合并时，尤其适合对象合并操作。

3. `Array.prototype.slice()` 和 `concat()`

对于数组，可以使用 slice() 或 concat() 来创建浅拷贝。

代码示例：

javascript 复制代码

let arr = [1, 2, 3];
let shallowCopy = arr.slice();

适用场景：

适合处理简单数组，不涉及深层次数据。

三、深拷贝：完整的对象复制

深拷贝是指对对象或数组进行递归复制，确保所有层级的嵌套对象都有独立的副本。修改新对象不会影响原对象。

1. 递归实现深拷贝

代码示例：

javascript 复制代码

function deepClone(obj) {
    if (obj === null || typeof obj !== 'object') return obj;
    let copy = Array.isArray(obj) ? [] : {};
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            copy[key] = deepClone(obj[key]);
        }
    }
    return copy;
}

适用场景：

当对象结构复杂，需要完全独立的副本时。

2. `JSON.parse(JSON.stringify())`

这种方式可以快速实现深拷贝，但它有一些局限性，如无法复制函数、Date、RegExp 等特殊类型。

代码示例：

javascript 复制代码

let original = { a: 1, b: { c: 2 } };
let copy = JSON.parse(JSON.stringify(original));

适用场景：

适合简单的对象结构，不包含特殊类型。

3. `structuredClone()`

structuredClone() 是一种更高级的深拷贝方法，可以处理 Date、Map、Set 等复杂对象类型。

代码示例：

javascript 复制代码

let original = { a: 1, b: new Date(), c: new Map([[1, 'one']]) };
let copy = structuredClone(original);

适用场景：

需要复制复杂对象，包括 Map、Set 等高级数据结构。

四、特殊数据类型的复制方法

1. `Object.create()`

Object.create() 用于创建一个新的对象，该对象继承自指定的原型对象，而不是复制原对象的属性。

代码示例：

javascript 复制代码

let person = { name: "Alice", age: 25 };
let newPerson = Object.create(person);

适用场景：

用于原型继承，而不是单纯复制。

2. `Map` 和 `Set` 的复制

Map 和 Set 提供直接构造函数，可以创建它们的浅拷贝。

代码示例：

javascript 复制代码

let originalMap = new Map([[1, 'one']]);
let copyMap = new Map(originalMap);

适用场景：

需要复制 Map 或 Set 时，适合浅拷贝操作。

五、冻结对象：防止对象修改

虽然不是一种拷贝方式，但 Object.freeze() 可以防止对象的属性被修改。这是一种浅冻结，嵌套对象仍然可以修改。

代码示例：

javascript 复制代码

let obj = { name: "Alice", details: { age: 25 } };
Object.freeze(obj);

适用场景：

需要防止对象被修改时，尤其适合配置或常量对象。

六、总结与最佳实践

在 JavaScript 中，不同的复制方式适用于不同的场景。以下是总结：

引用赋值：高效、内存占用少，但会产生副作用，适合数据共享。
浅拷贝：适用于简单对象或数组，性能较好，但无法处理深层嵌套对象。
深拷贝：适用于复杂对象的完全复制，保证数据独立，但性能开销较大。
特殊数据类型的复制 ：针对 Map、Set、Date 等复杂类型，选择合适的复制方式。
冻结对象：适用于需要确保对象不可修改的场景，如配置文件或常量。

在实际项目中，选择合适的复制方式可以大幅提升代码的效率和可维护性。针对不同的需求，深度理解这些方法的适用场景，能够帮助你编写出更加健壮、可维护的代码。

通过这篇文章，我们梳理了 JavaScript 中从引用赋值到深拷贝的各种方法及其应用场景。我们在开发过程中，需要灵活选择合适的方式，确保数据的有效管理和高效处理。

JavaScript 对象与数组的复制：从引用赋值到深拷贝的全面指南

一、引用赋值：简单高效的数据共享

二、浅拷贝：复制顶层属性

1. 扩展运算符 ...

2. Object.assign()

3. Array.prototype.slice() 和 concat()

三、深拷贝：完整的对象复制

1. 递归实现深拷贝

2. JSON.parse(JSON.stringify())

3. structuredClone()

四、特殊数据类型的复制方法

1. Object.create()

2. Map 和 Set 的复制

五、冻结对象：防止对象修改

六、总结与最佳实践

1. 扩展运算符 `...`

2. `Object.assign()`

3. `Array.prototype.slice()` 和 `concat()`

2. `JSON.parse(JSON.stringify())`

3. `structuredClone()`

1. `Object.create()`

2. `Map` 和 `Set` 的复制