JS实现深拷贝的三种方式

一、概念

• 深拷贝：在堆内存中重新开辟一个存储空间，克隆一个一模一样的对象
• 浅拷贝：不在堆内存中重新开辟空间，只复制栈内存中的引用地址

方式一：递归实现深拷贝 (推荐)

• 在 src—utils—tool.js 中

// 递归实现深拷贝
const deepCopy = obj => {
  const objCopy = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === 'object') {
    for (const key in obj) {
      // 判断 obj 子元素是否为对象，如果是递归复制，否简单复制
      if (obj[key] && typeof obj[key] === 'object') {
        objCopy[key] = deepCopy(obj[key])
      } else {
        objCopy[key] = obj[key]
      }
    }
  }
  return objCopy
}

export { deepCopy }

方式二：JSON.parse(JSON.stringify()) (不推荐使用，有坑)

• 普通对象(当对象内容项为 number、string、boolean 时)可以用该方式进行深拷贝
• 当对象内容项为 undefined、null、Date、RegExp、function、error 时，使用 JSON.parse(JSON.stringify()) 进行深拷贝会出问题

方式三：第三方库 lodash 中的 cloneDeep() 方法 (看情况而定)

• 如果项目中只需要一个深拷贝的功能，这种情况下为了一个功能引入整个第三方库就显得很不值得了。不如写一个递归函数对于项目来说性能更好
• lodash.cloneDeep() 方法底层使用的本来就是递归方法。只是在外层又封装了一层 cloneDeep 的主体函数 baseClone