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

JavaScriptで2つの配列をマージ（結合）する方法【concat()メソッドの使い方】

JavaScriptで2つの配列を1つにマージ（結合）したい場合は、Array.concat()メソッドを使うのが最も基本的な方法です。concat()メソッドは、元の配列に他の配列や値を連結した新しい配列を返します。元の配列自体は変更されないため、安全に利用できる点が特徴です。

concat()メソッドの基本構文

var newArray = array1.concat(array2, array3, ...);

concat()には2つ以上の配列を渡すこともでき、カンマ区切りで複数指定すれば一度にまとめて結合できます。

サンプルコード

以下のコードを実行すると、2つの配列をマージした結果を確認できます。

<html>
<head>
    <title>JavaScript Array concat Method</title>
</head>
<body>
    <script>
        var alpha = ["a", "b", "c"];
        var numeric = [1, 2, 3];

        // 2つの配列を結合して新しい配列を作成
        var alphaNumeric = alpha.concat(numeric);

        document.write("alphaNumeric : " + alphaNumeric);
    </script>
</body>
</html>

実行結果

alphaNumeric : a,b,c,1,2,3

スプレッド構文を使った別の方法

ES2015（ES6）以降では、スプレッド構文（...）を使ってより簡潔に配列をマージすることもできます。

const alpha = ["a", "b", "c"];
const numeric = [1, 2, 3];

const merged = [...alpha, ...numeric];
console.log(merged); // ["a", "b", "c", 1, 2, 3]

どちらの方法でも元の配列は変更されず、常に新しい配列が生成されます。古いブラウザへの対応が必要な場合はconcat()、モダンなコードスタイルを重視する場合はスプレッド構文を選ぶとよいでしょう。

  1. JavaScriptで2つのオブジェクトをマージする方法を解説

    JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=dev

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

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