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

JavaScriptのSymbol.isConcatSpreadableとは？配列の連結時の展開動作を制御する方法

Symbol.isConcatSpreadableとは

Symbol.isConcatSpreadableは、ES6（ECMAScript 2015）で導入されたウェルノウンシンボルの一つで、Array.prototype.concat()メソッドを使用する際に、対象のオブジェクトをその配列要素として展開（フラット化）するかどうかを制御するために使われます。

このプロパティがfalseに設定されている場合、配列の展開は一切行われません。デフォルト値はtrueであるため、明示的に指定しない限り、配列は常に展開されて連結されるという点に注意が必要です。

Symbolを使用しない場合（デフォルトの動作）

サンプルコード

次の例では、Symbol.isConcatSpreadableが明示的に指定されていません。そのため、デフォルトの動作として、2つの配列はそれぞれの要素に展開されながら1つの配列へと連結されます。

<html>
<body>
<script>
   var arr1 = ['mango', 'apple', 'guava'];
   var arr2 = ['cashew', 'pista', 'bhadham'];
   var res1 = arr1.concat(arr2);
   console.log(res1);
</script>
</body>
</html>

出力結果

["mango", "apple", "guava", "cashew", "pista", "bhadham"]

出力を見ると、arr2の各要素が個別に展開され、すべての要素が並んだフラットな配列が生成されていることがわかります。

Symbolを使用する場合（展開を無効化）

サンプルコード

次の例では、Symbol.isConcatSpreadableをfalseに明示的に設定しています。その結果、配列の展開は行われず、配列オブジェクト自体がそのまま1つの要素として連結されます。

<html>
<body>
<script>
   var arr1 = ['mango', 'apple', 'guava'];
   var arr2 = ['cashew', 'pista', 'bhadham'];
   arr2[Symbol.isConcatSpreadable] = false;
   var res2 = arr1.concat(arr2);
   console.log(res2);
</script>
</body>
</html>

出力結果

["mango", "apple", "guava", Array(3)]

このように、arr2は展開されずにネストされた配列のまま連結されています。このシンボルを活用すれば、配列を意図的にネスト構造のまま扱いたい場合や、連結後のデータ構造を厳密に管理したい場合などに柔軟な対応が可能になります。

  1. JavaScript正規表現の「/g」フラグとは？文字列をグローバルに置換する方法を解説

    正規表現の/gフラグは、文字列操作を効率化するための重要なオプションの一つです。/g（global）を付けると、指定した単語を文字列全体からグローバル（全件）に検索できます。文中に登場するすべての該当語を別の単語に一括置換したい場合に、このフラグが活躍します。本記事では、その基本的な使い方をサンプルコード付きでわかりやすく解説します。 /gフラグなしの場合の挙動 次の例では、文中に含まれるすべての「blue」を「red」に置き換えたいとします。まず、通常のstr.replace()メソッドを使った場合を見てみましょう。グローバル指定がないため、最初に出現した「blue」のみが「red」に置き換

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

    Symbol.isConcatSpreadable は、Array.prototype.concat() メソッドで配列を連結する際に、ネストされた配列や配列状のオブジェクトを「個々の要素に展開するかどうか」を指定できる、ウェルノウンシンボルのひとつです。通常、concat() は引数として渡された配列を自動的に展開し、各要素を連結先の配列へ追加します。しかし、対象のオブジェクトに対して Symbol.isConcatSpreadable を false に設定すると展開が無効になり、配列全体がひとつの要素として連結されます。逆に、arguments オブジェクトのような配列状オブジェクトはデ