HTML5 - 提供原生的 JavaScript DeepCopy 方法 structuredClone

在規範內提供了一個可以 Deep Copy 的功能 - structuredClone() JavaScript 中 Copy Object 的時候基本上都是淺 Copy，意指當修改副本的值的是後，也會影想到原本的 Object

const origin = {
  name:  "攻城獅"
  wife: {
      name: "pekora",
      age: 112
  }
};

const isCopy = {...origin};

// 修改值會影響原本 Object
isCopy.wife.age = 111;
console.log(origin.wife.age); // 111

JavaScript 對於非原始資料型態的複製方式會不同，例如 Array 和 Object 會複製其 reference。而在 JavaScript 常見的方式就是使用了像是 lodash 的 cloneDeep() 等第三方 Library 來做處理。或是直接用 JSON 的方式作轉換

const isCopy = JSON.parse(JSON.stringify(origin));

但是之後將會提供更原生的方式來去做到這件事情，就是使用 structuredClone()

const isCopy = structuredClone(origin);