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

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

JavaScriptでは、スプレッド構文（...）を使うことで、2つのオブジェクトを簡単に1つにマージ（結合）できます。各オブジェクトの前に「...」を付けて新しいオブジェクトリテラル内に展開するだけで、すべてのプロパティが統合されたオブジェクトが生成されます。

以下に、2つのJavaScriptオブジェクトをマージするコードの例を示します。

コード例

<!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;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>2つのJavaScriptオブジェクトをマージする</h1>
<div class="result"></div>
<button class="Btn">ここをクリック</button>
<h3>
上のボタンをクリックすると、personオブジェクトとaddressオブジェクトが結合されます。
</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    let person = {
        name: "Rohan",
        age: 22,
    };
    let address = {
        state: "Delhi",
        country: "India",
    };
    let mergedObj = { ...person, ...address };
    BtnEle.addEventListener("click", () => {
        for (let i in mergedObj) {
            resEle.innerHTML += "キー = " + i + " : 値 = " + mergedObj[i] + "<br>";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

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

「ここをクリック」ボタンを押すと、マージされたオブジェクトの内容が以下のように表示されます。

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

解説

この例では、personオブジェクト（name、ageプロパティ）とaddressオブジェクト（state、countryプロパティ）を用意しています。そして、スプレッド構文 { ...person, ...address } を使うことで、両方のプロパティを持つ新しいオブジェクト mergedObj を作成しています。

ボタンがクリックされると、for...in ループによってマージ後のオブジェクトのすべてのキーと値が画面に出力されます。

補足：Object.assign()によるマージ

スプレッド構文以外にも、ES6で導入された Object.assign() メソッドでも同様にオブジェクトをマージできます。

let mergedObj = Object.assign({}, person, address);

どちらの方法でも結果は同じですが、スプレッド構文の方が簡潔で読みやすいため、現在はこちらが広く使われています。なお、同じキーが存在する場合は、後ろに指定したオブジェクトの値で上書きされる点に注意してください。

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

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

  2. 【JavaScript入門】複数のオブジェクトを1つにマージして単一のオブジェクト配列を作成する方法

    JavaScriptでは、Object.assign()メソッドとスプレッド構文（...）を組み合わせることで、配列内の複数のオブジェクトを1つのオブジェクトに簡単にマージすることができます。 Object.assign()は、1つ以上のコピー元オブジェクトから、コピー先のオブジェクトへすべてのプロパティをコピーするためのメソッドです。スプレッド構文を使って配列の要素を展開することで、各オブジェクトのキーと値が1つのオブジェクトに統合されます。 コード例 以下のコードは、配列内の複数のオブジェクトを単一のオブジェクトにマージする例です。 <!DOCTYPE html> <ht