js——深克隆

129 阅读1分钟

在js中,如果直接将引用类型赋值给一个变量,实际上是将改引用类型的指针赋值给变量,两个变量共享一个空间,导致修改其中一个变量而牵扯到另一个变量, 例如:

    const obj1 = {
        a: 1
    }
    const obj2 = obj1
    obj2.a = 2
    console.log(obj1.a,obj2.a) // 2 2

这可能不是我们想要的结果,这个时候我们需要对引用类型深克隆。

情况一:成员全是字符串

数组:['a','b','c']

方式一:数组方法。toString().split('') 或者 join('').split('')

    const arr = ['a','b','c']
    const arr2 = arr.toString().split(',')
    arr2[1] = 'aa'
    console.log(arr,arr2) // ['a','b','c'] ['aa','b','c']

方式二:JSON

    const arr = ['a','b','c']
    const arr2 = JSON.parse(JSON.stringify(arr))
    arr2[1] = 'aa'
    console.log(arr,arr2) // ['a','b','c'] ['aa','b','c']

方式三:数组合并

    const arr = ['a','b','c']
    const arr2 = [...arr] // [].concat(arr)
    arr2[1] = 'aa'
    console.log(arr,arr2) // ['a','b','c'] ['aa','b','c']

对象: {a: 1,b: '2', c: true,d: undefined,e: null}

方式一:对象合并

    const obj1 = {
          a: 1,
          b: '2',
          c: true,
          d: undefined,
          e: null
      }
    const obj2 = {...obj1} // Object.assign({},obj1)
    obj2.c = false
    console.log(obj1,obj2)// {a: 1, b: "2", c: true, d: undefined, e: null} {a: 1, b: "2", c: false, d: undefined, e: null}

方式二: JSON,同数组

情况二:存在任意类型

方式一: 递归

    function clone(data){
          let newData
          if (typeof data == 'object' && data != null) {
              newData = Array.isArray(data) ? [] : {}
              for (let key in data) {
                  newData[key] = clone(data[key])
              }
          } else {
              newData = data
          }
          return newData
      }