ES6深拷贝函数封装

同系列文章请查看：Github：pre-interview

前置：WeakMap数据类型

Map与WeakMap区别：

Map的键名可以是任意类型（{}、[]）
WeakMap的键名只能是对象

例：从垃圾回收来感受WeakMap

const oBtn1 = document.querySelector('#btn1')
const oBtn2 = document.querySelector('#btn1')

oBtn1.addEventListener('click', handleClick1, false)
oBtn2.addEventListener('click', handleClick2, false)

function handleClick1() {}
function handleClick2() {}

oBtn1.remove() // 删除节点，但是不能回收事件回调函数
oBtn2.remove()

// 必须使用这种方法删除回调
handleClick1 = null;
handleClick2 = null

使用WeakMap：

const oBtn1 = document.querySelector('#btn1')
const oBtn2 = document.querySelector('#btn1')

const oBtnMap = new WeakMap()

// 将节点与回调绑定在一起，垃圾回收时一起被回收（键名键值一起回收）
// 键名是弱引用
oBtnMap.set(oBtn1, handleClick1) 
oBtnMap.set(oBtn2, handleClick2)

oBtn1.addEventListener('click', handleClick1, false)
oBtn2.addEventListener('click', handleClick2, false)

function handleClick1() {}
function handleClick2() {}

// oBtn1.remove() // 删除节点，但是不能回收事件回调函数
//oBtn2.remove()

换一个角度看，WeakMap的键名必须是对象，弱引用才有意义。

深拷贝函数封装

拷贝之前，需要先判断原始值（origin）的数据类型再进行下一步操作。

function当做静态数据类型，不做特殊处理。

1）关于null和undefined的判断：

// null undefined
var a = undefined;
console.log(a == null); // true
console.log(a === null); // false

使用 origin === undefined 表达式就能判断origin是否为null和undefined值。

2）判断Date、RegExp类型数据：

if (origin instanceof Date) {
  return new Date(origin);
}
if (origin instanceof RegExp) {
  return new RegExp(origin);
}

3）判断 {} 或 []:

使用构造器

1 2	const obj = {} console.log(obj)

打印结果：

可以看到，字面量obj是通过其原型上的constructor使用new Object构造出来的，那么是否可以自己手动构造一个obj呢？

const obj = {}
const newObj = new obj.constructor()
console.log(obj) // {}
newObj.a = 1
console.log(newObj); // {a:1}

同理，数组：

const arr = []
const newArr = new arr.constructor()
console.log(arr);
newArr.push(1)
console.log(newArr);

知道这点，直接使用 const target = new origin.constructor() 生成一个新 {} 或 [] 即可，不用再判断了。

封装函数1

function deepClone(origin) {
  if (origin === undefined || typeof origin !== 'object') { // 排除null、undefined、非object值
    return origin;
  }
  if (origin instanceof Date) {
    return new Date(origin);
  }
  if (origin instanceof RegExp) {
    return new RegExp(origin);
  }

  // [] -> [], {} -> {}, 不需要判断是对象还是数组
  const target = new origin.constructor()

  for (let k in origin) {
    if (origin.hasOwnProperty(k)) {
      target[k] = deepClone(origin[k])
    }
  }

  return target;
}

测试1

var obj = {
  name: 'yesmore',
  age: 18,
  info: {
    hobby: ['travel', 'piano', {
      a: 1
    }],
    career: {
      teacher: 4,
      engineer: 9
    }
  }
};

const newObj = deepClone(obj)
newObj.info.hobby[2].a = 1234
console.log(newObj);

结果：

测试2

let test1 = {}
let test2 = {}
test2.test1 = test1
test1.test2 = test2
console.log(deepClone(test2));

报错：
Uncaught RangeError: Maximum call stack size exceeded

原因：test1和test2分别作为属性值赋值给对方，在拷贝时，会发生重复拷贝，简而言之，就是缺少记录是否拷贝。

解决：使用 hashMap 哈希表方式记录键名是否存在，通过 WeakMap 实现。

封装函数2

function deepClone(origin, hashMap = new WeakMap()) {
  if (origin === undefined || typeof origin !== 'object') { // 排除null、undefined、非object值
    return origin;
  }
  if (origin instanceof Date) {
    return new Date(origin);
  }
  if (origin instanceof RegExp) {
    return new RegExp(origin);
  }

  const hashKey = hashMap.get(origin); // 寻找键是否存在
  if (hashKey) {
    return hashKey
  }

  // [] -> [], {} -> {}, 不需要判断是对象还是数组
  const target = new origin.constructor()
  hashMap.set(origin, target)
  for (let k in origin) {
    if (origin.hasOwnProperty(k)) {
      target[k] = deepClone(origin[k], hashMap)
    }
  }

  return target;
}

测试3

let test1 = {}
let test2 = {}
test2.test1 = test1
test1.test2 = test2
console.log(deepClone(test2));

结果：

Tips: Please indicate the source and original author when reprinting or quoting this article.