ES6 アレイの分割により予期せぬ動作が発生したのはなぜですか?

ES6 の配列の構造化: 予期しない動作を理解する

ES6 では、配列の構造化により、配列から特定の要素を抽出し、それらを配列に割り当てることができます。変数。ただし、特定の構文ルールを無視すると、予期しない動作が発生する可能性があります。次のコードを考えてみましょう:

<code class="js">let a, b, c;
[a, b] = ['A', 'B'];
[b, c] = ['BB', 'C'];
console.log(`a=${a} b=${b} c=${c}`);</code>

期待される結果:

• a = A
• b = BB
• c = C

実際の結果:

• a = BB
• b = C
• c =未定義

説明:

質問で指摘されているように、行間にセミコロンがないため、この予期しない動作が発生します。明示的なセミコロンがない場合、コードは単一のステートメントとして解釈されます:

<code class="js">let a = undefined, b = undefined, c = undefined;
[a, b] = (['A', 'B']
[(b, c)] = ['BB', 'C']);
console.log(`a=${a} b=${b} c=${c}`);</code>

この内訳は、異常な結果を説明しています:

• [a, b] = ([' A', 'B'] は、a を未定義に設定し、b を B に設定します。
• [(b, c)] = ['BB', 'C'] は、代入式内で配列を b と c に代入し、配列を評価します。
• 'A', 'B' は配列リテラルのプロパティ参照です。
• (b, c) は、c (未定義) を評価する効果があるカンマ演算子を使用します。

これらの意図しない結果を回避するには、括弧、括弧、除算演算子、加算演算子、減算演算子、またはバックティック (タグ付きテンプレートの場合) で始まるステートメントの後にセミコロンを明示的に追加することが重要です。このルールに従うことで、各行が個別のステートメントとして扱われるようになります。予期せぬ評価や誤った結果を防ぎます。

以上がES6 アレイの分割により予期せぬ動作が発生したのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。