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

【JavaScript入門】Rest演算子とSpread演算子の違いと使い方を徹底解説

Rest演算子（...）を使用すると、関数を任意の数の引数で呼び出し、余分な引数を1つの配列として受け取ることができます。また、配列やオブジェクトの分割代入（デストラクチャリング）の際にも活用できる便利な構文です。

一方、Spread演算子（...）は、配列などの反復可能なオブジェクト（イテラブル）を個々の要素へと展開するために使用します。

Rest演算子とSpread演算子の主な違い

両者は同じ「...」という記法ですが、使用する場所によって役割が異なります。

  • Rest演算子： 関数の仮引数や分割代入の左辺など、「複数の値をまとめて1つに集約」する場面で使用します。
  • Spread演算子： 関数の実引数、配列リテラル、オブジェクトリテラルの中など、「1つのイテラブルを複数の要素に展開」する場面で使用します。

主な活用シーン

  • 配列の結合・コピー： [...arr1, ...arr2] のように簡潔に記述できます。
  • 可変長引数： 引数の個数が不定の関数を柔軟に定義できます。
  • オブジェクトのマージ： { ...obj1, ...obj2 } でプロパティを統合できます。
  • 分割代入： const [first, ...others] = arr のように残りの要素をまとめて取得できます。

コード例

以下は、JavaScriptにおけるRest演算子とSpread演算子の使い方を示したサンプルコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample, .result {
        font-size: 20px;
        font-weight: 500;
    }
</style>
</head>
<body>
<h1>JavaScript Rest演算子とSpread演算子</h1>
<div class="sample"></div>
<div style="color: green;" class="result"></div>
<button class="btn">Spread演算子</button>
<h3>
上のボタンをクリックすると、Spread演算子を使って配列を連結します
</h3>
<button class="btn">Rest演算子</button>
<div style="color: green;" class="result"></div>
<h3>
上のボタンをクリックすると、Rest演算子を使って数値の合計を計算します
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    let btnEle = document.querySelectorAll(".btn");
    let resEle = document.querySelectorAll(".result");
    let arr = [2, 3, 4, 5];
    let arr1 = ["a", "b", "c", "d"];
    sampleEle.innerHTML = "arr = " + arr + "<br> arr1 = " + arr1;
    function addArr(num, ...ar) {
        let sum = num;
        ar.forEach((item) => {
            sum += item;
        });
        resEle[1].innerHTML = "要素の合計 = " + sum;
    }
    btnEle[0].addEventListener("click", () => {
        resEle[0].innerHTML = "連結後の配列 = " + [...arr, ...arr1];
    });
    btnEle[1].addEventListener("click", () => {
        addArr(44, 11, 35, 44, 22, 99);
    });
</script>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

【JavaScript入門】Rest演算子とSpread演算子の違いと使い方を徹底解説

「Spread演算子」ボタンをクリックすると −

【JavaScript入門】Rest演算子とSpread演算子の違いと使い方を徹底解説

「Rest演算子」ボタンをクリックすると −

【JavaScript入門】Rest演算子とSpread演算子の違いと使い方を徹底解説

  1. JavaScriptの配列で使えるスプレッド演算子（...）の使い方

    スプレッド構文（...）を使うと、配列などのイテラブルなオブジェクトを、0個以上の引数が期待される場所で展開することができます。これにより、配列の要素をまとめて関数の引数として渡すことが可能になります。スプレッド演算子の基本例えば、5つの引数を受け取る関数に対して5つの要素を持つ配列を渡したい場合、従来の書き方では各要素を個別に指定する必要がありました。しかし、スプレッド演算子を使えば「add(...arr)」のように記述するだけで、配列の各要素が順番に引数として展開されて渡されます。スプレッド演算子は、配列の結合やコピーなど、さまざまな場面でも活用できる便利な構文です。以下は、JavaScr

  2. 【JavaScript】スプレッド演算子（...）で配列を関数の引数として渡す方法

    スプレッド構文（spread syntax）とは、配列などのイテラブル（反復可能なオブジェクト）を展開し、関数呼び出しの際に0個以上の引数として渡すことができるJavaScriptの便利な機能です。 通常、配列の各要素を個別の引数として関数に渡すには、一つずつ指定する必要がありますが、「...」（ドット3つ）を付けるだけで、配列の中身が自動的に展開され、それぞれ独立した引数として扱われます。これにより、コードがシンプルになり、可読性も大きく向上します。 スプレッド演算子を使った関数呼び出しのサンプルコード 以下は、関数呼び出しでスプレッド演算子を使用する具体例です。このサンプルでは、4つの引数