javascript - 对解构函数参数感到困惑

Question

在下面的示例中，为什么 whois() 函数可以访问 displayName2 和 name1？

function whois({displayName: displayName2, fullName: {firstName: name1}}){
  console.log(`${displayName2} is ${name1}`)
}

let user = {
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
}
whois(user) // "jdoe is John"

在外行看来，它应该可以访问 displayName 和 fullName.firstName。解构看起来像反向的 JSON。

引擎盖下发生了什么？

Answer 1

displayName 和 firstName 是 assigned new names - displayName2 和 firstName1 接受，要访问这些值，您需要使用别名。

因为只有别名被定义为变量，尝试使用旧名称访问值，将抛出“变量未定义”错误。

const destructure1 = ({ a: aa }) => console.log(aa);
destructure1({ a: 5 }); // gets the value

const destructure2 = ({ a: aa }) => console.log(a);
destructure2({ a: 5 }); // throw an error because a is not defined

此外，当使用 computed property names 解构时，您必须将它分配给一个新的变量名:

const prop = 'a';

const destructure1 = ({ [prop]: aa }) => console.log(aa);
destructure1({ a: 5 }); // gets the value