JS实现DeepClone

Jul 28

DeepClone 原理

这里简单叙述一下,通过 DFS 深度优先遍历重新构建整个数据树(暂且这么叫吧~),分两种情况

  • 基本数据类型,直接key = value赋值就行
  • 复杂数据类型,如Date, RegExp等,通过new关键字重新创建实例

简单实现

逻辑很简单

::: info

  • 若判断入参为 null基本数据类型Function,直接返回;
  • 若为数组,则创建新数组,遍历原数组的元素,使用 deepClone递归得到新元素;
  • 若为Object,则区分复杂对象简单对象即可,简单对象和数组流程一样。

:::

function deepClone(data) {
  if (data === null || typeof data !== 'object' || typeof data === 'function') {
    return data
  }
  if (Array.isArray(data)) {
    const newArr = []
    data.forEach((el) => {
      newArr.push(deepClone(el))
    })
    return newArr
  }
  if (typeof data === 'object') {
    if (data instanceof Date) {
      return new Date(data.getTime())
    }
    if (data instanceof RegExp) {
      return new RegExp(data.source)
    }
    const keys = Object.keys(data)
    const newObj = {}
    keys.forEach((key) => {
      newObj[key] = deepClone(data[key])
    })
    return newObj
  }
}