首页  >  文章  >  web前端  >  JavaScript 中的浅复制与深复制

JavaScript 中的浅复制与深复制

WBOY
WBOY原创
2024-07-26 20:45:00754浏览

Shallow Copy vs Deep Copy in JavaScript

使用 JavaScript 时,了解浅复制和深复制之间的区别对于有效操作对象和数组至关重要。让我们深入研究这些术语的含义以及如何在代码中实现每种类型的副本。

浅复制
浅拷贝创建一个新的对象或数组,其中包含与原始对象或数组相同的值。但是,如果原始文件包含嵌套对象或数组,则浅拷贝仅复制对这些嵌套结构的引用,而不复制结构本身。这意味着对复制结构中的嵌套对象或数组的更改也会影响原始结构。

浅复制方法示例:

  1. 扩展运算符 ({...})
const original = { a: 1, b: { c: 2 } };
const shallowCopy = { ...original };

这里,shallowCopy是一个新对象,但shallowCopy.b仍然引用与original.b相同的对象。

2.Object.assign()

const shallowCopy = Object.assign({}, original);
  1. 数组切片方法
const originalArray = [1, 2, 3];
const shallowCopyArray = originalArray.slice();

深复制
深层复制创建一个新的对象或数组,它是原始对象或数组的完整、独立的克隆,包括所有嵌套的对象和数组。对深层副本的更改不会影响原始副本,反之亦然。

深度复制方法示例:

  1. JSON.stringify() 和 JSON.parse()
const original = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

此方法将对象序列化为 JSON 字符串,然后将其解析回新对象。但是,它不处理函数、未定义或循环引用。

2.递归函数

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

  const copy = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      copy[key] = deepCopy(obj[key]);
    }
  }
  return copy;
}

  1. StructuredClone()(在现代 JavaScript 环境中)
const deepCopy = structuredClone(original);

何时使用每个

  • 浅拷贝:适合没有嵌套结构的简单对象或数组。它更快并且使用更少的内存。当您需要快速复制时使用它,其中对嵌套对象的更改应反映在原始和副本中。

  • 深度复制:对于具有嵌套结构的复杂对象或数组是必需的。它确保对副本的更改不会影响原始版本。当你需要完全独立的克隆时使用它。

了解这些差异有助于防止意外共享引用引起的错误,并确保应用程序中的数据完整性

以上是JavaScript 中的浅复制与深复制的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn