赋值、浅拷贝、深拷贝：理解变量之间的区别

2024-02-17 20:31:45

在JavaScript的编程世界里，我们经常需要处理各种类型的数据，像是简单的数字、文本，或者复杂的数组和对象。如何有效地管理这些数据，避免一些出乎意料的错误，就需要我们深入理解JavaScript中赋值、浅拷贝和深拷贝之间的区别。它们看似简单，但在实际操作中，稍有不慎就可能导致数据混乱，程序出现难以预料的结果。

我们先从最基础的赋值操作说起。赋值操作就像是在给变量取一个别名，它把一个变量的值直接赋给另一个变量。举个例子，假设我们有一个变量num1，它的值是10，现在我们想把这个值赋给另一个变量num2。

let num1 = 10;
let num2 = num1;

console.log(num1, num2); // 输出：10 10

执行这段代码后，num2的值也变成了10。但是，需要注意的是，这里只是把num1的值复制了一份给num2，它们各自独立，互不影响。如果你之后修改了num1的值，num2的值并不会跟着改变。

接下来，我们来看看浅拷贝。浅拷贝就像是给一个对象拍了一张照片，照片上的内容和原对象看起来一模一样，但它们实际上是两个不同的东西。在JavaScript中，浅拷贝只会复制对象的第一层属性。如果对象内部还有嵌套的对象或者数组，浅拷贝并不会复制这些嵌套的内容，而是让新对象和原对象共享这些嵌套的内容。

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const obj2 = Object.assign({}, obj1); // 浅拷贝

console.log(obj1, obj2); // 输出：{ name: 'John', age: 30, address: { city: 'New York', country: 'USA' } } { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } }

这段代码中，我们使用Object.assign()方法创建了一个obj1的浅拷贝obj2。乍一看，obj1和obj2的内容完全相同。但如果我们修改obj1.address.city的值，你会发现obj2.address.city的值也跟着改变了。这是因为obj1和obj2的address属性指向的是同一个对象。

最后，我们来聊聊深拷贝。深拷贝就像是把一个对象完完整整地克隆了一遍，新对象和原对象没有任何关联，就像双胞胎一样，虽然长得一样，但他们是独立的个体。深拷贝会复制对象的所有层级，包括嵌套的对象和数组，每个层级都会创建一个新的副本。

实现深拷贝的方法有很多，可以使用递归的方式遍历对象的所有属性，也可以借助一些第三方库，比如Lodash。

import { cloneDeep } from 'lodash';

const obj1 = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

const obj2 = cloneDeep(obj1); // 深拷贝

console.log(obj1, obj2); // 输出：{ name: 'John', age: 30, address: { city: 'New York', country: 'USA' } } { name: 'John', age: 30, address: { city: 'New York', country: 'USA' } }