JavaScript 复制数组和复制对象 以及对 深拷贝探讨

前言

1. 引入

深度拷贝，大部分情况出在处理对象的情况中。
例如

因为直接赋值，是指针传递，这样的话，使得两个对象变量是相绑定的，修改其中一个，另外一个也跟着修改，大部分情况，我们只需要obj对象的值，而不需要传递obj对象给obj2，使得obj2是独立的。

2. 概念

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

1. 数组的深拷贝

1.1. for 循环实现数组的深拷贝

var arr = [1,2,3,4,5]
var arr2 = copyArr(arr)
function copyArr(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
     res.push(arr[i])
    }
    return res
}

1.2. slice 方法实现数组的深拷贝

测试如下：

更多slice内容请访问w3school JavaScript slice方法

1.3. concat 方法实现数组的深拷贝

更多concat内容请访问w3school JavaScript concat

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

测试如下：

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

运行结果如下：

2. 对象的深拷贝

2.1. 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
}

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

var obj = {
  id: '1',
  name: 'dai',
  age: '18'
}
var obj2 = JSON.parse(JSON.stringify(obj))

运行结果如下：

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

var obj = {
  id: '1',
  name: 'dai',
  age: '18'
}
var { ...obj2 } = obj

运行结果如下：

3. 结言

更多的数组以及对象的操作方法，可以参考lodash的源码，查看它的源码可以让你的js基础变得非常牢固。
使用es6提供的扩展运算符的方法实现深拷贝，简单，高效。并且，对象的深拷贝不会像使用 JSON 方法深拷贝一样，丢失函数等信息，只能用来深拷贝 JSON 数据格式的对象。推荐大家使用。