JavaScript assign オブジェクトの値をコピー

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

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

オブジェクトの値をコピーする(assign)

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

コピー元オブジェクトからコピー先オブジェクトに値をコピーします。
コピー元オブジェクトは1つ以上でも可能です。
IEは未対応です。
以下は、MDNのassignメソッドのリンクです。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/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行目は、メソッドでオブジェクトの値をコピーしています。
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に上書きされます。