手写深拷贝

146 阅读1分钟

image.png

方法一,用 JSON:

const b = JSON.parse(JSON.stringify(a))

这个方法有如下缺点:

  1. 不支持 Date、正则、undefined、函数等数据

  2. 不支持引用(即环状结构)

方法二,用递归:

  1. 递归

  2. 判断类型

  3. 检查环 (a.self = a

image.png

  1. 不拷贝原型上的属性(只拷贝a.hasOwnProperty(key)属性)
const deepClone = (a, cache) => {
  if (!cache) {
    cache = new Map() // 缓存不能全局,最好临时创建并递归传递。由于 key 是对象,所以不能是 Object,应该是 Map
  }
  if (a instanceof Object) { // 不考虑跨 iframe
    if (cache.get(a)) { return cache.get(a) }
    let result
    if (a instanceof Function) {
      // 保证相同的输入有相同的输出,不能百分百拷贝
      if (a.prototype) { // 有 prototype 就是普通函数
        result = function () { return a.apply(this, arguments) }
      } else { // 没有 prototype 就是箭头函数(没有考虑另外两种特殊函数:generator 函数 和 async 函数)
        result = (...args) => { return a.call(undefined, ...args) }
      }
    } else if (a instanceof Array) {
      result = []
    } else if (a instanceof Date) {
      result = new Date(a - 0)
    } else if (a instanceof RegExp) {
      result = new RegExp(a.source, a.flags)
    } else {
      result = {}
    }
    cache.set(a, result)
    for (let key in a) {
      if (a.hasOwnProperty(key)) { // 只拷贝 a 自有的属性,继承得到的属性在原型上不拷贝
        result[key] = deepClone(a[key], cache)
      }
    }
    return result
  } else {
    return a
  }
}


// 使用
const a = {
  number: 1, bool: false, str: 'hi', empty1: undefined, empty2: null,
  array: [
    { name: 'steven', age: 18 },
    { name: 'jacky', age: 19 }
  ],
  date: new Date(2000, 0, 1, 20, 30, 0),
  regex: /.(j|t)sx/i,
  obj: { name: 'steven', age: 18 },
  f1: (a, b) => a + b,
  f2: function (a, b) { return a + b }
}
a.self = a

const b = deepClone(a)

b.self === b // true
b.self = 'hi'
a.self !== 'hi' //true