JavaScript对象解构赋值原理及示例代码运行逻辑疑问解答

代码整体运行逻辑 #

你给出的代码最终会在控制台输出jdoe is John，运行流程如下：

1. 首先定义了user对象，包含3个属性：数值类型的id、字符串类型的displayName，以及对象类型的嵌套属性fullName，后者内部又包含firstName和lastName两个字符串属性。
2. whois函数的参数使用了对象解构语法，可以直接从传入的对象中提取指定属性，不需要手动写点操作符逐层取值。
3. 调用whois(user)时，会把user对象传入函数，触发参数解构逻辑，提取到对应值后拼接为模板字符串返回，最终被console.log打印。

你的疑问解答 #

1. fullName: {firstName: name}是不是将一个对象赋值给fullName？ #

不是，这是嵌套对象解构的固定语法，不存在给fullName赋值的操作。

对象解构语法中，冒号:的作用是「重命名提取的属性」，或是标记嵌套结构的解构路径，和常规对象字面量里赋值给键名的逻辑完全不同。
这里的冒号是告诉解析器：先从传入的顶层参数对象里找到fullName属性，因为它本身是对象，所以需要继续对它内部的属性做解构。

2. 代码中的name变量具体是如何工作的？ #

在嵌套解构的第二层，firstName: name的逻辑是：

• 从fullName对象中提取firstName属性的值
• 把这个值赋值给新的变量name，之后你就可以在函数内部直接使用name变量，它的实际值就是user.fullName.firstName，也就是John。

如果不用解构语法，等效的代码写法如下，你可以对照理解：

function whois(user) {
  const displayName = user.displayName;
  const name = user.fullName.firstName;
  return `${displayName} is ${name}`;
}

补充小知识点：如果你不需要重命名，想直接用firstName作为变量名，参数解构可以写成{displayName, fullName: {firstName}}，运行效果是一样的，只是变量名从name变成了firstName。

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