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

JavaScriptのSymbol.isConcatSpreadableシンボルとは？使い方を実例付きで解説

Symbol.isConcatSpreadable は、Array.prototype.concat() メソッドで配列を連結する際に、ネストされた配列や配列状のオブジェクトを「個々の要素に展開するかどうか」を指定できる、ウェルノウンシンボルのひとつです。

通常、concat() は引数として渡された配列を自動的に展開し、各要素を連結先の配列へ追加します。しかし、対象のオブジェクトに対して Symbol.isConcatSpreadable を false に設定すると展開が無効になり、配列全体がひとつの要素として連結されます。逆に、arguments オブジェクトのような配列状オブジェクトはデフォルトでは展開されませんが、このシンボルを true に設定することで展開できるようになります。

サンプルコード

<!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; }
    div { font-size: 20px; font-weight: 500; }
    .result { color: red; }
  </style>
</head>
<body>
  <h1>JavaScript Symbol.isConcatSpreadable</h1>
  <div class="sample"></div>
  <button class="Btn">CLICK HERE</button>
  <h3>上のボタンをクリックすると、2つの配列が1つに連結されます</h3>
  <div class="result">isConcatSpreadable = true</div>
  <div class="result">isConcatSpreadable = false</div>
  <script>
    let fillEle = document.querySelector(".sample");
    let result = document.querySelectorAll(".result");
    let ele = [1, 2, 3];
    let ele2 = ["A", "B", "C"];
    let concatArr;
    fillEle.innerHTML += ele + "<br>" + ele2 + "<br>";
    document.querySelector(".Btn").addEventListener("click", () => {
      concatArr = ele.concat(ele2);
      for (let x of concatArr.entries()) {
        result[0].innerHTML += x + " - ";
      }
      result[0].innerHTML += "<br>";
      ele2[Symbol.isConcatSpreadable] = false;
      concatArr = ele.concat(ele2);
      for (let x of concatArr.entries()) {
        result[1].innerHTML += x + " - ";
      }
    });
  </script>
</body>
</html>

実行結果

ページを開くと、まず2つの配列 ele（[1, 2, 3]）と ele2（["A", "B", "C"]）の中身が画面に表示されます。続いて「CLICK HERE」ボタンをクリックすると、次の2段階の処理が実行されます。

  • 1回目の連結： ele2 はデフォルト状態（isConcatSpreadable = true）のため展開され、両方の配列の要素がフラットに連結されます。結果として「0,1 - 1,2 - 2,3 - 3,A - 4,B - 5,C」というインデックスと値のペアが表示されます。
  • 2回目の連結： ele2[Symbol.isConcatSpreadable] = false を設定してから再び concat() を呼び出すと、ele2 は展開されず、結果は「0,1 - 1,2 - 2,3 - 3,A,B,C」となります。ele2 全体がひとつの要素として追加されたことが確認できます。

「CLICK HERE」ボタンをクリックする前の画面：

JavaScriptのSymbol.isConcatSpreadableシンボルとは？使い方を実例付きで解説

「CLICK HERE」ボタンをクリックした後の画面：

JavaScriptのSymbol.isConcatSpreadableシンボルとは？使い方を実例付きで解説

このように Symbol.isConcatSpreadable を活用することで、concat() 実行時の展開の有無を柔軟に制御できます。配列をあえて入れ子のまま連結したい場合などに特に役立つシンボルです。

  1. JavaScriptのSymbol（シンボル）とは？特徴と基本的な使い方を解説

    JavaScriptにおけるSymbol（シンボル）は、ES6（ECMAScript 2015）で新たに導入されたプリミティブデータ型の一つです。シンボルは呼び出されるたびに必ず完全に一意（ユニーク）な値を返し、組み込みのSymbol()ファクトリ関数を使って生成します。Symbolの主な特徴文字列や数値と同じくプリミティブ型として扱われるSymbol()を呼び出すたびに、たとえ同じ引数（説明用の文字列）を渡しても、必ず異なる新しいシンボルが生成されるオブジェクトのプロパティキーとして利用でき、名前の衝突を防ぐことができるJavaScriptシンボルのサンプルコード以下のコードでは、同じ文字列

  2. 【JavaScript】filterとjoinを組み合わせて、条件に合う配列要素だけを結合する方法

    JavaScriptでは、filter()メソッドとjoin()メソッドを組み合わせることで、条件を満たす要素だけを抽出し、それらを任意の区切り文字で1つの文字列に結合できます。本記事では、配列の中から「2で割り切れる要素（偶数）」だけを取り出して結合する具体例を、動作するサンプルコードとともに解説します。 処理の流れ：filter() と join() の役割 filter()：コールバック関数が true を返した要素だけを集めた新しい配列を作成します。元の配列は変更されません。 join()：配列内のすべての要素を、引数で指定した区切り文字で連結し、1つの文字列として返します。引数