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

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

JavaScriptでは、Object.assign()メソッドとスプレッド構文（...）を組み合わせることで、配列内の複数のオブジェクトを1つのオブジェクトに簡単にマージすることができます。

Object.assign()は、1つ以上のコピー元オブジェクトから、コピー先のオブジェクトへすべてのプロパティをコピーするためのメソッドです。スプレッド構文を使って配列の要素を展開することで、各オブジェクトのキーと値が1つのオブジェクトに統合されます。

コード例

以下のコードは、配列内の複数のオブジェクトを単一のオブジェクトにマージする例です。

<!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,.sample {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
    .sample {
        color: red;
    }
</style>
</head>
<body>
<h1>複数のオブジェクトを単一のオブジェクト配列にマージする</h1>
<div class="sample">
[{id:22, class:7},{name:'Rohan', age:12},{state:'Delhi',country:'India'}]
</div>
<div class="result"><br /></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、配列内のオブジェクトが1つのオブジェクトにマージされます</h3>
<script>
    let resEle = document.querySelector(".result");
    let BtnEle = document.querySelector(".Btn");
    let personObj = [
        { id: 22, class: 7 },
        { name: "Rohan", age: 12 },
        { state: "Delhi", country: "India" },
    ];
    BtnEle.addEventListener("click", () => {
        personObj = Object.assign(...personObj);
        for (let i in personObj) {
            resEle.innerHTML += "key = " + i + " : Value = " + personObj[i] + "<br>";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が表示されます。

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

「CLICK HERE」ボタンをクリックした後

ボタンをクリックすると、Object.assign(...personObj)によって配列内の3つのオブジェクトが1つに統合され、それぞれのキーと値が画面に出力されます。

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

ポイント解説

  • Object.assign(...配列)：スプレッド構文で配列の要素（オブジェクト）を展開し、すべてのプロパティを1つの新しいオブジェクトにコピーします。
  • 同名キーの上書きに注意：複数のオブジェクトに同じキーが存在する場合、後ろにあるオブジェクトの値が優先されて上書きされます。
  • 代替手段：ES2018以降では、オブジェクトスプレッド構文（{ ...obj1, ...obj2 }）やreduce()メソッドを使っても同じ結果を得られます。

  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でnull・空のオブジェクトを含む配列に値を割り当てる方法

    JavaScriptでは、forEach()メソッドとObject.keys()メソッドを組み合わせることで、nullや空のオブジェクトを含む配列に対して効率的に値を割り当てることができます。本記事では、実際のコード例を交えながら、その具体的な実装方法をわかりやすく解説します。 サンプルコード 以下は、JavaScriptを使用してnull/空のオブジェクトを持つ配列に値を割り当てるコード例です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu