JavaScript assignでオブジェクトをマージする

JavaScriptのassignメソッドでオブジェクトをマージするサンプルです。

目次

サンプル オブジェクトをマージする(assign)
  同じキー項目の値は上書きされる
  同じキー項目の値の上書きを避ける
  オブジェクトに階層がある場合

オブジェクトをマージする(assign)

Object.assign(コピー先オブジェクト, コピー元オブジェクト)

assignメソッドでマージするサンプルです。

<script>
  const color1 = {
    id: 1,
    name: "赤",
  };
  const color2 = {
    romaji: "red",
  };

  Object.assign(color1, color2);

  console.log(color1); //{id: 1, name: "赤", romaji: "red"}
  console.log(color2); //{romaji: "red"}
</script>

2~5行目は、1つめのオブジェクトです。
6~8行目は、2つめのオブジェクトです。
10行目は、メソッドで2つのオブジェクトをマージしています。
12行目は、1つめのオブジェクトです。値が追加されています。
13行目は、2つめのオブジェクトです。値は変わりません。

同じキー項目の値は上書きされる

同じキー項目の場合のサンプルです。

<script>
  const color1 = {
    id: 1,
    name: "赤",
  };
  const color2 = {
    id: 2,
    romaji: "red",
  };

  Object.assign(color1, color2);

  console.log(color1); // {id: 2, name: "赤", romaji: "red"}
  console.log(color2); // {id: 2, romaji: "red"}
</script>

3,7行目のキー項目は同じidです。
その場合、後から追加した値で上書きされます。

同じキー項目の値の上書きを避ける

同じキー項目の値の上書きを避けるサンプルです。

<script>
  const color1 = {
    id: 1,
    name: "赤",
  };
  const color2 = {
    id: 2,
    romaji: "red",
  };

  const color3 = Object.assign({}, color1, color2);

  console.log(color3); // {id: 2, name: "赤", romaji: "red"}
  console.log(color1); // {id: 1, name: "赤"}
  console.log(color2); // {id: 2, romaji: "red"}
</script>

11行目は、空のオブジェクト、1つめのオブジェクト、2つめのオブジェクトをマージして新しい変数に代入しています。
引数の2つめ以降のオブジェクトは上書きされません。

オブジェクトに階層がある場合

オブジェクトに階層がある場合のサンプルです。

<script>
  const object1 = {
    id: 1,
    name: {
      name: "赤",
      romaji: "red",
    },
  };
  const object2 = {
    name: {
      romaji: "blue",
    },
    place: "tokyo",
  };

  Object.assign(object1, object2);
  console.log(object1); // {id: 1, name: {romaji: "blue"}, place: "tokyo"}
</script>

4~7行目と10~12行目は階層があります。
10~12行目の値がobject1に上書きされます。

関連の記事

jQuery extendでオブジェクトをマージする

△上に戻る