应用场景

• 在vue开发过程中，我们可能会遇到要对双向绑定的数据拷贝一个副本来供我们使用，如果直接浅拷贝会造成一定的风险。比如： 在拷贝后我们要更改副本， 这是由于双向绑定的原因， 之前的数据也会改变， 会出现问题。 这是新手容易忽略的地方。

解决方案

• 实现深拷贝

1. JSON

const obj1 = JSON.parse(JSON.stringify(obj2))

2. 递归

// 判断是不是数组和对象
function isObject (o) {
  return Object.prototype.toString.call(o) === '[object Array]' || Object.prototype.toString.call(o) === '[object Object]'
}
// 实现深拷贝函数
// 利用Map数据结构来解决循环引用造成死循环的问题
function deepclone (o, hash = new Map()) {
  //判断类型，只适用于array和object
  if (!isObject(o)) {
    return o
  }
  // 判断循环引用
  if (hash.has(o)) {
    return hash.get(o)
  }
  const obj = Array.isArray(o) ? [] : {}
  hash.set(o, obj)
  for (const k in o) {
    if (isObject(o[k])) {
      obj[k] = deepclone(o[k], hash)
    } else {
      obj[k] = o[k]
    }
  }
  return obj
}