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

JavaScriptのObject.assign()メソッドとは？使い方と実例をわかりやすく解説

Object.assign()メソッドとは

Object.assign()は、1つ以上のソースオブジェクトのプロパティをターゲットオブジェクトにコピーするためのメソッドです。内部的にはソースオブジェクトに対して「get」、ターゲットオブジェクトに対して「set」を使用するため、ゲッターとセッターも呼び出されます。戻り値は、プロパティと値がコピーされたターゲットオブジェクトそのものです。また、ソースにnullやundefinedが含まれていてもエラーはスローされないという特徴があります。

構文

Object.assign(target, ...sourceObjects);

このメソッドは、第1引数にターゲットオブジェクト、第2引数以降に1つ以上のソースオブジェクトを受け取ります。ソースオブジェクトのプロパティが順番にターゲットへコピーされ、最終的にターゲットオブジェクトが返されます。

例1：複数のオブジェクトをマージする

次の例では、3つのソースオブジェクト「obj1」「obj2」「obj3」のプロパティが、空のターゲットオブジェクト「obj」にコピーされ、そのターゲットオブジェクトが出力として返されます。

<html>
<body>
<script>
   var obj1 = { a: 10, b:20 };
   var obj2 = { c: 30, d:40 };
   var obj3 = { e: 50 };
   var obj = Object.assign({}, obj1, obj2, obj3);
   document.write(JSON.stringify(obj));
</script>
</body>
</html>

出力結果

{"a":10,"b":20,"c":30,"d":40,"e":50}


例2：同名のプロパティが存在する場合

複数のオブジェクトに同名のプロパティが存在する場合、Object.assign()は後から割り当てられた値を優先します。たとえば、「obj1」「obj2」「obj3」の3つのオブジェクトすべてにプロパティ「c」が共通して存在し、それぞれ1、3、0という値が設定されているとします。この場合、obj3で指定された値0が、それより前に割り当てられた値1と3を上書きします。そのため出力結果では、プロパティ「c」には0が代入されているのが確認できます。

<html>
<body>
<script>
   var obj1 = { a: 10, b:20, c:1 };
   var obj2 = { b: 30, d:10, c:3 };
   var obj3 = { e: 60, d:70, c:0 };
   var obj = Object.assign({}, obj1, obj2, obj3);
   document.write(JSON.stringify(obj));
</script>
</body>
</html>

出力結果

{"a":10,"b":30,"c":0,"d":70,"e":60}
  1. JavaScriptのRegExp（正規表現）オブジェクトとは？基本の使い方をわかりやすく解説

    RegExp（正規表現）オブジェクトは、テキストに対してパターンマッチングを行い、目的の文字列部分を検索・抽出するために使用されます。JavaScriptでは、RegExpオブジェクトを「RegExpコンストラクタ」または「リテラル構文」の2通りの方法で作成できます。 RegExpオブジェクトの作成方法 コンストラクタを使用する場合： new RegExp(pattern) リテラル構文を使用する場合： /pattern/ 主なメソッド test()：文字列がパターンに一致するかどうかを真偽値（true / false）で返します。 exec()：パターンに一致した文字列を返します。

  2. JavaScriptのオブジェクト初期化子とは？使い方をサンプルコードで解説

    オブジェクト初期化子とは オブジェクト初期化子（Object Initializer）は、新しく生成したオブジェクトを初期化するための式です。波括弧 {} の中に、「プロパティ名」と「それに対応する値」のペアを0個以上、カンマ区切りで列挙して記述します。 これにより、変数宣言と同時にオブジェクトの中身を簡単に定義することができます。 以下は、JavaScriptでオブジェクト初期化子を使用したサンプルコードです。 サンプルコード <!DOCTYPE html> <html lang="en"> <head> <meta chars