Javascript: 克隆

浅克隆

• 又叫浅拷贝, 顾名思义, 仅仅克隆基本类型的数据，如果对象内部含有引用类型的数据，是不会进行克隆的，他们的仍然指向相同的地址。克隆就是复制，两者互不影响，(浅克隆就是不完全的克隆，或者说是半克隆).

• 经常使用的有 Object.assign, Array.from(), 展开语法 (Spread syntax).
• 当然, 如果确定没有引用类型, 使用 spread syntax 的效率比 Object.assign 其实更高. 展开运算符, 创建了一个副本, Object.assign 需要修改第一个参数对象, 其实两者的行为一致都是浅拷贝.

const d = {
  name: {
    v1: 'd2'
  }
};

const cloned = { ...d };
cloned.name.v1 = 99;
console.log(d.name.v1); // 99

Link

深克隆

• 深克隆才是完全意义上的克隆。使用文档的大致意思就是。副本和源对象的所有地址都不共享，浅克隆情况下就是引用类型的数据地址仍然是共享的，修改其中的任何一个，另外一个都会收到影响.

• 源对象和副本不共享相同的引用 (即不指向同一个地址), 深拷贝确保不会造成意料之外的更改
• 深拷贝有序列化 + 反序列化 (或者 structedClone), 但是很多 JS 对象是不可序列化的, 比如带有闭包的函数,dom api，但是更多的是借助 Object.assign 的浅拷贝方法来实现深拷贝效果
• structuredClone() 也可以进行深拷贝, 不过对浏览器的要求比较高.对一些旧的设备或者浏览器可能不适用.

const deepClone = (obj) => {
  return Object.assign({}, obj);
};

const obj = { name: 'clone' };
// 空对象作为第一个参数, 得到的新对象就是深拷贝
const newObj = Object.assign({}, name);

相关代码

const array = {
  name: 'array',
  list: {
    age: '18'
  }
};

const array_shadow_copy = Object.assign(array);

// normal
array_shadow_copy.name = 'newarray';

// array will be changed
array_shadow_copy.list = ['111'];