Question

我在ES6中进行了一些解构并遇到了意想不到的情况。这是发生的事情的一个简单版本。

let obj = {x: {y: 5}};
let {x: {y}} = obj;

console.log(x); // x is not defined
console.log(y); // 5

在我的用例中，我需要访问x和y。我原本预计x也会被解构。相反，为了达到预期的效果，我不得不这样做：

let obj = {x: {y: 5}};
let {x, x: {y}} = obj;

console.log(x); // {"y":5}
console.log(y); // 5

但是，我认为{x, x: {y}}看起来很奇怪而且不直观。是否有一个我不知道的破产秘密，或者这只是一个小小的解构陷阱？

Answer 1

此：

let {x: {y}} = obj;

是：

的缩写

let {x: {y: y}} = obj;

解构将冒号的左侧（键）与数据匹配，并将结果放入右侧（分配目标，通常是变量）。因此，x只是一个关键，而y既是键也是新声明的变量。

Answer 2

这不是一个陷阱，而是预期的行为，由destructuring syntax定义。

AssignmentPropertyList中可能有ObjectAssignmentPattern，AssignmentPropertyList中可能有嵌套AssignmentPropertyList。每个AssignmentPropertyList可以是AssignmentProperty或PropertyName : AssignmentElement。

在这种情况下

let {x, x: {y}} = obj;

第一个x为AssignmentProperty，第二个x为PropertyName。

嵌套解构背后的想法是为将被解构的嵌套属性提供路径。预期的行为是不为每个嵌套解构级别获取不需要的变量，必要时应明确地解析中间x。

对于熟悉它的开发人员，此语法中应该没有任何奇怪或非直观的内容。更接近代码所做的变化（可能更具可读性）是

let {x} = obj;
let {y} = x;

意外的解构行为，在深度解构时必须两次声明密钥

2 个答案: