JavaScript更新对象属性时扩展运算符赋值与直接赋值的语法差异

两种写法的本质差异是是否改动原对象，具体区别和适用场景如下：

• 第一种写法：cartItem = {...cartItem, amount: newAmount}
  这是不可变操作，通过对象展开语法创建了一个全新的对象：会先把原cartItem的所有属性做浅拷贝放到新对象里，再覆盖amount属性的值为newAmount，最后把新对象的引用赋值给cartItem变量。原cartItem指向的旧对象不会有任何改动。
  适用场景：React/Vue等需要通过对象引用变化判断是否更新视图的框架，状态管理、需要保留原对象快照（比如实现撤销/重做功能）、依赖对象引用的监听逻辑（比如React useEffect的依赖项）等场景。
• 第二种写法：cartItem.amount = newAmount
  这是可变操作，直接在原对象上修改属性：不会改变cartItem持有的对象引用，只是修改了当前对象上amount属性的值，所有引用了这个对象的地方都会同步感知到属性变化。
  适用场景：不需要跟踪对象引用变化、确认没有其他逻辑依赖原对象状态的场景，性能上没有额外的对象拷贝开销，比第一种写法略高。

注意：对象展开语法只会做浅拷贝，如果cartItem内部包含嵌套对象，新对象和原对象会共享嵌套对象的引用，修改嵌套属性还是会互相影响。

内容的提问来源于stack exchange，提问作者IZ Dev