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

JavaScriptでスプレッド演算子を使って複数の配列を結合する方法

JavaScriptで2つ以上の配列を結合する場合、組み込みメソッドである array.concat() を使うのが一般的な方法です。しかし、スプレッド演算子（...）を使えば、より簡潔で読みやすいコードで配列を結合できます。

構文

var merged = [...arr1, ...arr2];

concat() メソッドを使った結合

まずは、スプレッド演算子を使わずに配列を結合する方法を見てみましょう。次の例では、スプレッド演算子の代わりに array.concat() メソッドを使用して、2つの配列を結合しています。

例

<html>
<body>
   <script>
      var arr1 = [1,2,3];
      var arr2 = [4,5,6];
      var merged = arr1.concat(arr2);
      document.write(merged);
   </script>
</body>
</html>

出力結果

1,2,3,4,5,6

スプレッド演算子を使った結合

次の例では、スプレッド演算子を使用して2つの配列を結合しています。配列の前に「...」を付けることで、その配列の要素が展開され、新しい配列の要素として組み込まれます。

例

<html>
<body>
   <script>
      var arr1 = [1,2,3];
      var arr2 = [4,5,6];
      var merged = [...arr1, ...arr2];
      document.write(merged);
   </script>
</body>
</html>

出力結果

1,2,3,4,5,6

3つ以上の配列を結合する

次の例では、スプレッド演算子を使用して3つの配列を結合しています。concat() メソッドの場合、配列の数が増えるとコードが冗長になりがちですが、スプレッド演算子を使えば、いくつの配列でもシンプルに記述できるのが大きなメリットです。

例

<html>
<body>
   <script>
      var arr1 = [1,2,3];
      var arr2 = [4,5,6];
      var arr3 = [7,8,9];
      var merged = [...arr1, ...arr2, ...arr3];
      document.write(merged);
   </script>
</body>
</html>

出力結果

1,2,3,4,5,6,7,8,9

このように、スプレッド演算子は元の配列を変更せずに新しい配列を生成するため、安全かつ直感的に配列を結合できます。ES6（ECMAScript 2015）以降で利用可能な機能なので、モダンなJavaScript開発では積極的に活用するとよいでしょう。

  1. JavaScriptで2つの配列を結合する方法【concat()とスプレッド構文】

    JavaScriptで2つの配列を1つにまとめたい場合、最も一般的なのが concat() メソッドです。このメソッドは、元の配列を変更することなく、複数の配列や値を連結した新しい配列を返します。 concat()メソッドの基本構文 let 新しい配列 = 配列A.concat(配列B); サンプルコード 以下は、ボタンをクリックすると2つの配列を結合し、その結果を画面に表示する完全なサンプルです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8&

  2. JavaScriptで2つの配列を乗算する方法｜forループとmap()の実装例

    JavaScriptで2つの配列の各要素同士を乗算し、その結果を新しい配列として取得する方法を解説します。基本的にはforループでインデックスを順番に処理しながら、対応する位置にある要素同士を掛け合わせていくシンプルなアプローチです。 2つの配列を乗算するサンプルコード 以下の例では、「CLICK HERE」ボタンをクリックすると、配列 arr と arr1 の対応する要素が乗算され、結果が新しい配列 multArray に格納された上で画面に表示されます。 <!DOCTYPE html> <html lang=en> <head> <meta ch