📜  什么是 JavaScript 中的浅拷贝和深拷贝?(1)

📅  最后修改于: 2023-12-03 14:49:09.165000             🧑  作者: Mango

什么是 JavaScript 中的浅拷贝和深拷贝?

在 JavaScript 中,经常需要复制对象。但是,复制对象的方式有两种:浅拷贝和深拷贝。浅拷贝只是复制数据的顶级结构,而深拷贝会复制整个数据结构。

浅拷贝

浅拷贝会复制对象的顶级结构,但是不会复制深层次的对象。这意味着,如果原始对象包含引用类型的属性,则复制后的对象仍然引用原始对象中的属性。

实现浅拷贝的方法

Object.assign()

Object.assign() 方法可以用于将源对象的属性复制到目标对象中。

const sourceObj = { a: 1, b: 2 };
const targetObj = Object.assign({}, sourceObj);
console.log(targetObj); // { a: 1, b: 2 }

Spread 操作符

Spread 操作符可以将一个对象中的属性展开到另一个对象中。

const sourceObj = { a: 1, b: 2 };
const targetObj = { ...sourceObj };
console.log(targetObj); // { a: 1, b: 2 }
深拷贝

深拷贝会复制整个对象,包括对象的每一层嵌套。这意味着,即使原始对象包含引用类型的属性,复制后的对象也会创建一个新的引用类型的属性。

实现深拷贝的方法

递归实现

通过递归的方式实现深拷贝。

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

JSON.parse() 和 JSON.stringify()

通过先将对象转化为 JSON 字符串,再将 JSON 字符串转化为对象,实现深拷贝。

const sourceObj = { a: 1, b: { c: 2 } };
const targetObj = JSON.parse(JSON.stringify(sourceObj));
console.log(targetObj); // { a: 1, b: { c: 2 } }

但是,这种方式只能处理能够被转化为 JSON 的数据类型。如果对象中包含了函数、正则表达式等特殊类型的属性,这种方式就无法进行深拷贝。

结论

浅拷贝和深拷贝都有各自的适用场景。如果你只需要复制对象的顶级结构,并且原始对象中没有引用类型的属性,那么使用浅拷贝是一个不错的选择。而如果你需要复制整个对象,或者原始对象中包含了引用类型的属性,那么使用深拷贝是更为安全的选择。