JavaScript 深浅拷贝

深浅拷贝

浅拷贝

首先可以通过 Object.assign 来解决这个问题，Object.assign 会拷贝所有的属性值到新的对象中，如果属性值是对象的话，拷贝的是地址。

还可以通过展开运算符 ... 来实现浅拷贝

深拷贝

可以通过 JSON.parse(JSON.stringify(object)) 来解决

但是该方法也是有局限性的

1. 会忽略 undefined
2. 会忽略 symbol
3. 不能序列化函数
4. 不能解决循环引用的对象

如果所需拷贝的对象含有内置类型并且不包含函数，可以使用 MessageChannel()

// structuralClone 结构克隆
function structuralClone(obj) {
  return new Promise(resolve => {
    const { port1, port2 } = new MessageChannel()
    port2.onmessage = ev => resolve(ev.data)
    port1.postMessage(obj)
  })
}

var obj = {
  a: 1,
  b: {
    c: 2
  }
}

obj.b.d = obj.b

// 注意该方法是异步的
// 可以处理 undefined 和循环引用对象
const test = async () => {
  const clone = await structuralClone(obj)
  console.log(clone)
}
test()