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

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

JavaScriptのスプレッド演算子（...）は、配列を個々の要素へと展開できる便利な構文です。使い方は非常にシンプルで、配列名の前にドット3つ（...）を記述するだけです。

スプレッド演算子の基本構文

[...配列名]

この構文により、配列の中身が個別の要素として展開されます。代表的な活用場面は以下の通りです。

  • 複数の配列を結合して、新しい配列を作成する
  • 既存の配列のコピー（シャローコピー）を作る
  • 関数を呼び出す際に、配列の各要素を引数として渡す

実装例：2つの配列をスプレッド演算子で結合する

次のサンプルコードでは、数値の配列 arr1 と文字列の配列 arr2 をスプレッド演算子を使って結合し、新しい配列 arr3 を生成して画面に表示します。

<!DOCTYPE html>
<html lang="en">
<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: 18px;
        font-weight: 500;
        color: red;
    }
    .result {
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScript Spread Operator</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button combine the two arrays using spread operator
into a new one
</h3>
<script>
    let resultEle = document.querySelector(".result");
    let sampleEle = document.querySelector(".sample");
    let arr1 = [1, 2, 3, 4, 5];
    let arr2 = ["A", "B", "C", "D", "E"];
    sampleEle.innerHTML = "arr1 = " + arr1 + "<br> arr2 = " + arr2;
    document.querySelector(".Btn").addEventListener("click", () => {
        let arr3 = [...arr1, ...arr2];
        resultEle.innerHTML = "arr3 = " + arr3;
    });
</script>
</body>
</html>

実行結果

ページを読み込んだ直後は、元となる配列 arr1 と arr2 の内容がそれぞれ表示されます。

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

「CLICK HERE」ボタンをクリックすると、スプレッド演算子によって2つの配列が結合され、その結果である新しい配列 arr3 の内容が表示されます。

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

注意点

スプレッド演算子による配列のコピーは浅いコピー（シャローコピー）である点に留意してください。入れ子になったオブジェクトや配列まで深く複製されるわけではないため、多次元データを扱う場合は十分な検証が必要です。

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

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

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

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