浅拷贝

拷贝出来的目标对象有着与原对象相同的属性值。如果我们的对象中嵌套了对象，那么像 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?