浅拷贝
拷贝出来的目标对象有着与原对象相同的属性值。如果我们的对象中嵌套了对象，那么像
object.assign和扩展运算符（...）这样的浅层复制机制将只创建根级对象的副本，但深层对象仍将被共享。
新对象赋值
最直接的方式是新定义对象，在对其赋值：
let md = { name: 'lio', url: 'lio-zero.github.io' }
let obj = {
name: md.name,
}
obj.name = 'lion'
console.log(md) // { name: "lio", url: "lio-zero.github.io" }
操作对象，上面方法显然不太灵活，这时使用循环，复制过程需要改变一些数据，可以使用这种方法
let md = { name: 'lio', url: 'lio-zero.github.io' }
let obj = {}
for (const key in md) {
obj[key] = md[key]
}
obj.name = 'lion'
console.log(md) // { name: "lio", url: "lio-zero.github.io" }
使用 concat 方法
-
concat方法用于连接两个或多个数组。该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
let arr = [1, 2, 3]
const arr2 = arr.concat()
arr2[1] = 23
console.log(arr) // [1, 2, 3]
使用 slice 方法
-
slice和concat的用法类似。
let arr = [1, 2, 3]
const arr2 = arr.concat()
arr2[1] = 23
console.log(arr) // [1, 2, 3]
使用 Object.assign 合并
let md = { name: 'lio', url: 'lio-zero.github.io' }
let obj = Object.assign({}, md)
obj.name = 'lion'
console.log(md) // { name: "lio", url: "lio-zero.github.io" }
使用 ... 扩展运算符
更加简便的方式是使用 ES6 的扩展运算符（...）
let md = { name: 'lio', url: 'lio-zero.github.io' }
let obj = { ...md }
obj.name = 'lion'
console.log(md) // { name: "lio", url: "lio-zero.github.io" }
浅拷贝存在的问题
就向刚一开始说的，上面都存在一个问题，假如对象中存在更深层级的对象，这些较深的对象一旦发生了改变，则原对象和引用原数据的对象都将改变。
const arr = [1, 2, { name: 'K.O' }]
const arr2 = arr.concat()
arr2[2].name = 'O.K'
console.log(arr) // [1, 2, { name: 'O.K'}]
console.log(arr2) // [1, 2, { name: 'O.K'}]
可以看到，我们访问了 arr 和 arr2 都改变了。
这时，我们就需要深度创建一个对象的副本。
深拷贝
深拷贝：拷贝出来的目标对象有着与原始对象相同的属性值，且嵌套的对象更改也不会影响到原始对象的改变，也就是它们之间有着相同的数据，但数据存储在不同的内存地址中。
JSON.stringify/parse
如果对象足够简单，我们可以使用 JSON.stringify 将其转换为字符串，然后使用 JSON.parse 将其转换回 JavaScript 对象。
let obj = {
name: 'MSN',
user: {
name: 'BBC'
},
arr: [1, 2, 3]
}
let newObj = JSON.parse(JSON.stringify(obj))
newObj.user.name = 'K.O'
console.log(JSON.stringify(obj, null, 2))
/*
{
"name": "MSN",
"user": {
"name": "BBC"
},
"arr": [
1,
2,
3
]
}
*/
console.log(JSON.stringify(newObj, null, 2))
/*
{
"name": "MSN",
"user": {
"name": "K.O"
},
"arr": [
1,
2,
3
]
}
*/
可以看到，我们成功了，但这是有局限性的。如果您的对象有任何不能用 JSON 字符串表示的数据（例如函数）。那么这些数据将丢失！
其他情况还有：
- 会忽略
undefined和symbol类型 - 不能解决循环引用的对象
递归
更好的做法是递归调用浅拷贝，把所有属于对象的属性类型都遍历赋给另一个对象。
考虑：对象多层次的赋值方式，考虑其中存在数组情况
function deepCopy(obj) {
let res = obj instanceof Array ? [] : {}
for (const [k, v] of Object.entries(obj)) {
res[k] = typeof v == 'object' ? deepCopy(v) : v
}
return res
}
let newObj = deepCopy(obj)
newObj.user.name = 'K.O'
newObj.arr.push(4)
console.log(JSON.stringify(obj, null, 2))
/*
{
"name": "MSN",
"user": {
"name": "BBC"
},
"arr": [
1,
2,
3
]
}
*/
console.log(JSON.stringify(newObj, null, 2))
/*
{
"name": "MSN",
"user": {
"name": "K.O"
},
"arr": [
1,
2,
3,
4
]
}
*/
其他方法
- 使用函数库 lodash 的
_.cloneDeep方法 - JQuery 的
JQuery.extend()方法
更多资料
- 深拷贝的终极探索（90%的人都不知道）
- 如何写出一个惊艳面试官的深拷贝?
- JavaScript专题之深浅拷贝
- What is the most efficient way to deep clone an object in JavaScript?