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=未定義

説明

予期せぬ動作は、2 つの分割ステートメントの間にセミコロンがないことが原因で発生します。 ES6 では、セミコロンは自動的に挿入されません。したがって、コードは 1 つの大きなステートメントとして解析されます:

<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>

このステートメントでは、カンマ演算子は括弧内の最後の式、つまり配列 ['BB', 'C の割り当て) として評価されます。 '] を左側 (b、c) に追加します。その結果、b は 'BB' を受け取り、c は 'C' を受け取ります。

ただし、2 番目の分割代入は、配列 ['BB', ' ではなく、空の配列リテラル ([]) に誤って割り当てられます。 C']。これは、配列リテラルが行頭にセミコロンがなく括弧で囲まれているためです。

この問題を解決するには、セミコロンを使用して個々の割り当てを区切ります。

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

セミコロンを適切に使用すると、期待どおりの出力が得られます。

以上がES6 配列破壊異常: セミコロンが重要なのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。