展开运算符合并对象与Object.assign()方法的区别

展开运算符（...）主要用于数组和对象的合并操作，它会将源数组或对象的所有元素逐个复制到目标数组或对象中。例如：

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let mergedObj = { ...obj1, ...obj2 }; // 结果是 { a: 1, b: 2, c: 3, d: 4 }

`Object.assign()`方法则是专门用于合并两个或更多对象，返回一个新的对象，新对象包含了所有传入对象的所有可枚举属性，如果属性名重复，则后面的值会覆盖前面的值：

let obj1 = { a: 1, b: 2 };
let obj2 = { c: 3, d: 4 };
let assignedObj = Object.assign({}, obj1, obj2); // 结果是 { a: 1, b: 2, c: 3, d: 4 }

区别总结：
1. **用途**：展开运算符更侧重于简单地合并基本类型的值或数组；而`Object.assign()`则用于合并复杂对象，支持深拷贝和保留已有属性。
2. **语法**：展开运算符使用简明，通过三个点和变量名实现；`Object.assign()`需要一个空对象作为第一个参数，后续的对象逐个追加。
3. **浅拷贝**：对于`Object.assign()`，如果属性引用的是同一个对象，那么结果也是共享这个对象；展开运算符不会创建新的引用，所以可以避免这个问题。

相关问题

object.assign和扩展运算法是深拷贝还是浅拷贝，两者区别

`Object.assign()` 和扩展运算符 `...` 都是浅拷贝。

浅拷贝是指只复制对象的一层属性，如果对象属性值是引用类型，则只是复制了引用地址，而不是复制整个引用对象。

举个例子，假设我们有一个对象 `obj1`：

const obj1 = { 
  name: 'Bob',
  age: 20,
  skills: ['JavaScript', 'CSS', 'HTML']
};

如果我们使用 `Object.assign()` 或者扩展运算符 `...` 来将 `obj1` 赋值给另外一个变量 `obj2`，并修改 `obj2` 的 `skills` 属性：

const obj2 = Object.assign({}, obj1);
obj2.skills.push('React');

console.log(obj1); // { name: 'Bob', age: 20, skills: ['JavaScript', 'CSS', 'HTML', 'React'] }
console.log(obj2); // { name: 'Bob', age: 20, skills: ['JavaScript', 'CSS', 'HTML', 'React'] }

可以看到，`obj1` 和 `obj2` 的 `skills` 属性都被修改了，这是因为 `Object.assign()` 和扩展运算符 `...` 只复制了 `obj1` 的一层属性，而 `skills` 属性是一个数组，只是复制了数组的引用地址，所以两个对象的 `skills` 属性指向同一个数组。

如果想要实现深拷贝，可以使用其他方法，如递归遍历对象并复制每一个属性，或者使用第三方库如 `lodash` 的 `cloneDeep()` 方法。

object.assign和扩展运算法是深拷⻉还是浅拷⻉

`Object.assign` 方法和扩展运算符都进行的是浅拷贝，而不是深拷贝。

浅拷贝意味着拷贝的是对象的引用，而不是对象本身。当使用 `Object.assign` 方法或者扩展运算符进行对象拷贝时，目标对象会获取源对象的属性值，但是如果属性值是对象，则只会拷贝对象的引用，而不是创建一个新的相同对象。

这意味着当你修改目标对象的属性值时，源对象的相应属性也会被修改。而如果你修改源对象的属性值，目标对象对应的属性值不会受到影响。

如果你需要进行深拷贝，即创建一个完全独立的对象副本，可以使用其他方法，比如递归复制对象的每个属性，或者使用库函数（如 lodash 的 `cloneDeep` 方法）来实现深拷贝。