varを使用しないオブジェクトの分解


97

オブジェクトの構造化のvar前にキーワードがない場合、オブジェクトの構造化がエラーをスローするのはなぜですか?

{a, b} = {a: 1, b: 2};

投げる SyntaxError: expected expression, got '='

次の3つの例は問題なく動作します

var {a, b} = {a: 1, b: 2};
var [c, d] = [1, 2];
    [e, f] = [1, 2];

おまけの質問:なぜvar配列の構造化解除が必要ないのですか?

私は何かをする問題に遭遇しました

function () {
  var {a, b} = objectReturningFunction();

  // Now a and b are local variables in the function, right?
  // So why can't I assign values to them?

  {a, b} = objectReturningFunction();
}

回答:


158

この問題は{...}、JavaScriptで演算子が複数の意味を持つことに起因しています。

Statement{の先頭にが表示されている場合、それは常に割り当てられないブロックを表します。それは、後に表示されている場合ステートメントとして表現、それは、オブジェクトを表します。

グループ化括弧のようにStatementvarが後に続くことができないので、はこれを区別するのに役立ちます

( {a, b} = objectReturningFunction() );

彼らのドキュメントから:https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Assignment_without_declaration

注:宣言なしでオブジェクトリテラルの構造化代入を使用する場合は、代入ステートメントを囲む括弧(...)が必要です。

{a、b} = {a:1、b:2}は、有効なスタンドアロン構文ではありません。左側の{a、b}はブロックであり、オブジェクトリテラルではないためです。

ただし、({a、b} = {a:1、b:2})は有効です。var{a、b} = {a:1、b:2}も同様です。

(...)式の前にセミコロンを付ける必要があります。そうしないと、前の行で関数を実行するために使用できます。


ステートメントの後半に式として現れる場合は、オブジェクトを表します。これは、グループ化の括弧内にブロックスコープを
含める

グループ化の括弧のヒントは素晴らしいものです。
James Smith、

これは私を困惑させた見事にあいまいな知識のビットです。これにより、スコープ全体の構造化が可能になります(そうですね、もちろん、変数を宣言する必要があります)。しかし、Promiseチェーンを使用する際の制約は解決されますが、Promiseチェーンの1つのステップから別のステップで解決された複数の変数を使用する必要があり、混乱を招くことはありません。ありがとう。
Kevin Teljeur 2018年

21

セミコロンなしでJavascriptを記述する場合、「宣言なしの代入」構文の前にセミコロンを付けて、予測どおりに機能させる必要があります。

let a, b

;({a, b} = objectReturningFunction()) // <-- note the preceding ;

それが私を見つけたときにこれを強調したかっただけで、うまくいけない理由や、のようなコードフォーマッタで奇妙な結果を生成する理由を理解する時間を他の人に節約できれば幸いprettierです。

確かに、それは実際には受け入れられた回答(引用されたドキュメントの最後の行)にありますが、特に例を見ずに見逃すのは簡単です!


うん。セミコロンを使う理由!
jfriend00

0

ここに別の方法があります:

let {} = {a, b} = objectReturningFunction()

長所:

  • 括弧は不要
  • セミコロンは不要

短所:

  • 全く奇妙はより私の意見ではあるが、少し奇妙に見えない!(){...}() 生命維持
  • なぜそこにあるのか混乱するかもしれません

IIFEの方がと比較できるような感じ;({ a, b })ですlet {} = { ... }。素敵なトリックですが。:)
shuckster

@ proto-n、+ 1、非常に賢いアイデア。どうやってこれに出くわしましたか?
パセリエ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.