JS深拷贝和浅拷贝大揭秘：JS数据复制的秘密武器

前端

2023-09-29 03:04:02

JavaScript 中的深拷贝与浅拷贝：揭秘对象和数组的复制秘诀

了解 JavaScript 中的对象和数组

在 JavaScript 中，对象和数组是两种重要的数据结构。对象是一种无序的属性集合，存储着键值对。数组是一种有序的元素集合，可以通过索引访问元素。理解这两者的区别对于掌握深拷贝和浅拷贝至关重要。

深拷贝与浅拷贝的概念

深拷贝 会完全复制对象或数组的所有属性，包括嵌套的对象或数组。这就像创建一个新实体，拥有原始实体所有属性的完全独立副本。

浅拷贝 只会复制对象或数组的直接属性，而不会复制嵌套的对象或数组。这就像创建一个新实体，引用原始实体的嵌套对象或数组。

实现深拷贝和浅拷贝

深拷贝：

Object.assign() 方法： Object.assign() 方法可以通过将源对象的所有属性复制到目标对象中来实现深拷贝，包括嵌套的对象。
JSON.parse() 和 JSON.stringify() 方法： JSON.parse() 和 JSON.stringify() 方法通过将对象转换为 JSON 字符串然后再将其解析回对象来实现深拷贝。
递归函数： 使用递归函数可以遍历对象的所有属性，并为每个属性创建一个新的副本。

代码示例：

// 使用 Object.assign() 方法实现深拷贝
const originalObject = { name: "John", age: 30, address: { street: "Main St", number: 123 } };
const deepCopy = Object.assign({}, originalObject);

// 使用 JSON.parse() 和 JSON.stringify() 方法实现深拷贝
const originalArray = [1, 2, [3, 4, 5]];
const deepCopy = JSON.parse(JSON.stringify(originalArray));

// 使用递归函数实现深拷贝
function deepCopy(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj;
  }
  if (Array.isArray(obj)) {
    return obj.map(deepCopy);
  }
  const copy = {};
  for (const key in obj) {
    copy[key] = deepCopy(obj[key]);
  }
  return copy;
}

浅拷贝：

Object.assign() 方法： Object.assign() 方法可以通过将源对象的所有直接属性复制到目标对象中来实现浅拷贝，但不会复制嵌套的对象。
扩展运算符（...）： 扩展运算符可以通过将对象的所有直接属性复制到新对象中来实现浅拷贝，但不会复制嵌套的对象。

代码示例：

// 使用 Object.assign() 方法实现浅拷贝
const originalObject = { name: "John", age: 30, address: { street: "Main St", number: 123 } };
const shallowCopy = Object.assign({}, originalObject);

// 使用扩展运算符实现浅拷贝
const originalArray = [1, 2, [3, 4, 5]];
const shallowCopy = [...originalArray];