javascript中的浅拷贝和深拷贝有什么区别？

本文将探讨在JavaScript中创建对象副本的常见挑战及解决方案。当尝试生成对象的副本时，若结果未达预期，本文将详细阐述多种克隆技术及其正确应用方法。这些知识将有助于确保在使用克隆操作时获得预期的输出。

在JavaScript中，对象的克隆可分为浅拷贝和深拷贝。本文将深入解析这两种机制的含义及实现方法。

浅拷贝

在JavaScript中，浅拷贝会创建一个新对象，该对象包含对原始对象相同内存位置的引用。这意味着，若对复制后的对象进行修改，原始对象将随之发生变化。

在JavaScript中，有多种方法可实现浅拷贝：

Object.assign()

Object.assign() 方法可将源对象的所有可枚举属性复制至目标对象。其语法为：Object.assign(target, ...sources)，其中 target 为目标对象，sources 为源对象。以下示例展示其用法：

let originalObj = { name: "John", age: 30 };
let copiedObj = Object.assign({}, originalObj);

copiedObj.age = 40;

console.log(originalObj.age); // Output: 40

如示例所示，对复制对象的属性进行修改将导致原始对象同步变化。

展开运算符（Spread Operator）

展开运算符（Spread Operator）也可用于创建对象的浅拷贝。该运算符将对象的属性分散至新对象中。以下示例展示其用法：

let originalObj = { name: "John", age: 30 };
let copiedObj = { ...originalObj };

copied  // Note: This line contains a typo in the original; corrected to 'copiedObj'
copiedObj.age = 40;

console.log(originalObj.age); // Output: 40

同样，对复制对象的属性进行修改将影响原始对象。

深拷贝

深拷贝会创建一个完全独立的新对象，包含原始对象的所有属性及其子属性。这意味着，对复制对象的修改不会影响原始对象。

在JavaScript中，实现深拷贝的常用方法包括：

递归复制

以下是一个使用递归实现深拷贝的示例：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }
  const clone = {};
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

注意：此示例适用于简单对象结构，未处理循环引用等复杂场景。