深拷贝&浅拷贝

用javascript的同学都知道，在这个语言中除了null以外的对象使用=赋值，实际上都是引用。具体表现如下

let user = {name: 'test', age: 20}
let copyUser = user
copyUser.name = 'copy'

console.log(user) // {name: 'copy', age:20}
console.log(copyUser) // {name: 'copy', age:20}

其实在内部中，user，copyUser他们都是指向了同一个内存地址，可以理解为指针。

在实际开发中我们通常情况下都不期望源数据被改变，不然整个项目会变得难以维护。那么到底如何切断这两者之间的关系呢？我复制一个一模一样的对象再复制给copyUser不就好了？

在javascript中用来存储数据的对象类型有对象{}，数组[]，ES6还出了Set，Map，WeakMap，WeakSet。由于我只是浅薄，这里只讨论对象，数组的拷贝。只要将被拷贝对象的key一个一个的赋值给一个新的对象就实现了。

浅拷贝

浅拷贝也就是将这个对象最外层拷贝一次，言下之意就是如果对象中某个属性也是对象不拷贝。 具体描述就是

user = {
  name: 'test', 
  address: {
    address1: 'shanghai', 
    address2: 'beijing'
  }
}

对上面这个user对象中进行浅拷贝，会忽略address也是个对象。

function shallowClone(obj) {
  if (Array.isArray(obj)) {
    let newArray = []
    obj.forEach(item => newArray.push(item))
    return newArray
  } else if (typeof obj === 'object') {
    let newObj = {}
    Object.keys(obj).forEach(key => (newObj[key] = obj[key]))
    return newObj
  } else {
    return obj
  }
}

这就是一个浅拷贝简单的实现，测试一下

let user = { name: 'test', age: 20, address: ['address1', 'address2'] }
let cloneUser = shallowClone(user)
cloneUser.name = 'clone'

console.log(user)
// address: (2) ["address1", "address2"]
// age: 20
// name: "test"
-------------------------------------
console.log(cloneUser)
// address: (2) ["address1", "address2"]
// age: 20
// name: "clone"

在clone.name改变后，源数据中user的name却没有改变，达到了我们期望的结果，那么如果改变address的元素呢。

let user = { name: 'test', age: 20, address: ['address1', 'address2'] }
let cloneUser = shallowClone(user)
cloneUser.address[0] = 'shanghai'

console.log(user)
// address: (2) ["shanghai", "address2"]
// age: 20
// name: "test"
console.log(cloneUser)
// address: (2) ["shanghai", "address2"]
// age: 20
// name: "test"

可以看到结果是一模一样的，这就是浅拷贝，只会赋值一层。
实现浅拷贝还有其他的技巧：

使用concat()，slice()
使用ES6的解构

深拷贝

深拷贝顾名思义就是把所有对象中的所有属性都彻底复制一份出来，那么对象的属性是对象，对象的属性的属性的属性。。。也是个对象，也都彻底拷贝。在实现的时候，先判断若该属性是个对象或者数组再递归的调用本身就可以了啊。直接上代码

function deepClone(obj) {
  if (Array.isArray(obj)) {
    return obj.map(deepClone)
  } else if (typeof obj === 'object') {
    let newObj = {}
    Object.keys(obj).forEach(key => (newObj[key] = deepClone(obj[key])))
    return newObj
  } else {
    return obj
  }
}

应用实例

let user = {
  name: 'test',
  age: 20,
  address: ['address1', 'address2'],
  a: { a: 123 }
}
let cloneUser = deepClone(user)
cloneUser.address[0] = 'shanghai'
cloneUser.a.a = 321

console.log(user)
// a: {a: 123}
// address: (2) ["address1", "address2"]
// age: 20
// name: "test"
console.log(cloneUser)
// a: {a: 321}
// address: (2) ["shanghai", "address2"]
// age: 20
// name: "test"

实现深拷贝的其他方法

JSON.parse(JSON.stringfy(obj)) // 这样的问题是function，正则表达式对象无法拷贝

深拷贝&浅拷贝

浅拷贝

深拷贝

推荐阅读更多精彩内容