javascript オブジェクトをコピーまたはマージする

作成日 2020.10.14
更新日 2022.07.11
javascript
javascript

javascriptで、Object.assignを使用してオブジェクトをコピーまたはマージするサンプルコードを記述してます。

1. 環境
2. Object.assign使い方
3. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.114

Javascript サンプル集はこちら

Object.assign使い方

Object.assignを使用して、オブジェクトをコピーまたはマージすることが可能です。

コピーは、第1引数に「{}」を指定することで可能です。

let obj = { a:1, b:2 };

let result = Object.assign({}, obj);

console.log(result); // {a: 1, b: 2}

マージする場合は、第1引数に指定したオブジェクトもマージされます。

const obj1 = { a: 1, b: 2 }
const obj2 = { c: 3, d: 4 }

const result = Object.assign(obj1, obj2);

console.log(obj1) // {a: 1, b: 2, c: 3, d: 4}
console.log(obj2) // {c: 3, d: 4}
console.log(result) // {a: 1, b: 2, c: 3, d: 4}

同じ値の場合は、第2引数に指定オブジェクトの値が優先されます。

const obj1 = { a: 1, b: 2}
const obj2 = { b: 22, c: 3, d: 4}

Object.assign(obj1, obj2);

console.log(obj1) // {a: 1, b: 22, c: 3, d: 4}

オブジェクトがネストされていても、マージは可能です。

const obj1 = { a: 1, b: 2 }
const obj2 = { c: 3, d: { e: 4, f: 5 } }

Object.assign(obj1, obj2);

console.log(obj1)

実行結果

スプレッド構文を使用することも可能です。

let obj1 = { a: 1, b: 2}
let obj2 = { c: 3, d: 4}

obj1 = { ...obj1 , ...obj2 }

console.log(obj1) // {a: 1, b: 22, c: 3, d: 4}

サンプルコード

以下は、
「マージ」ボタンをクリックすると、用意したオブジェクトをマージして表示する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container text-center w-50" style="margin-top:200px">

    <h2><span class="badge badge-success"></span></h2>
    <h2><span class="badge badge-success"></span></h2>

    <h2><span class="badge badge-secondary">マージ後</span></h2>

    <button id="btn" type="button" class="btn btn-raised btn-danger">
      マージ
    </button>

  </div>

  <script>

    // オブジェクト
    const obj1 = {
      name: 'mebee',
      tel: '01234567'
    };

    const obj2 = {
      email: 'info@mebee.info',
      favorite: { q1: 'apple', q2: 'drive' },
    };

    function hoge() {
      // マージ
      Object.assign(obj1, obj2);
      // 結果を表示
      let elm = document.getElementsByClassName("badge")[2];
      elm.textContent = JSON.stringify(obj1);
    }

    // 表示用要素取得
    let elm1 = document.getElementsByClassName("badge")[0];
    let elm2 = document.getElementsByClassName("badge")[1];

    // JSON 文字列に変換してオブジェクトを表示
    elm1.textContent = JSON.stringify(obj1);
    elm2.textContent = JSON.stringify(obj2);

    // ボタンを取得
    let elm = document.getElementById('btn');

    // クリックイベントを登録
    elm.onclick = function () {
      hoge();
    };

  </script>
</body>

</html>

オブジェクトがマージされていることが確認できます。

また、document.getElementByIdを省略して記述することも可能です。関数もアロー関数を使用できます。

アロー関数の使い方

// 表示用要素取得
let elm1 = document.getElementsByClassName("badge")[0];
let elm2 = document.getElementsByClassName("badge")[1];

// JSON 文字列に変換してオブジェクトを表示
elm1.textContent = JSON.stringify(obj1);
elm2.textContent = JSON.stringify(obj2);

// クリックイベントを登録
btn.onclick = () => {
  hoge();
};