JavaScript内联解构为何失效？哈希颜色函数赋值异常解析

哈哈，这个坑我刚学JavaScript的时候也踩过！本质是把解构赋值的表达式特性和对象字面量语法搞混了，咱们掰开揉碎说清楚：

先还原你的代码场景 #

假设你的错误写法是这样的（根据描述推测）：

const newColor = { title: "dark blue", rating: 4 };
// 错误写法：试图一步到位解构+合并，结果把整个color替换成了newColor
const updatedColors = colors.map(color => 
  color.id === '-jbwsof' ? ({ ...color, title, rating } = newColor) : color
);

而你说的正常拆分写法是：

const newColor = { title: "dark blue", rating: 4 };
// 正确写法：先解构取属性，再合并对象
const updatedColors = colors.map(color => {
  if (color.id === '-jbwsof') {
    const { title, rating } = newColor; // 第一步：从newColor里拆出需要的属性
    return { ...color, title, rating }; // 第二步：扩展原对象，覆盖同名属性
  }
  return color;
});

错误写法的问题出在哪？ #

核心在于解构赋值是一个“赋值表达式”，而不是“属性提取工具”：

• 当你写({ title, rating } = newColor)时，它本质是一个赋值操作：把newColor里的title和rating赋值给当前作用域的变量，同时这个表达式的返回值是newColor本身（JavaScript里所有赋值表达式的返回值都是右侧的内容）。
• 如果你把这个赋值表达式放到箭头函数的返回值里，或者嵌入到对象字面量中，最终返回的会是newColor，而不是你想要的“原对象+新属性”的合并结果——这就导致原本只想更新title和rating，结果整个color对象被替换成了newColor。

拆分写法为什么能正常运行？ #

拆分的两步做了明确的分工：

1. const { title, rating } = newColor：这是声明式解构，它专门用来从对象中提取属性，创建局部变量title和rating，和赋值操作的返回值没关系。
2. { ...color, title, rating }：这是对象字面量的属性简写，相当于{ ...color, title: title, rating: rating }。它会先把原color的所有属性展开，再用新的title和rating覆盖同名属性，最终返回的是你想要的合并后的对象。

额外提个更简洁的写法 #

其实不用拆分两行，直接用对象扩展运算符也能达到同样效果，而且更简洁：

const updatedColors = colors.map(color => 
  color.id === '-jbwsof' ? { ...color, ...newColor } : color
);

这种写法是直接把newColor的所有属性展开到原对象上，自动覆盖同名属性，和拆分写法逻辑完全一致。

内容的提问来源于stack exchange，提问作者Atul Saini