浅拷贝和深拷贝—出道五年，发现这些本质区别才顿悟！

前端

2023-09-03 04:00:38

浅拷贝与深拷贝的概念

在计算机科学中，拷贝是指将一个对象的内容复制到另一个对象。这个过程可以是浅拷贝，也可以是深拷贝。

浅拷贝：浅拷贝只复制对象本身的内容，而不会复制对象引用的对象。
深拷贝：深拷贝不仅会复制对象本身的内容，还会复制对象引用的对象。

浅拷贝与深拷贝的区别

浅拷贝和深拷贝的主要区别在于：浅拷贝只复制对象本身的内容，而深拷贝会复制对象本身的内容和对象引用的对象。

浅拷贝适用于复制简单对象，而深拷贝适用于复制复杂对象。简单对象是指不包含其他对象的简单数据结构，例如数字、字符串和布尔值。复杂对象是指包含其他对象的复合数据结构，例如数组和对象。

浅拷贝与深拷贝的实现

在JavaScript中，浅拷贝和深拷贝可以通过以下方式实现：

浅拷贝：

const obj1 = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

const obj2 = Object.assign({}, obj1);

深拷贝：

const obj1 = {
  name: "John Doe",
  age: 30,
  address: {
    street: "123 Main Street",
    city: "Anytown",
    state: "CA",
    zip: "12345"
  }
};

const obj2 = JSON.parse(JSON.stringify(obj1));

浅拷贝与深拷贝的应用

浅拷贝和深拷贝在实际开发中都有广泛的应用。

浅拷贝：
复制简单对象
传递函数参数
存储数据到缓存中
深拷贝：
复制复杂对象
克隆对象
创建对象副本以便进行修改而不会影响原始对象

总结

浅拷贝和深拷贝是JavaScript中的两个重要概念，它们在实际开发中都有广泛的应用。面试的时候，我经常会问候选人深拷贝与浅拷贝的问题。因为它可以考察一个人的很多方面，比如基本功，逻辑能力，编码能力等等。另外在实际工作中，也常会遇到它。比如用于页面展示的数据状态，与需要传给后端的数据包中，有部分字段的值不一致的话，就需要在传参时根据接口文档覆写那几个字段的值。