对象的深浅拷贝

Fairy_妍
133 阅读6分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。

let a={name: '小明'}
let b = a
a.name = '小红'
console.log(b.name)  // 小红

从上述例子中我们可以发现，如果给一个变量赋值一个对象，那么两者的值会是同一个引用，其中一方改变，另一方也会相应改变。

通常在开发中我们不希望出现这样的问题，我们可以使用浅拷贝来解决这个问题

1. 使用Object.assign浅拷贝

let a={name: '小明'}
let b = Object.assign({}, a)
a.name = '小红'
console.log(b.name) // 小明

我们可以发现使用Object.assign复制对象后，改变a的属性后，b的属性并没有跟着改改变。

Object.assign接收多个参数，该方法的第一个参数是拷贝的目标对象，后面的参数是拷贝的来源对象（也可以是多个来源）。

使用 object.assign 方法有几点需要注意

  • 不拷贝对象的继承属性；
  • 不拷贝对象的不可枚举的属性；
  • 可以拷贝 Symbol 类型的属性。
  • 只是浅拷贝对象的第一层属性及值，属性的值是引用类型的话还是享有相同的引用。

2. 使用展开运算符浅拷贝

let a={name: '小明'}
let b = {...a}
b.name = '小红'
console.log(a.name) // 小明

使用展开运算符，也是创建了一个新的引用地址，将a的属性拷贝到新的引用地址。

  • 如果确定对象属性的值都是基本类型，使用扩展运算符会很方便。

深拷贝原理

  • 浅拷贝只是创建了一个新的对象，复制了原有对象的基本类型的值，而引用数据类型只拷贝了一层属性，再深层的还是无法进行拷贝。
  • 深拷贝则不同，对于复杂引用数据类型，其在堆内存中完全开辟了一块内存地址，并将原有的对象完全复制过来存放。

这两个对象是相互独立、不受影响的，彻底实现了内存上的分离。总的来说，深拷贝的原理可以总结如下：

将一个对象从内存中完整地拷贝出来一份给目标对象，并从堆内存中开辟一个全新的空间存放新对象，且新对象的修改并不会改变原对象，二者实现真正的分离。

3. 使用JSON.parse(JSON.stringify(object))深拷贝

JSON.stringify() 是目前开发过程中最简单的深拷贝方法，通过该方法将json转化为字符串再转为一个新的对象。

let a = {
    age: 1,
    jobs: {
        first: 'FE'
    }
}
let b = JSON.parse(JSON.stringify(a))
a.jobs.first = 'native'
console.log(b.jobs.first) // FE

该方法的优缺点：

  • 会忽略 undefined 和 symbol
  • 不能序列化函数及undefined
  • 无法拷贝不可枚举的属性
  • 无法拷贝对象的原型链
  • 拷贝 RegExp 引用类型会变成空对象
  • 拷贝 Date 引用类型会变成字符串
  • 对象中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的结果会变成 null
  • 不能解决循环引用的对象，即对象成环 (obj[key] = obj)。

比如：

let a = {
    age: undefined,
    jobs: function() {},
    name: 'poetries'
}
let b = JSON.parse(JSON.stringify(a))
console.log(b) // {name: "poetries"}

以上示例看到jobs和age没有被拷贝，该方法会忽略掉函数和undefined。

4. 递归实现深拷贝

自定义方法通过递归方法实现：通过 for in 遍历传入参数的属性值，如果值是引用类型则再次递归调用该函数，如果是基础数据类型就直接复制

基础版

function deepClone(obj) { 
  let cloneObj = {}
  for(let key in obj) {                 //遍历
    if(typeof obj[key] ==='object') { 
      cloneObj[key] = deepClone(obj[key])  //是对象就再次调用该函数递归
    } else {
      cloneObj[key] = obj[key]  //基本类型的话直接复制值
    }
  }
  return cloneObj
}

测试一下改方法：

let obj1 = {
  a:{
    b:1
  }
}
let obj2 = deepClone(obj1);
obj1.a.b = 2;
console.log(obj2);   //  {a:{b:1}}

虽然上面的改deepClone方法可以实现一个深拷贝，但是其中还有很多问题：

  • 无法解决循环引用的问题。
  • 无法拷贝一些特殊的对象，诸如 RegExp, Date, Set, Map等
  • 无法拷贝函数

针对这些问题我们需要进行对应的特殊处理：

1、对于循环引用：

解决办法：创建一个Map。记录下已经拷贝过的对象，如果说已经拷贝过，那直接返回它行了。但还是有一个潜在的坑, 就是Map上的 key 和 Map 构成了强引用关系，这是相当危险的。所以最好的是我们创建一个弱引用WeakMap

const deepClone = (target, map = new WeakMap()) => {
  //...
}

关于强弱引用扩展：

在计算机程序设计中，弱引用与强引用相对。被弱引用的对象可以在任何时候被回收，而对于强引用来说，只要这个强引用还在，那么对象无法被回收。拿上面的例子说，map 和 a一直是强引用的关系， 在程序结束之前，a 所占的内存空间一直不会被释放。

2、特殊对象

对于特殊的对象，我们使用Object.prototype.toString.call(obj)方式来鉴别具体是上面特殊类型。然后根据不同的类型，使用构造函数创建一个新的对象地址，将值copy过来。具体处理：

const canTraverse = {
  '[object Map]': true,
  '[object Set]': true,
  '[object Array]': true,
  '[object Object]': true,
  '[object Arguments]': true,
};
​
let type = Object.prototype.toString.call(target);
if(canTraverse[type]) {
    // 这波操作相当关键，可以保证对象的原型不丢失！
    let ctor = target.prototype;
    cloneTarget = new ctor();
} else {
    // 处理不可遍历的对象
}

不可遍历的对象，不同的对象有不同的处理。

const boolTag = '[object Boolean]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';
// 处理正则
const handleRegExp = (target) => {
  const { source, flags } = target;
  return new target.constructor(source, flags);
}
// 处理函数
const handleFunc = (target) => {
  // 下一部分详细说明
}
// 具体的处理
const handleNotTraverse = (target, tag) => {
  const Ctor = targe.constructor;
  switch(tag) {
    case boolTag:
    case numberTag:
    case stringTag:
    case errorTag: 
    case dateTag:
      return new Ctor(target);
    case regexpTag:
      return handleRegExp(target);
    case funcTag:
      return handleFunc(target);
    default:
      return new Ctor(target);
  }
}

3、拷贝函数

  • 函数类型有两种，一种是普通函数，另一种是箭头函数。
  • 每个普通函数都是Function的实例，而箭头函数不是任何类的实例，每次调用都是不一样的引用。
  • 那我们只需要处理普通函数的情况，箭头函数直接返回它本身就好了。
  • 区分两者： 利用原型。箭头函数是不存在原型的。
const handleFunc = (func) => {
  // 箭头函数直接返回自身
  if(!func.prototype) return func;
  const bodyReg = /(?<={)(.|\n)+(?=})/m;
  const paramReg = /(?<=().+(?=)\s+{)/;
  const funcString = func.toString();
  // 分别匹配 函数参数 和 函数体
  const param = paramReg.exec(funcString);
  const body = bodyReg.exec(funcString);
  if(!body) return null;
  if (param) {
    const paramArr = param[0].split(',');
    return new Function(...paramArr, body[0]);
  } else {
    return new Function(body[0]);
  }
}

完整递归深拷贝

const getType = obj => Object.prototype.toString.call(obj);

const isObject = (target) => (typeof target === 'object' || typeof target === 'function') && target !== null;

const canTraverse = {
  '[object Map]': true,
  '[object Set]': true,
  '[object Array]': true,
  '[object Object]': true,
  '[object Arguments]': true,
};
const mapTag = '[object Map]';
const setTag = '[object Set]';
const boolTag = '[object Boolean]';
const numberTag = '[object Number]';
const stringTag = '[object String]';
const symbolTag = '[object Symbol]';
const dateTag = '[object Date]';
const errorTag = '[object Error]';
const regexpTag = '[object RegExp]';
const funcTag = '[object Function]';
// 处理正则
const handleRegExp = (target) => {
  const { source, flags } = target;
  return new target.constructor(source, flags);
}
// 处理函数
const handleFunc = (func) => {
  // 箭头函数直接返回自身
  if(!func.prototype) return func;
  const bodyReg = /(?<={)(.|\n)+(?=})/m;
  const paramReg = /(?<=\().+(?=\)\s+{)/;
  const funcString = func.toString();
  // 分别匹配 函数参数 和 函数体
  const param = paramReg.exec(funcString);
  const body = bodyReg.exec(funcString);
  if(!body) return null;
  if (param) {
    const paramArr = param[0].split(',');
    return new Function(...paramArr, body[0]);
  } else {
    return new Function(body[0]);
  }
}
// 处理不可遍历对象
const handleNotTraverse = (target, tag) => {
  const Ctor = target.constructor;
  switch(tag) {
    case boolTag:
      return new Object(Boolean.prototype.valueOf.call(target));
    case numberTag:
      return new Object(Number.prototype.valueOf.call(target));
    case stringTag:
      return new Object(String.prototype.valueOf.call(target));
    case symbolTag:
      return new Object(Symbol.prototype.valueOf.call(target));
    case errorTag: 
    case dateTag:
      return new Ctor(target);
    case regexpTag:
      return handleRegExp(target);
    case funcTag:
      return handleFunc(target);
    default:
      return new Ctor(target);
  }
}

const deepClone = (target, map = new  WeakMap()) => {
  if(!isObject(target)) 
    return target;
  let type = getType(target);
  let cloneTarget;
  if(!canTraverse[type]) {
    // 处理不能遍历的对象
    return handleNotTraverse(target, type);
  }else {
    // 这波操作相当关键，可以保证对象的原型不丢失！
    let ctor = target.constructor;
    cloneTarget = new ctor();
  }
  // 处理循环引用
  if(map.get(target)) 
    return target;
  map.set(target, true);

  if(type === mapTag) {
    //处理Map
    target.forEach((item, key) => {
      cloneTarget.set(deepClone(key, map), deepClone(item, map));
    })
  }
  
  if(type === setTag) {
    //处理Set
    target.forEach(item => {
      cloneTarget.add(deepClone(item, map));
    })
  }

  // 递归 处理数组和对象
  for (let prop in target) {
    if (target.hasOwnProperty(prop)) {
        cloneTarget[prop] = deepClone(target[prop], map);
    }
  }
  return cloneTarget;
}
avatar
文章
阅读
粉丝