数组以及对象的深拷贝的方法

文章目录

1. 1. 数组的深拷贝
   1. 1.1. 1.for 循环实现数组的深拷贝
   2. 1.2. 2.slice 方法实现数组的深拷贝
   3. 1.3. 3.concat 方法实现数组的深拷贝
   4. 1.4. 4.ES6扩展运算符实现数组的深拷贝
2. 2. 对象的深拷贝
   1. 2.1. 1.万能的for循环实现对象的深拷贝
   2. 2.2. 2.转换成json再转换成对象实现对象的深拷贝
      1. 2.2.1. 3.扩展运算符实现对象的深拷贝
3. 3. 注意
   1. 3.1. 补充一个数组去重的方法

因为javascript分原始类型与引用类型（与java、c#类似）。Array是引用类型，所以直接用=号赋值的话，只是把源数组的地址(或叫指针)赋值给目的数组，并没有实现数组的数据的拷贝。

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

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

数组的深拷贝

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

for循环是非常好用的。如果不知道高级方法，通过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
}

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

他是将原数组中抽离部分出来形成一个新数组。我们只要设置为抽离全部，即可完成数组的深拷贝。代码如下：

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

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

它是用于连接多个数组组成一个新的数组的方法。那么，我们只要连接它自己，即可完成数组的深拷贝。代码如下：

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

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

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

对象的深拷贝

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.转换成json再转换成对象实现对象的深拷贝

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

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

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

注意

2017年10月31日补充，使用es6提供的扩展运算符的方法实现深拷贝，简单，高效。并且，对象的深拷贝不会像使用 JSON 方法深拷贝一样，丢失函数等信息，只能用来深拷贝 JSON 数据格式的对象。推荐大家使用。

补充一个数组去重的方法

function dedupe(array) {
  return [...new Set(array)]
}
var arr = [1,2,2,3,3,4,4,5,5]
console.log(dedupe(arr))