ホームページ > ウェブフロントエンド > jsチュートリアル > 拡張構文の利点と、ES6 の他の構文との違いについて説明してください。

拡張構文の利点と、ES6 の他の構文との違いについて説明してください。

WBOY
リリース: 2023-09-19 21:21:03
転載
861 人が閲覧しました

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?

JavaScript の ES6 バージョンでは、拡張構文が非常に強力な機能として導入されました。拡張構文を使用して、配列またはオブジェクトを同じデータ型の変数に拡張できます。

たとえば、ES6 でスプレッド構文が導入される前は、開発者は for ループを使用して、ある配列のすべての要素を別の配列にコピーしていました。 for ループを使用して 5 ~ 7 行のコードを記述する代わりに、拡張構文を使用して線形コードを記述することで、ある配列のすべての要素を別の配列にコピーできますか?はい、正しく聞こえました!

ここでは、このチュートリアルで拡張構文のさまざまな使用例を学習します。また、チュートリアルの最後で、他の構文とどのように異なるのかを確認します。

伝播構文

JavaScript の展開構文は、反復可能なオブジェクト (配列やオブジェクトなど) を単一の変数または要素に展開できるようにする構文です。

ユーザーは拡張構文を使用して、次の構文に従って反復可能オブジェクトを拡張できます。

リーリー

上記の構文では、反復可能な「配列」のすべての要素を array2 変数にコピーします。

拡張構文の利点

拡張構文を使用すると、いくつかの利点や機能があります -

  • 配列またはオブジェクトをコピーします。

  • 配列またはオブジェクトを結合し、

  • 複数の要素を関数パラメータとして渡します。

拡張構文の上記の各機能のさまざまな例を見てみましょう。

###例###

スプレッド構文を使用して配列をコピーする

この例では、拡張構文を使用して、ある配列の要素を別の配列にコピーします。単一の線形コードがすべての配列要素を array2 にコピーしていることがわかります。

リーリー ###例###

スプレッド構文を使用して配列またはオブジェクトを結合する

JavaScript の concat() メソッドを使用する代わりに、array1 内の拡張構文を使用して array1 と array2 をマージします。さらに、2 つの配列を結合するときは、配列要素の順序を変更します。 リーリー ###例###

拡張構文を使用して複数の要素を関数パラメータとして渡す

この例では、3 つの値をパラメータとして受け取り、3 つのパラメータすべての合計を返す add() 関数を作成します。 3 つの値を含む配列を作成します。拡張構文を使用して、すべての配列要素をパラメータとして add() 関数に渡しました。

リーリー ###例###

拡張構文を使用してオブジェクトをコピーする

次の例では、さまざまなキーと値のペアを含む、sample_obj オブジェクトを作成します。拡張構文を使用して、sample_obj のすべてのキーと値のペアを copy_object にコピーしました。

オブジェクトは反復可能であるため、拡張構文を使用してオブジェクトを拡張できます。

リーリー

残りの構文 JavaScript では、残りの構文は拡張構文と同じです。スプレッド構文を使用した展開とは異なり、残りの構文を使用して要素を単一の配列または反復可能に収集できます。

通常、開発者は、関数パラメーターの合計数が未定義の場合、またはオプションのパラメーターが渡される場合、関数パラメーターの拡張構文を使用します。

###文法###

ユーザーは、次の構文に従って残りの構文を使用できます。

リーリー

上記の構文では、すべての関数パラメーターを params 配列に収集します。

###例###

この例では、文字列の配列を作成し、拡張構文を使用してすべての配列要素を引数として mergeString() 関数に渡します。

残りの構文を使用して、mergeString() 関数のすべてのパラメーターを params 配列に収集します。 params 配列を反復処理し、params 配列の各要素を FinalString 変数に連結します。

リーリー

上記の例を通じて、ユーザーはレスト構文とスプレッド構文の違いを明確に理解できます。

ES6 の Spread 構文と Rest 構文の違い:

拡張構文は、複数の要素または属性を配列に収集するために使用される残りの構文とは異なります。拡張構文では要素の拡張が可能ですが、残りの構文では要素のコレクションが可能です。

拡張構文の使用例には、ある配列を別の配列にコピーする、2 つの配列を結合する、複数の配列要素を関数の引数として渡す、あるオブジェクトのプロパティを別のオブジェクトにコピーするなどがあります。

残りの構文の使用例には、コレクション要素、関数パラメーターなどが含まれます。

次の表は、ES6 の展開構文と残りの構文の違いを示しています -

拡張構文

残りの構文

展開構文を使用して反復可能なオブジェクトを展開できます。 残りの構文を使用して要素を収集し、収集されたすべての要素を反復可能にすることができます。 これを使用して、配列またはオブジェクト形式のデータを拡張できます。 すべての要素を必要な形式で収集できます。 これを使用して関数内でパラメータを渡すことができます。 これを使用して、関数パラメータを収集したり、オプションのパラメータを定義したりできます。 ###結論は###

JavaScript の展開構文は、反復可能なオブジェクト (配列やオブジェクトなど) を単一の変数または要素に展開できるようにする構文です。

展開構文は残りの構文とは異なります。拡張構文は、配列のコピー、配列またはオブジェクトの結合、複数の要素を関数の引数として渡すなどのタスクを実行するのに役立ちます。

残りの構文は、複数の要素または属性を配列に収集するなどのタスクを実行する場合に便利です。

以上が拡張構文の利点と、ES6 の他の構文との違いについて説明してください。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート