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

Answer 2

在解构赋值中，值位置成为赋值的变量。

当在声明的位置（如函数参数）中使用时，值位置中的名称在被赋值之前在当前作用域中声明。

如您的示例所示，值位置也可能描述要被解构的嵌套对象，然后期望一个与所描述的结构匹配的值，该值遵循上述相同的模式。

// The data object
const data = {foo: "bar"};

// A destructuring declaration and assignment.
// The assignment target's structure matches that of the data
let {foo: localVar} = data;

console.log(localVar); // bar

// Same, but using the existing `localVar` variable with no new declaration.
({foo: localVar} = {foo: "baz"});

console.log(localVar); // baz

对于解构函数参数感到困惑

2 个答案: