详解JavaScript对象的深浅复制

2023年5月27日上午5:27 • JavaScript

请参考以下完整攻略。

1. JavaScript对象的深浅复制

JavaScript中的对象赋值，涉及到两种复制方法：浅复制和深复制。

浅复制只复制变量对象本身及其属性的引用，针对基本数据类型是深复制，对于复杂数据类型则是浅复制。而深拷贝会完全复制原始对象和嵌套的所有对象，也就是说，新创建的对象与原始对象没有任何关联。

2. 浅复制

浅复制的实现方式有对象的解构赋值、Object.assign()方法和直接使用等三种。

2.1 对象的解构赋值

对象的解构赋值是通过赋值的方式将对象的属性直接取出来。用浅拷贝来打出对象a的属性，并将属性赋到对象b。

let a = {name: 'Jack', age: 20, hobby: ['reading', 'coding']}; 
let b = {...a};
console.log(b === a); //false
a.hobby.push('writing');
console.log(a.hobby); //[ 'reading', 'coding', 'writing' ]
console.log(b.hobby); //[ 'reading', 'coding', 'writing' ]

从上面的代码输出可以看到，改动了a对象，b对象也会受到影响。

2.2 Object.assign()方法

Object.assign() 方法会将所有可枚举属性的值从一个或多个源对象复制到目标对象。它会返回目标对象。

let a = {name: 'Jack', age: 20, hobby: ['reading', 'coding']}; 
let b = Object.assign({}, a);
console.log(b === a); //false
a.hobby.push('writing');
console.log(a.hobby); //[ 'reading', 'coding', 'writing' ]
console.log(b.hobby); //[ 'reading', 'coding', 'writing' ]

通过示例代码可以看到，与使用对象解构方法一样，当我们改动了a对象中的属性时，b对象也会受到影响，因此Object.assign()方法也是一种浅拷贝方法。

2.3 直接复制

直接复制会产生两个具有相同属性的变量，但是它们并不是同一个变量，而且改变其中任意一个的属性，并不会影响另一个变量。

let a = {name: 'Jack', age: 20, hobby: ['reading', 'coding']}; 
let b = a;
console.log(b === a); //true
a.hobby.push('writing');
console.log(a.hobby); //[ 'reading', 'coding', 'writing' ]
console.log(b.hobby); //[ 'reading', 'coding', 'writing' ]

从上面的代码输出可以看到，改动了a对象，b对象也会受到影响，因此直接复制方法也是一种浅拷贝方法。

3. 深复制

深复制的实现方式有JSON.parse(JSON.stringify())、手动递归、第三方库等常见的几种。

3.1 JSON.parse(JSON.stringify())

其中一个最常见的深拷贝对象的方式是使用JSON处理。定义一个JSON序列化再反序列化的过程来复制对象。

let a = {name: 'Jack', age: 20, hobby: ['reading', 'coding']}; 
let b = JSON.parse(JSON.stringify(a));
console.log(b === a); //false
a.hobby.push('writing');
console.log(a.hobby); //[ 'reading', 'coding', 'writing' ]
console.log(b.hobby); //[ 'reading', 'coding' ]

从上面的代码输出可以看到，此时改动了a对象后，b对象并不会受到影响，因此我们成功实现了深拷贝。

需要注意的是，这种深拷贝方式只支持纯JSON可以表示的数据类型，而对于函数、RegExp、Date等这些无法转成JSON对应的数据类型，会被忽略。

3.2 手动递归

手动递归深拷贝对象也是一种常见的方式，具体实现步骤如下：

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  let clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

以上是手动递归深拷贝对象的示例代码。