实现深拷贝还在用JSON.parse(JSON.stringify(obj))?带你用JS实现一个完整版深拷贝函数

使用JavaScript实现深拷贝

1.JSON序列化实现深拷贝

在JS中,想要对某一个对象(引用类型)进行一次简单的深拷贝,可以使用JSON提供给我们的两个方法。

  • JSON.stringfy():可以将JavaScript类型转成对应的JSON字符串;
  • JSON.parse():可以解析JSON,将其转回对应的JavaScript类型;

具体深拷贝的实现:

const obj = {
  name: 'curry',
  age: 30,
  friends: ['kobe', 'klay'],
  playBall() {
    console.log('Curry is playing basketball.')
  }
}

const newObj = JSON.parse(JSON.stringify(obj))
console.log(newObj)

打印结果:

JSON序列化实现深拷贝的优缺点:

  • 如果只是对一个简单对象进行深拷贝,那么使用该方法是很方便的;
  • 但根据上面的打印结果可以发现,原obj的方法属性并没有被拷贝到newObj中;
  • JSON序列化只能对普通对象进行深拷贝,如果对象中包含函数、undefined、Symbol等类型的值是无能为力的,会直接将其忽略掉;

2.自定义深拷贝函数

既然上面的方法不能满足我们的需求,那么就自己来一步步实现一个深拷贝函数吧。

2.1.基本功能实现

  • 实现深拷贝基本功能,暂时先不对特殊类型进行处理;
  • 定义一个辅助函数isObject,用于判断传入数据是否是对象类型;
function isObject(value) {
  const valueType = typeof value
  // 值不能为null,并且为对象或者函数类型
  return (value !== null) && (valueType === 'object' || valueType === 'function')
}
function deepClone(originValue) {
  // 判断传入的是否是对象类型,如果不是,说明是普通类型的值,直接返回即可
  if (!isObject(originValue)) {
    return originValue
  }

  const newObj = {} // 定义一个空对象
  // 循环遍历对象,取出key和值存放到空对象中
  // 注意:for...in遍历对象会将其继承的属性也遍历出来,所以需要加hasOwnProperty进行判断是否是自身的属性
  for (const key in originValue) {
    if (originValue.hasOwnProperty(key)) {
      // 递归调用deepClone,如果对象属性值中还包含对象,就会再次进行拷贝处理
      newObj[key] = deepClone(originValue[key])
    }
  }

  // 深拷贝完成,将得到新对象返回
  return newObj
}

简单测试一下:

const obj = {
  name: 'curry',
  age: 30,
  friends: {
    name: 'klay',
    age: 11
  }
}

const newObj = deepClone(obj)
console.log(newObj)
console.log(newObj.friends === obj.friends)

打印结果:

2.2.其他类型处理

  • 对其它数据类型进行处理,如数组、函数、Symbol、Set、Map等;
  • 对函数类型的判断,直接返回该函数即可,因为函数本身就是可以复用的;
  • Symbol不仅可以作为value,还可以作为key,需要对key为Symbol类型的情况进行处理;
function deepClone(originValue) {
  // 1.判断传入的是否是一个函数类型
  if (typeof originValue === 'function') {
    // 将函数直接返回即可
    return originValue
  }

  // 2.判断传入的是否是一个Map类型
  if (originValue instanceof Map) {
    return new Map([...originValue])
  }

  // 3.判断传入的是否是一个Set类型
  if (originValue instanceof Set) {
    return new Set([...originValue])
  }

  // 4.判断传入的值是否是一个Symbol类型
  if (typeof originValue === 'symbol') {
    // 返回一个新的Symbol,并且将其描述传递过去
    return Symbol(originValue.description)
  }

  // 5.判断传入的值是否是一个undefined
  if (typeof originValue === 'undefined') {
    return undefined
  }

  // 6.判断传入的是否是对象类型,如果不是,说明是普通类型的值,直接返回即可
  if (!isObject(originValue)) {
    return originValue
  }

  // 7.定义一个变量,如果传入的是数组就定义为一个数组
  const newValue = Array.isArray(originValue) ? [] : {}

  // 8.循环遍历,如果是对象,就取出key和值存放到空对象中,如果是数组,就去除下标和元素放到空数组中
  // 注意:for...in遍历对象会将其继承的属性也遍历出来,所以需要加hasOwnProperty进行判断是否是自身的属性
  for (const key in originValue) {
    if (originValue.hasOwnProperty(key)) {
      // 递归调用deepClone,如果对象属性值中还包含对象,就会再次进行拷贝处理
      newValue[key] = deepClone(originValue[key])
    }
  }

  // 9.对key为Symbol类型的情况进行处理
  // 拿到所有为Symbol类型的key
  const symbolKeys = Object.getOwnPropertySymbols(originValue)
  // for...of遍历取出所有的key,存放到新对象中
  for (const sKey of symbolKeys) {
    newValue[sKey] = deepClone(originValue[sKey])
  }

  // 10.深拷贝完成,将得到新对象返回
  return newValue
}

简单测试一下:

const s1 = Symbol('aaa')
const s2 = Symbol('bbb')

const obj = {
  name: 'curry',
  age: undefined,
  friends: {
    name: 'klay',
    age: 11
  },
  hobbies: ['篮球', '足球', '高尔夫'],
  map: new Map([[1, 'aaa'], [2, 'bbb'], [3, 'ccc']]),
  set: new Set([1, 2, 3]),
  s: s1,
  [s2]: 'abc'
}

const newObj = deepClone(obj)
console.log(newObj)

打印结果:

2.3.循环引用处理

我们自定义深拷贝的函数是通过递归来实现的,如果对象中有一个属性值指向了自己,那么在进行深拷贝时会陷入无限循环,这种情况也就是循环引用。

如果没有处理循环引用,那么就会不断递归,最终报错栈溢出:

  • 循环引用的处理,只需要拿到新创建的对象返回即可,所以必须将这个新对象保存下来,在遇到循环引用属性时,直接就可以拿到;
  • Map和WeakMap都可以实现对对象进行存储,这里使用WeakMap进行存储,原因是WeakMap对对象的引用是弱引用;
  • 只需要将原对象作为WeakMap中的key,其值对应存放我们新创建出来的对象即可,下一次递归时进行判断WeakMap中是否存有该对象,如果有就取出返回;
function deepClone(originValue, wMap = new WeakMap()) {
  // 1.判断传入的是否是一个函数类型
  if (typeof originValue === 'function') {
    // 将函数直接返回即可
    return originValue
  }

  // 2.判断传入的是否是一个Map类型
  if (originValue instanceof Map) {
    return new Map([...originValue])
  }

  // 3.判断传入的是否是一个Set类型
  if (originValue instanceof Set) {
    return new Set([...originValue])
  }

  // 4.判断传入的值是否是一个Symbol类型
  if (typeof originValue === 'symbol') {
    // 返回一个新的Symbol,并且将其描述传递过去
    return Symbol(originValue.description)
  }

  // 5.判断传入的值是否是一个undefined
  if (typeof originValue === 'undefined') {
    return undefined
  }

  // 6.判断传入的是否是对象类型,如果不是,说明是普通类型的值,直接返回即可
  if (!isObject(originValue)) {
    return originValue
  }

  // 循环引用处理:判断wMap中是否存在原对象,如果存在就取出原对象对应的新对象返回
  if (wMap.has(originValue)) {
    return wMap.get(originValue)
  }

  // 7.定义一个变量,如果传入的是数组就定义为一个数组
  const newValue = Array.isArray(originValue) ? [] : {}

  // 循环引用处理:将原对象作为key,新对象作为value,存入wMap中
  wMap.set(originValue, newValue)

  // 8.循环遍历,如果是对象,就取出key和值存放到空对象中,如果是数组,就去除下标和元素放到空数组中
  // 注意:for...in遍历对象会将其继承的属性也遍历出来,所以需要加hasOwnProperty进行判断是否是自身的属性
  for (const key in originValue) {
    if (originValue.hasOwnProperty(key)) {
      // 递归调用deepClone,如果对象属性值中还包含对象,就会再次进行拷贝处理
      newValue[key] = deepClone(originValue[key], wMap)
    }
  }

  // 9.对key为Symbol类型的情况进行处理
  // 拿到所有为Symbol类型的key
  const symbolKeys = Object.getOwnPropertySymbols(originValue)
  // for...of遍历取出所有的key,存放到新对象中
  for (const sKey of symbolKeys) {
    newValue[sKey] = deepClone(originValue[sKey], wMap)
  }

  // 10.深拷贝完成,将得到新对象返回
  return newValue
}

简单测试一下:

const s1 = Symbol('aaa')
const s2 = Symbol('bbb')

const obj = {
  name: 'curry',
  age: undefined,
  friends: {
    name: 'klay',
    age: 11
  },
  hobbies: ['篮球', '足球', '高尔夫'],
  map: new Map([[1, 'aaa'], [2, 'bbb'], [3, 'ccc']]),
  set: new Set([1, 2, 3]),
  s: s1,
  [s2]: 'abc'
}
// 循环引用
obj.self = obj

const newObj = deepClone(obj)
console.log(newObj)
console.log(newObj.self.self.self.self)

打印结果:

posted @ 2022-04-10 17:56  MomentYY  阅读(423)  评论(0编辑  收藏  举报