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

【保存版】2つのJavaScriptオブジェクトのプロパティを動的にマージする方法

JavaScriptでは、2つ以上のオブジェクトのプロパティを動的にマージ（結合）したい場面がよくあります。本記事では、代表的な2つの方法である「Object.assign()」と「スプレッド構文」について、サンプルコードと実行結果をもとにわかりやすく解説します。

1) Object.assign()を使う方法

Object.assign()メソッドは、1つ以上のソースオブジェクトからすべてのプロパティの値をターゲットオブジェクトへコピーするために使用します。戻り値としてターゲットオブジェクトが返されます。

例1：基本的なマージ

<html>
<body>
<script>
   var target = { a: "ram", b: "rahim" };
   var source = { c: "akbar", d: "anthony" };
   var returnedTarget = Object.assign(target, source);
   document.write(JSON.stringify(target));
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

出力結果

{"a":"ram","b":"rahim","c":"akbar","d":"anthony"}
{"a":"ram","b":"rahim","c":"akbar","d":"anthony"}

この例では、targetとsourceという2つのオブジェクトをObject.assign()で結合しています。sourceのプロパティcとdがtargetにコピーされ、両方の出力が同一の内容になっているのが確認できます。これは、Object.assign()が第一引数のオブジェクトそのものを変更し、それをそのまま返すためです。

ここで注意したいのは、マージ対象のオブジェクトに同じキーが存在する場合の挙動です。この場合、後から渡されたオブジェクトの値で上書きされます。次の例は、同じキーbに異なる値が設定されているケースです。

例2：同じキーを持つ場合の挙動

<html>
<body>
<script>
    var target = { a: "ram", b: "rahim" };
   var source = { b: "akbar", d: "anthony" };
   var returnedTarget = Object.assign(target, source);
   document.write(JSON.stringify(target));
   document.write("</br>");
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

出力結果

{"a":"ram","b":"akbar","d":"anthony"}
{"a":"ram","b":"akbar","d":"anthony"}

この例では、targetとsourceの両方にキーbが存在します。その結果、後から指定したsourceの値「akbar」で上書きされ、targetの元の値「rahim」は失われています。つまり、Object.assign()では後ろに位置するオブジェクトの値が優先されるという仕様になっています。

2) スプレッド構文を使う方法

スプレッド構文（spread operator）を使うと、複数の要素・変数・引数が期待される箇所で式を展開できます。主に複数の値を持つ配列で使用される構文ですが、JavaScriptのオブジェクトはキーと値のペアで構成されているため、これを使って複数のオブジェクトを1つにまとめることも可能です。

構文

var target = {...obj1, ...obj2, ...}

例

<html>
<body>
<script>
   var target = { a: "ram", b: "rahim" };
   var source = { b: "akbar", d: "anthony" };
   var returnedTarget = {...target, ...source}
   document.write(JSON.stringify(returnedTarget));
</script>
</body>
</html>

出力結果

{"a":"ram","b":"akbar","d":"anthony"}

スプレッド構文の場合も、キーが重複すると後に記述したオブジェクトの値が優先されます。上記の例では、source側のbの値「akbar」が採用されています。

まとめ

オブジェクトのマージには、ES2015で導入されたObject.assign()と、ES2018以降で標準化されたスプレッド構文の2つの方法があります。どちらもキーが重複した場合は後方のオブジェクトの値で上書きされるという共通の仕様です。また、スプレッド構文は元のオブジェクトを変更せず新しいオブジェクトを生成するため、イミュータブルな処理を行いたい場合に特に便利です。新規のコードでは可読性の高いスプレッド構文が推奨される傾向にありますが、レガシー環境への対応などを考慮してObject.assign()を使うケースもあります。用途に応じて最適な方法を選びましょう。

  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入門】複数のオブジェクトを1つにマージして単一のオブジェクト配列を作成する方法

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