请解释JavaScript Object相关的双重赋值及第三行代码执行逻辑

Hey there! Let's break down this JavaScript object double assignment clearly, using a common example that matches what you're curious about.

First, here's a typical code snippet involving this kind of operation:

// 1. 定义目标对象
const user = { username: 'Yash', role: 'Full-Stack Developer' };
// 2. 声明用于接收值的空变量
let targetName, targetRole;
// 3. 我们重点分析的双重赋值行
({ username: targetName, role: targetRole } = user);

什么是对象双重赋值？ #

这里的“双重赋值”其实是对象解构赋值的一种用法——它允许我们在一行代码里，把对象的多个属性值同时赋值给对应的变量，替代了原本需要写两行单独赋值语句（targetName = user.username 和 targetRole = user.role）的写法，这就是“双重”（多变量）赋值的由来。

第三行执行时的具体过程 #

我们一步步拆解第三行 ({ username: targetName, role: targetRole } = user) 的执行细节：

• 第一步：JavaScript 先计算右侧的 user 表达式，得到完整的对象 { username: 'Yash', role: 'Full-Stack Developer' }。
• 第二步：解析左侧的解构模式 { username: targetName, role: targetRole }。这是重命名解构语法：冒号左边是对象的属性名，右边是我们要赋值的变量名，意思是“把 user 里的 username 属性值取出，放到 targetName 变量中；把 role 属性值取出，放到 targetRole 变量中”。
• 第三步：括号 () 是关键。如果直接写 { ... } = user，JavaScript 会把开头的 {} 识别为代码块，而非解构模式。括号的作用是强制引擎把左侧结构当成表达式处理，确保赋值操作能正常执行。
• 第四步：赋值完成：targetName 被赋值为 'Yash'，targetRole 被赋值为 'Full-Stack Developer'。同时，整个赋值表达式的返回值是右侧的原始 user 对象（你可以用 console.log(({ username: targetName, role: targetRole } = user)) 验证这一点）。

另一种常见的“双重赋值”场景：链式赋值 #

还有一种常被称为双重赋值的模式，就是同时给对象属性和变量赋同一个值：

const statusObj = {};
let currentStatus;
currentStatus = statusObj.status = 'online'; // 第三行

这一行的执行顺序是从右到左：

• 首先，'online' 被赋值给 statusObj.status，此时 statusObj 变为 { status: 'online' }。
• 然后，这个赋值操作的结果（也就是 'online'）被赋值给 currentStatus。最终 currentStatus 和 statusObj.status 的值都是 'online'。

不管是哪种模式，这类双重赋值都是为了简化代码、减少重复语句，让代码更简洁易读。

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