ホームページ >ウェブフロントエンド >jsチュートリアル >拡張構文の利点と、ES6 の他の構文との違いについて説明してください。
JavaScript の ES6 バージョンでは、拡張構文が非常に強力な機能として導入されました。拡張構文を使用して、配列またはオブジェクトを同じデータ型の変数に拡張できます。
たとえば、ES6 でスプレッド構文が導入される前は、開発者は for ループを使用して、ある配列のすべての要素を別の配列にコピーしていました。 for ループを使用して 5 ~ 7 行のコードを記述する代わりに、拡張構文を使用して線形コードを記述することで、ある配列のすべての要素を別の配列にコピーできますか?はい、正しく聞こえました!
ここでは、このチュートリアルで拡張構文のさまざまな使用例を学習します。また、チュートリアルの最後で、他の構文とどのように異なるのかを確認します。
JavaScript の展開構文は、反復可能なオブジェクト (配列やオブジェクトなど) を単一の変数または要素に展開できるようにする構文です。
ユーザーは拡張構文を使用して、次の構文に従って反復可能オブジェクトを拡張できます。
リーリー上記の構文では、反復可能な「配列」のすべての要素を array2 変数にコピーします。
拡張構文を使用すると、いくつかの利点や機能があります -
配列またはオブジェクトをコピーします。
配列またはオブジェクトを結合し、
複数の要素を関数パラメータとして渡します。
拡張構文の上記の各機能のさまざまな例を見てみましょう。
###例### スプレッド構文を使用して配列をコピーするこの例では、拡張構文を使用して、ある配列の要素を別の配列にコピーします。単一の線形コードがすべての配列要素を array2 にコピーしていることがわかります。
リーリー ###例### スプレッド構文を使用して配列またはオブジェクトを結合するJavaScript の concat() メソッドを使用する代わりに、array1 内の拡張構文を使用して array1 と array2 をマージします。さらに、2 つの配列を結合するときは、配列要素の順序を変更します。 リーリー ###例###
拡張構文を使用して複数の要素を関数パラメータとして渡す拡張構文を使用してオブジェクトをコピーする
次の例では、さまざまなキーと値のペアを含む、sample_obj オブジェクトを作成します。拡張構文を使用して、sample_obj のすべてのキーと値のペアを copy_object にコピーしました。
残りの構文 JavaScript では、残りの構文は拡張構文と同じです。スプレッド構文を使用した展開とは異なり、残りの構文を使用して要素を単一の配列または反復可能に収集できます。
通常、開発者は、関数パラメーターの合計数が未定義の場合、またはオプションのパラメーターが渡される場合、関数パラメーターの拡張構文を使用します。
###文法###ユーザーは、次の構文に従って残りの構文を使用できます。
リーリーこの例では、文字列の配列を作成し、拡張構文を使用してすべての配列要素を引数として mergeString() 関数に渡します。
残りの構文を使用して、mergeString() 関数のすべてのパラメーターを params 配列に収集します。 params 配列を反復処理し、params 配列の各要素を FinalString 変数に連結します。
リーリーES6 の Spread 構文と Rest 構文の違い:
拡張構文は、複数の要素または属性を配列に収集するために使用される残りの構文とは異なります。拡張構文では要素の拡張が可能ですが、残りの構文では要素のコレクションが可能です。
残りの構文の使用例には、コレクション要素、関数パラメーターなどが含まれます。
次の表は、ES6 の展開構文と残りの構文の違いを示しています -
拡張構文
残りの構文
| 残りの構文を使用して要素を収集し、収集されたすべての要素を反復可能にすることができます。
|
---|---|
| すべての要素を必要な形式で収集できます。
|
| これを使用して、関数パラメータを収集したり、オプションのパラメータを定義したりできます。
|
以上が拡張構文の利点と、ES6 の他の構文との違いについて説明してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。