深拷贝 数组 对象 完全实现

地址可收藏：

https://blog.csdn.net/Wave_explosion/article/details/121858994

收藏地址方便复用：

拖拽：https://blog.csdn.net/Wave_explosion/article/details/121921522

深拷贝
首先就是数组：

**

1.concat方法

**

  var arr1 = [1, 2, 3, 4]
    var arr2 = arr1.concat()//复制当前数组并返回实现深拷贝的副本,arr1不会受影响
    console.log(arr2);[1, 2, 3, 4]

var arr3 = arr1.concat([5, 6, 7])//将数组中的每一项都添加到深拷贝的副本数组中
console.log(arr3);//[1, 2, 3, 4, 5, 6, 7]

**

2.slice方法

**

var arr = [1, 2, 3, 4]

    var arr1 = arr.slice(1)//接收1到2个参数，一个参数时，返回参数指定调用方法数组位置到末尾的值组成的深拷贝副本
    console.log(arr1);//[2, 3, 4]

    var arr2 = arr.slice(0, 1)
    console.log(arr2);//[1]

**

3.扩展运算符

**
扩展运算符将一个数组转为用逗号分隔的参数序列

const arr = [1, 2, 3]

    const arr1 = [...arr]
    arr1.push(4)
    console.log(arr1);//[1, 2, 3, 4]
    console.log(arr);//[1, 2, 3]

注意，对于数组项是引用类型的数据，就无法实现深拷贝了。

const arr = [1, 2, 3, [4, 5, 6]]
    const arr1 = [...arr]
    console.log(arr1);
    arr1[3].push(7)
    console.log(arr1);
    console.log(arr);//[1, 2, 3, [4, 5, 6, 7]]更改副本，原数组也被改变

对象深拷贝：
先举个栗子 浅拷贝

var obj = {
      a: 1,
      b: 2
    }

    var obj1 = {}

    obj1 = obj//浅拷贝

    console.log(obj1);//{a: 1, b: 2}
    obj1.c = 3
    console.log(obj);//{a: 1, b: 2, c: 3},更改obj1，obj也被改变

**

1.Object.assign(目标对象， 源对象)，源对象的所有可枚举属性都复制到目标对象上

**

var obj = {
      a: 1,
      b: 2
    }

    var obj1 = {}

    Object.assign(obj1, obj)
    console.log(obj1);//{a: 1, b: 2}
    obj1.c = 3
    console.log(obj1);//{a: 1, b: 2, c: 3}
    console.log(obj);//{a: 1, b: 2},obj没有被改变，实现了深拷贝

**

2.JSON

**

var obj = {
      a: 1,
      b: 2
    }
// 将javascript值转为JSON字符串
var jsonText = JSON.stringify(obj)
console.log(jsonText);//{"a":1,"b":2}
// 把JSON字符串转为javascript值
var obj1 = JSON.parse(jsonText)
console.log(obj1);//{a: 1, b: 2}

// 修改obj1，看原对象值是否被改变
obj1.c = 3
console.log(obj1);//{a: 1, b: 2, c: 3}
console.log(obj);//{a: 1, b: 2},没被改变，实现了深拷贝

**

3.扩展运算符

**

 var obj = {
        a: 1,
        b: 2
      }

      var obj1 = {...obj}
      console.log(obj);//{a: 1, b: 2}
      console.log(obj1);//{a: 1, b: 2}
      obj.a = 33
      console.log(obj);//{a: 33, b: 2}
      console.log(obj1);//{a: 1, b: 2}没改变，实现了深拷贝

二、以上都不能完全实现深拷贝，下面方法请注意
**

1.JSON方法

**

var obj = {
  a: {
    c: 2,
    d: [9, 8, 7]
  },
  b: 4
}
var jsontext = JSON.stringify(obj)
var obj1 =JSON.parse(jsontext) 
console.log(obj);
console.log(obj1);

obj.a.d[0] = 666

console.log(obj);
console.log(obj1);

**

2.函数库lodash的_.cloneDeep方法

**

var _ = require('lodash')

var obj = {
  a: {
    c: 2,
    d: [9, 8, 7]
  },
  b: 4
}

var obj1 = _.cloneDeep(obj)

console.log(obj === obj1);//false

**

3.递归实现深拷贝

**

function copy(object) {
  // 判断传入的参数是数组还是对象
  let target = object instanceof Array ? [] : {}
  for (const [k ,v] of Object.entries(object)) {
    target[k] = typeof v == 'object' ? copy(v) : v
  }
  return target
}

var obj1 = copy(obj)
console.log(obj.a.d === obj1.a.d);//false