JavaScript对象拷贝与赋值操作实例分析

在JavaScript中，对象的赋值与拷贝是一个非常重要的话题。这篇文章将会分析对象的赋值与拷贝两种操作的差异以及使用场景，并通过实例展示它们的不同表现。

基本数据类型与引用数据类型

在JavaScript中，数据类型可分为基本数据类型和引用数据类型。基本数据类型包括Number、String、Boolean、null和undefined，而引用数据类型包括Object、Array、Function、Date等等。

• 基本数据类型：基本数据类型的变量储存的是实际的值，通过变量对基本类型数据进行操作时，修改的是变量本身的值。

let a = 1;
let b = a;
b = 2;
console.log(a); // 1
console.log(b); // 2

• 引用数据类型：引用数据类型的变量储存的是一个指针，指向该数据类型在内存中被储存的地址，通过变量对引用类型数据进行操作时，修改的是内存中的数据。

let arr1 = [1, 2];
let arr2 = arr1;
arr2.push(3);
console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3]

对象的赋值与拷贝

赋值操作

在JavaScript中，对象的赋值操作是指将一个对象的引用赋值给另一个变量。当两个变量引用的是同一对象时，其中一个变量修改该对象，另一个变量也会受到影响。

示例代码如下所示：

let obj1 = {
  name: 'John',
  age: 20
};
let obj2 = obj1;
obj2.age = 22;
console.log(obj1); // { name: 'John', age: 22 } 修改age变量值
console.log(obj2); // { name: 'John', age: 22 }

在上述示例中，当修改obj2中的age值时，obj1中对应的值也发生了改变。因为obj1和obj2都指向同一个内存地址。

拷贝操作

在JavaScript中，对象的拷贝是指将一个对象的值复制到另一个对象中。当拷贝完成后，两个对象之间互不影响。

浅拷贝

浅拷贝是将一个对象的属性值拷贝到一个新的对象中，但是新对象的属性值仍然是对原对象属性值的引用。

举个例子：

let obj1 = {
  name: 'John',
  age: 20
};
let obj2 = {};
for(let key in obj1){
  if(obj1.hasOwnProperty(key)){
    obj2[key] = obj1[key];
  }
}
obj2.age = 22;
console.log(obj1); // { name: 'John', age: 20 }
console.log(obj2); // { name: 'John', age: 22 }

在上述示例中，当修改obj2中的age值时，obj1中对应的值并没有改变，并且obj2也没有对obj1产生影响。

深拷贝

深拷贝是指递归地将一个对象及其子对象进行拷贝，完全复制一个新对象，新对象跟原对象不存在任何关系。

下面示例演示了如何通过JSON.parse(JSON.stringify(obj))实现深拷贝：

let obj1 = {
  name: 'John',
  age: 20,
  friend: {
    name: 'Tom',
    age: 18
  }
};
let obj2 = JSON.parse(JSON.stringify(obj1));
obj2.friend.age = 20;
console.log(obj1); // { name: 'John', age: 20, friend: { name: 'Tom', age: 18 } }
console.log(obj2); // { name: 'John', age: 20, friend: { name: 'Tom', age: 20 } }

在上述示例中，当修改obj2中的friend对象的age属性时，obj1中的对应值仍然保持不变，它们互不影响。

总结

• 对于基本数据类型，赋值和拷贝的操作保持相同的效果，即变量之间相互独立，修改其中一个变量不会影响其他变量。
• 对于引用数据类型，赋值和拷贝的操作效果不同。赋值是将两个变量引用同一个内存地址，它们之间存在关联。而拷贝是将一个对象的值复制到另一个对象中，使它们变得完全相互独立。
• 对于浅拷贝，虽然生成了一个新的对象，但是新对象的属性仍然是对原对象属性的引用，因此当修改新对象属性时也会影响原对象。
• 对于深拷贝，递归地将原对象及其子对象进行复制，生成一个新的对象，彻底解除了原对象与新对象之间的关联，保证二者相互独立。

以上就是JavaScript对象拷贝与赋值操作的详细分析。该攻略中包含了基本数据类型与引用数据类型的区别，赋值与拷贝两种操作的差异以及使用场景，并通过实例演示了浅拷贝和深拷贝两种实现方式的不同表现。