JavaScript ES6：拡張演算子

JavaScriptは、さまざまな技術革新と改善とともに絶えず進化しています。 ES6で導入されたこのような革新の1つは、拡張演算子です。 省略記号（ ... ）のように見え... 。 この演算子を使用すると、1つ以上の引数の完全な不在または存在が予想される反復可能なオブジェクトを分離できます。 ドライな定義は通常、実用的な例なしでは理解するのが困難です。 したがって、拡張演算子を使用するためのいくつかのオプションを検討します。これは、その本質を理解するのに役立ちます。

例1：配列を他の配列に挿入する

このコードを見てください。 ここでは、拡張演算子は使用されていません。

 var mid = [3, 4]; var arr = [1, 2, mid, 5, 6]; console.log(arr); 

上記では、 midアレイを作成しました。 次に、 mid配列を含む2番目の配列arrが作成されます。 プログラムの最後に、 arr配列がコンソールに表示されます。 この配列にmid追加midどうなると思いますか？ プログラムが表示するものを見てください。

 [1, 2, [3, 4], 5, 6] 

そうだと思った？

mid配列をarr配列に挿入すると、1つの配列が別の配列にネストされます。 これがまさに必要なものであった場合、文句を言う必要はありません。 しかし、上記のコードを書く目的が1〜6の数字の配列を取得することだった場合はどうでしょうか。 この目標を達成するために、拡張演算子を使用できます。 この演算子を使用すると、配列を個別の要素に分割できることを思い出してください。

次の例を考えてみましょう。 ここのすべては、1つの場所を除いて、前のコードフラグメントとまったく同じです。 違いは、 mid配列の内容をarr配列に挿入するために、拡張演算子が使用されることです。

 var mid = [3, 4]; var arr = [1, 2, ...mid, 5, 6]; console.log(arr); 

このコードが実行されると、結果は次のようになります。

 [1, 2, 3, 4, 5, 6] 

資料の冒頭に記載されている拡張演算子の説明を思い出してください。 あなたは彼が実際に動いているのを見ました。 ご覧のとおり、 arr配列を作成し、拡張演算子を使用して、それをmid配列に適用すると、別の配列をオブジェクトとして1つの配列に挿入する代わりに、この別の配列は「部分に分割」されます。 この場合の挿入された配列の分離は、この配列のすべての要素が1つずつarr配列に追加されることを意味します。 その結果、ネストされた配列から構築する代わりに、1から6までの数字を含む1つの配列を得ました。

例2：数学計算

JavaScriptには、数学計算を実行できる組み込みのMathオブジェクトがあります。 この例では、 Math.max()メソッドに興味があります。 このメソッドに慣れていない場合は、渡された数値の最大値を返すことをお知らせします。引数なしで、または1つ以上の引数とともに使用することは許可されています。 以下に例を示します。

 Math.max(); // -Infinity Math.max(1, 2, 3); // 3 Math.max(100, 3, 4); // 100 

ご覧のとおり、複数の数値の最大値を検索する場合、 Math.max()はいくつかのパラメーターが必要です。 残念ながら、数値配列の最大要素を見つける必要がある場合、配列自体をMath.max()メソッドに渡すことはできません。 拡張演算子がJSに登場する前は、 Math.max()を使用して配列内の最大要素を見つける最も簡単な方法は、 apply()メソッドを使用するapply()でした。

 var arr = [2, 4, 8, 6, 0]; function max(arr) { return Math.max.apply(null, arr); } console.log(max(arr)); 

動作するデザインは上に示されていますが、これはすべて見栄えがよくありません。

そして、拡張演算子を使用して同じことを行う方法を次に示します。

 var arr = [2, 4, 8, 6, 0]; var max = Math.max(...arr); console.log(max); 

関数を作成し、 apply()メソッドを使用してMath.max()メソッドの結果を返す代わりに、必要なコードは2行だけです。 拡張演算子は、配列からすべての要素を「引き出し」、 Math.max()メソッドへの入力になります。

例3：配列のコピー

JSでは、既存の配列が既に含まれている変数と新しい変数を単純に同等にすることで配列をコピーすることはできません。 例を考えてみましょう：

 var arr = ['a', 'b', 'c']; var arr2 = arr; console.log(arr2); 

実行すると、次のことがわかります。

 ['a', 'b', 'c'] 

一見、すべてがarr2ます。配列の値を変数arrから変数arr2にコピーしたように見えるかもしれません。 しかし、実際にはまったく異なることが起こりました。 JavaScriptでは、オブジェクトを変数に割り当てる操作（および配列もオブジェクト）では、値ではなく変数への参照を操作します。 これは、同じリンクがarrに保存されたarr2に保存されたことを意味します。 言い換えると、その後にarr2を使用して行うすべてがarr影響します（逆も同様です）。 これを見てください：

 var arr = ['a', 'b', 'c']; var arr2 = arr; arr2.push('d'); console.log(arr); 

ここで、 arr2配列の最後に、新しい要素である行d配置します。 ただし、コンソールにarrを表示すると、この変数によって参照される配列も変更されていることがわかります。

 ['a', 'b', 'c', 'd'] 

ここではひどいことは何も起きていないことに注意してください。 私たちの前に、JSの標準的な動作があります。 そして、実際に配列のコピーを作成するには、拡張演算子を使用できます。 この演算子を使用して配列をコピーする例を次に示します。 コードは上記の例とほとんど同じように見えます。 ただし、ここでは、元の配列に適用された拡張演算子を使用し、この構造全体が角括弧で囲まれています。

 var arr = ['a', 'b', 'c']; var arr2 = [...arr]; console.log(arr2); 

このコードを実行すると、期待どおりの結果が出力されることがわかります。

 ['a', 'b', 'c'] 

この例では、 arr配列は「拡張」されており、 arr2参照が書き込まれている新しい配列に含まれる個々の要素をarr2ます。 これでarr2で何でもできますが、これはarrは影響しません：

 var arr = ['a', 'b', 'c']; var arr2 = [...arr]; arr2.push('d'); console.log(arr); 

繰り返しますが、これがすべて機能するのは、拡張演算子がarr配列の要素の値を「引き出し」、それらが新しいarr2配列に落ちるためです。 したがって、 arr2 、 arr変数が参照する配列へのリンクではなく、 arr配列の要素を含む新しい配列へarr2リンクを記述します。 これにより、この例は前の例と区別されます。

追加の例：文字列を配列に変換する

最後に、拡張演算子を使用して文字列を配列に変換する興味深い例の1つを示します。 ここでは、この演算子全体を目的の行に適用して、この構造全体を角括弧で囲んで十分です。

 var str = "hello"; var chars = [...str]; console.log(chars); 

まとめ

今日は、拡張演算子を使用する機能を調べました。 これはJavaScript ES6の新機能の1つであり、コードの読みやすさを大幅に改善し、サイズをわずかに縮小できる便利な小さな機能です。

親愛なる読者！ JavaScriptで拡張演算子を使用しますか？