用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，正则表达式对象无法拷贝
