JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのスプレッド演算子（...）とは？基本の使い方をわかりやすく解説

JavaScriptのスプレッド演算子（...）は、配列やオブジェクト、文字列などの反復可能な要素を「展開（スプレッド）」して、個々の要素として扱えるようにする構文です。これにより、複数の引数や要素、変数などを簡潔に表現できるようになります。

スプレッド演算子の基本的な考え方

従来、配列同士を連結するには concat() メソッドを使うのが一般的でした。しかし、スプレッド演算子を使えば、より直感的で読みやすいコードで同じことが実現できます。

例えば、[...array] と書くだけで配列の中身が展開され、別の配列リテラル内にそのまま埋め込むことができます。

サンプルコード：concat() とスプレッド演算子の比較

以下のコードは、concat() メソッドとスプレッド演算子の両方を使って、配列・文字列を連結した例です。ブラウザで実行して動作を確認してみましょう。

<html>
   <body>
      <script>
         var a, b, c, d, e, f, g; 
         a = [10, 20];
         b = "rank";
         c = [30, "points"]; 
         d = "run";

         // concat() メソッドを使った連結 
         e = a.concat(b, c, d); 

         // スプレッド演算子を使った連結 
         f = [...a, b, ...c, d]; 

         document.write(e); 
         document.write("<br>" + f);
      </script>
   </body>
</html>

実行結果

10,20,rank,30,points,run
10,20,rank,30,points,run

このように、e と f はどちらも同じ結果になります。concat() を使う方法と比べて、スプレッド演算子の方が「どの要素がどの順番で並ぶのか」が直感的に把握しやすい点が大きなメリットです。

スプレッド演算子の主な活用シーン

1. 配列のコピー

const original = [1, 2, 3];
const copy = [...original]; // 元の配列に影響しない浅いコピー

2. 配列の結合

const arr1 = [1, 2];
const arr2 = [3, 4];
const merged = [...arr1, ...arr2]; // [1, 2, 3, 4]

3. 関数への可変長引数の渡し方

const numbers = [5, 8, 1];
const max = Math.max(...numbers); // 8

4. オブジェクトの展開（ES2018以降）

const user = { name: "Taro", age: 25 };
const updatedUser = { ...user, age: 26 }; // { name: "Taro", age: 26 }

まとめ

スプレッド演算子（...）は、配列やオブジェクトを展開して扱うための強力な構文です。配列のコピー・結合、関数への引数渡しなど、日常的なコーディングの場面で頻繁に登場するため、確実にマスターしておきましょう。モダンなJavaScript開発では必須の知識といえます。

  1. JavaScriptのビットごとのOR（|）演算子とは？使い方をわかりやすく解説

    JavaScriptにおけるビットごとのOR（|）演算子は、2つの数値を2進数のビット列として比較し、対応するビットのどちらか一方でも「1」であれば結果として「1」を返す演算子です。両方のビットが「0」の場合のみ、結果は「0」になります。ビットOR演算の基本ルールビットごとのOR演算は、以下のようなルールで各ビットが評価されます。0 | 0 → 00 | 1 → 11 | 0 → 11 | 1 → 1サンプルコード以下のコードを実行すると、JavaScriptのビットごとのOR（|）演算子の動作を確認できます。この例では、「7」と「1」をOR演算しています。<!DOCTYPE html&

  2. JavaScriptスプレッド演算子の使い方を徹底解説！配列の展開と結合の基本

    JavaScriptのスプレッド演算子（...）は、配列を個々の要素へと展開できる便利な構文です。使い方は非常にシンプルで、配列名の前にドット3つ（...）を記述するだけです。 スプレッド演算子の基本構文 [...配列名] この構文により、配列の中身が個別の要素として展開されます。代表的な活用場面は以下の通りです。 複数の配列を結合して、新しい配列を作成する 既存の配列のコピー（シャローコピー）を作る 関数を呼び出す際に、配列の各要素を引数として渡す 実装例：2つの配列をスプレッド演算子で結合する 次のサンプルコードでは、数値の配列 arr1 と文字列の配列 arr2 をスプレッド演算