Object.assign 和扩展运算符...，深拷贝和浅拷贝

Object.assign

• 用法: Object.assign(target, ...sources)
• 功能: 将一个或多个源对象的可枚举属性复制到目标对象，并返回目标对象。
• 特点:
  • 会改变目标对象（即原地修改）。
  • 只会复制源对象的可枚举属性。
  • 对于同名属性，后面的源对象会覆盖前面的源对象的属性值。
• 示例

const target = { a: 1, b: 2 };
 const source = { b: 3, c: 4 }; 
const result = Object.assign(target, source); 
console.log(result); // { a: 1, b: 3, c: 4 } 
console.log(target); // { a: 1, b: 3, c: 4 } (target 被修改)

扩展运算符 ...

• 用法: { ...obj }
• 功能: 创建一个新的对象，将可枚举属性从一个或多个源对象拷贝到新对象中。
• 特点:
  • 不会改变原始对象，而是返回一个新的对象。
  • 同样会覆盖同名属性，后面的属性会覆盖前面的属性。
• 示例：

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 }; 
const newObj = { ...obj1, ...obj2 };
console.log(newObj); // { a: 1, b: 3, c: 4 } 
console.log(obj1); // { a: 1, b: 2 } (obj1 没有被修改)

总结

• 如果需要修改已有对象，可以使用 Object.assign。
• 如果希望保持原始对象不变并生成新对象，使用扩展运算符 ... 更为合适。

性能比较

1. 性能差异:

   • Object.assign: 在处理大量属性时，通常性能稍好一些，尤其是当目标对象较大且修改不频繁时，因为它是直接在目标对象上进行操作。
   • 扩展运算符 ...: 由于它总是创建一个新的对象，因此在处理大对象时可能会稍慢，因为需要分配内存并复制属性。

2. 使用场景:

   • 如果只需要合并少量对象或属性，性能差异可能不明显。
   • 在高频率更新或大量数据的情况下，应考虑性能影响。

深拷贝与浅拷贝

• 浅拷贝:
  • 以上两者都是浅拷贝，这意味着它们只复制对象的第一层属性。如果对象的属性是引用类型（如数组或对象），那么这些引用仍然指向原始对象的同一内存地址。

• 深拷贝

• JSON 方法:

• const deepClone = JSON.parse(JSON.stringify(original));
  （注意：这种方法无法处理函数、日期、undefined、Symbol 等特殊值）

• 递归函数: 自定义深拷贝函数。

• 库: 使用像 Lodash 的 _.cloneDeep() 等库。