变量拷贝的深度与浅度：js浅拷贝、深拷贝与赋值详解，助力提升编程能力

2023-12-21 00:31:36

在编程中，变量拷贝是开发人员经常会遇到的操作。变量拷贝可以帮助我们创建一个新变量，该变量的值与原始变量相同。变量拷贝分为三种类型：赋值、浅拷贝和深拷贝。

赋值

赋值是最简单的变量拷贝方式。它通过将原始变量的值直接复制到新变量中来创建新变量。赋值操作只适用于基本数据类型，例如数字、字符串和布尔值。对于引用类型，赋值操作只复制引用，而不复制实际值。

let a = 10;
let b = a;

console.log(a); // 10
console.log(b); // 10

a = 20;

console.log(a); // 20
console.log(b); // 10

在上面的例子中，我们使用赋值操作将变量a的值复制到变量b中。然后，我们修改了变量a的值。我们可以看到，变量b的值并没有发生改变。这是因为赋值操作只复制了变量a的值，而没有复制变量a的引用。

浅拷贝

浅拷贝是一种更高级的变量拷贝方式。它通过将原始变量的属性值复制到新变量的属性中来创建新变量。浅拷贝操作适用于引用类型，例如对象和数组。

let a = {
  name: 'John',
  age: 30
};

let b = Object.assign({}, a);

console.log(a); // { name: 'John', age: 30 }
console.log(b); // { name: 'John', age: 30 }

a.name = 'Mary';

console.log(a); // { name: 'Mary', age: 30 }
console.log(b); // { name: 'John', age: 30 }

在上面的例子中，我们使用Object.assign()方法将对象a的属性值复制到对象b中。然后，我们修改了对象a的属性值。我们可以看到，对象b的属性值并没有发生改变。这是因为浅拷贝操作只复制了对象a的属性值，而没有复制对象a的引用。

深拷贝

深拷贝是最彻底的变量拷贝方式。它通过将原始变量的属性值和子属性值递归地复制到新变量的属性值和子属性值中来创建新变量。深拷贝操作适用于引用类型，例如对象和数组。

let a = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York'
  }
};

let b = JSON.parse(JSON.stringify(a));

console.log(a); // { name: 'John', age: 30, address: { street: 'Main Street', city: 'New York' } }
console.log(b); // { name: 'John', age: 30, address: { street: 'Main Street', city: 'New York' } }

a.name = 'Mary';
a.address.street = 'Park Avenue';

console.log(a); // { name: 'Mary', age: 30, address: { street: 'Park Avenue', city: 'New York' } }
console.log(b); // { name: 'John', age: 30, address: { street: 'Main Street', city: 'New York' } }

在上面的例子中，我们使用JSON.parse()和JSON.stringify()方法将对象a的属性值和子属性值递归地复制到对象b中。然后，我们修改了对象a的属性值和子属性值。我们可以看到，对象b的属性值和子属性值并没有发生改变。这是因为深拷贝操作复制了对象a的属性值和子属性值，以及对象的引用。

Lodash深拷贝

Lodash是一个流行的JavaScript库，它提供了许多有用的函数，包括深拷贝函数。Lodash的深拷贝函数使用递归算法来复制对象的属性值和子属性值。

let a = {
  name: 'John',
  age: 30,
  address: {
    street: 'Main Street',
    city: 'New York'
  }
};

let b = _.cloneDeep(a);

console.log(a); // { name: 'John', age: 30, address: { street: 'Main Street', city: 'New York' } }
console.log(b); // { name: 'John', age: 30, address: { street: 'Main Street', city: 'New York' } }

a.name = 'Mary';
a.address.street = 'Park Avenue';

console.log(a); // { name: 'Mary', age: 30, address: { street: 'Park Avenue', city: 'New York' } }
console.log(b); // { name: 'John', age: 30, address: { street: 'Main Street', city: 'New York' } }

在上面的例子中，我们使用Lodash的_.cloneDeep()函数将对象a的属性值和子属性值递归地复制到对象b中。然后，我们修改了对象a的属性值和子属性值。我们可以看到，对象b的属性值和子属性值并没有发生改变。这是因为Lodash的_.cloneDeep()函数使用了递归算法来复制对象a的属性值和子属性值，以及对象的引用。