JavaScriptで2つの配列を結合する方法【concat()とスプレッド構文】
JavaScriptで2つの配列を1つにまとめたい場合、最も一般的なのが concat() メソッドです。このメソッドは、元の配列を変更することなく、複数の配列や値を連結した新しい配列を返します。
concat()メソッドの基本構文
let 新しい配列 = 配列A.concat(配列B);サンプルコード
以下は、ボタンをクリックすると2つの配列を結合し、その結果を画面に表示する完全なサンプルです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScriptで2つの配列を結合する</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result,.sample {
font-size: 18px;
font-weight: 500;
color: rebeccapurple;
}
.result {
color: red;
}
</style>
</head>
<body>
<h1>JavaScriptで2つの配列を結合する</h1>
<div class="sample"></div>
<div class="result"></div>
<button class="Btn">クリックしてください</button>
<h3>上のボタンをクリックすると、2つの配列が結合されます。</h3>
<script>
let BtnEle = document.querySelector(".Btn");
let resEle = document.querySelector(".result");
let sampleEle = document.querySelector(".sample");
let arr = [1, 2, 3, 4];
let arr1 = ["A", "B", "C", "D"];
sampleEle.innerHTML = "arr = " + arr + " " + "arr1 = " + arr1;
let mergedArr = arr.concat(arr1);
BtnEle.addEventListener("click", () => {
resEle.innerHTML = "結合後の配列 = " + mergedArr;
});
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のように元の2つの配列が表示されます。
「クリックしてください」ボタンをクリックすると、結合後の配列が表示されます。
コードの解説
- arr.concat(arr1)：配列 arr の末尾に arr1 の全要素を連結した新しい配列を作成します。この例では
[1, 2, 3, 4, "A", "B", "C", "D"]が得られます。 - 元の配列は変更されない：concat() は非破壊的なメソッドなので、arr も arr1 もそのまま残ります。
- 3つ以上の配列も結合可能：
arr.concat(arr1, arr2)のようにカンマ区切りで複数の配列を一度に指定できます。
代替方法：スプレッド構文（ES2015以降）
よりモダンな書き方として、スプレッド構文（...）を使って配列を結合することもできます。
let mergedArr = [...arr, ...arr1];結果は concat() と同じですが、記述がシンプルで読みやすい点が魅力です。また、[...arr, "X", ...arr1] のように配列の間に別の値を挟み込みたい場合にも柔軟に対応できます。用途に応じて両者を使い分けるとよいでしょう。
-
JavaScriptで2つのオブジェクトをマージする方法を解説
JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。コード例<!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=dev
-
JavaScriptで2つの配列を乗算する方法｜forループとmap()の実装例
JavaScriptで2つの配列の各要素同士を乗算し、その結果を新しい配列として取得する方法を解説します。基本的にはforループでインデックスを順番に処理しながら、対応する位置にある要素同士を掛け合わせていくシンプルなアプローチです。 2つの配列を乗算するサンプルコード 以下の例では、「CLICK HERE」ボタンをクリックすると、配列 arr と arr1 の対応する要素が乗算され、結果が新しい配列 multArray に格納された上で画面に表示されます。 <!DOCTYPE html> <html lang=en> <head> <meta ch