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

大家好我是图恩，你是否曾经尝试过在 JavaScript 中创建对象的副本，但输出不是您所期望的？如果是这样，本文将讨论不同的克隆技术以及如何正确利用它们。这些知识将有助于确保您在使用 clone 命令时获得正确的结果。

在 JavaScript 中，我们还可以创建对象的浅拷贝和深拷贝。让我们深入了解这些概念在 JavaScript 中的含义。

浅拷贝

JavaScript 中的浅拷贝会创建一个新对象，其中包含对与原始对象相同的内存位置的引用。这意味着，如果对复制的对象进行了任何更改，则原始对象也会受到影响。

在 JavaScript 中，有几种方法可以创建浅拷贝：

Object.assign（）

该方法将对象的所有可枚举属性复制到新对象。它采用一个或多个源对象和一个目标对象。目标对象是将被修改和返回的对象。下面是一个示例：Object.assign()

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

copiedObj.age = 40;

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

如您所见，更改复制对象的属性也会更改原始对象的属性。

展开运算符

展开运算符还可用于创建对象的浅表副本。此运算符将对象的属性分散到新对象中。下面是一个示例：...

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

copiedObj.age = 40;

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

同样，更改复制对象的属性也会更改原始对象的属性。

深拷贝

深拷贝会创建一个新对象，其中包含原始对象的所有属性和子属性。这意味着对复制的对象所做的任何更改都不会影响原始对象。

在 JavaScript 中，有几种方法可以创建深拷贝：

JSON.parse（） 和 JSON.stringify（）

创建对象的深拷贝的最简单方法是使用JSON.parse()和JSON.stringify()，下面是一个示例：

let originalObj = { name: "John", age: 30, address: { city: "New York", state: "NY" } };
let copiedObj = JSON.parse(JSON.stringify(originalObj));

copiedObj.address.city = "Los Angeles";

console.log(originalObj.address.city); // Output: New York

如您所见，更改复制对象的属性不会影响原始对象的属性。

递归

创建深层副本的另一种方法是使用递归复制原始对象和任何子对象的所有属性。下面是一个示例：

function deepCopy(obj) {
  let copiedObj = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (typeof obj[key] === "object" && obj[key] !== null) {
      copiedObj[key] = deepCopy(obj[key]);
    } else {
      copiedObj[key] = obj[key];
    }
  }

  return copiedObj;
}

let originalObj = { name: "John", age: 30, address: { city: "New York", state: "NY" } };
let copiedObj = deepCopy(originalObj);

copiedObj.address.city = "Los Angeles";

console.log(originalObj.address.city); // Output: New York

在此示例中，该函数以递归方式复制原始对象的所有属性和子属性。对复制的对象所做的任何更改都不会影响原始对象。

结论

总之，了解 JavaScript 中浅拷贝和深拷贝之间的区别对于正确的对象操作和内存管理非常重要。

浅拷贝创建一个与原始对象共享相同内存引用的新对象。对浅拷贝或原始对象所做的任何更改都将影响这两个对象。浅拷贝可用于创建对现有对象的引用，而不会消耗更多内存。

另一方面，深拷贝会创建一个完全独立于原始对象的新对象。对深拷贝的对象所做的任何更改都不会影响原始对象，反之亦然。深拷贝可用于创建不依赖于原始对象的全新对象。

浅拷贝和深拷贝之间的选择取决于代码的要求和所需的结果。浅拷贝在处理需要多次引用的大型对象时很有用，而深拷贝在创建不依赖于原始对象的新的独立对象时很有用。

本文章由javascript技术分享原创和收集