予期せぬ破棄の振る舞い、より深く破壊するときにキーを2回宣言しなければならない

Question

私はES6でいくつかの破壊を行い、予期しない状況に遭遇しました。ここには何が起こったのtrivializedバージョンです。私の使用例で

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

これは落とし穴ではなく、予想される動作です。destructuring syntaxによって定義されています。

ObjectAssignmentPatternにはAssignmentPropertyListがあり、AssignmentPropertyListにはAssignmentPropertyListがネストされている場合があります。それぞれAssignmentPropertyListはAssignmentPropertyまたはPropertyName : AssignmentElementのいずれかです。この場合

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

第xは、第xがPropertyNameで、AssignmentPropertyあります。

ネストされた構造解除の背後にあるアイデアは、構造が破壊されるネストされたプロパティのパスを提供することです。期待される振る舞いはではないネストされた構造解除の各レベルで望ましくない変数を取得する場合は、中間のxを必要に応じて明示的に破棄する必要があります。

これに精通している開発者にとっては、この構文では奇妙なものや直感的なものはありません。

let {x: {y}} = obj; 

がの省略形である：

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

な破壊はコロンと一致するコードが何に近い（そしておそらくより読みやすい）でばらつきが

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

Answer 2

これです（キー）をデータと照らし合わせ、結果を右側（代入対象、通常は変数）に配置します。したがって、xはキーに過ぎず、yはキーと新しく宣言された変数です。