javascript 数组以及对象的深拷贝

数组的深拷贝
在js中，数组和对象的复制如果使用=号来进行复制，那只是浅拷贝。如下图演示：

image
如上，arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。
因此，数组以及对象的深拷贝就是javascript的一个基本功了。

for 循环实现数组的深拷贝

var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)[图片上传中...(image-157e9d-1528367747303)]

function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}

slice 方法实现数组的深拷贝(arrayObject.slice(start,end)包含start不包含end)

该方法并不会修改数组，而是返回一个子数组

var arr = [1,2,3,4,5]
var arr2 = arr.slice(0)
arr[2] = 5
console.log(arr)
console.log(arr2)

image

concat 方法实现数组的深拷贝

var arr = [1,2,3,4,5]
var arr2 = arr.concat()
arr[2] = 5
console.log(arr)
console.log(arr2)

ES6扩展运算符实现数组的深拷贝

var arr = [1,2,3,4,5]
var [ ...arr2 ] = arr
arr[2] = 5
console.log(arr)
console.log(arr2)

对象的深拷贝

for循环实现对象的深拷贝

var obj = {
  name: 'FungLeo',
  sex: 'man',
  old: '18'
}
var obj2 = copyObj(obj)
function copyObj(obj) {
  let res = {}
  for (var key in obj) {
    res[key] = obj[key]
  }
  return res
}

转换成json再转换成对象实现对象的深拷贝

var obj = {
  name: 'FungLeo',
  sex: 'man',
  old: '18'
}
var obj2 = JSON.parse(JSON.stringify(obj))

扩展运算符实现对象的深拷贝

var obj = {
  name: 'FungLeo',
  sex: 'man',
  old: '18'
}
var { ...obj2 } = obj
obj.old = '22'
console.log(obj)
console.log(obj2)

object.assign实现对象的深拷贝

var arr= [{"a":11111},{"b":11111},{"c":11111},{"d":11111},{"e":11111},{"f":11111},{"g":11111}];
var arr1 = [];
for(var i=0;i<arr.length;i++){
     arr1.push(Object.assign({},arr[i]))
}
arr1[0]['a']=22222;
console.log(arr,arr1);

运行结果如下

20171031143034799.png