複数のオブジェクトを一つにまとめる(assign)

広告

Object オブジェクトのメソッドである assign メソッドを使うことで、複数のオブジェクトを 1 つにまとめたオブジェクトを取得することができます。また同じメソッドを使うことでオブジェクトの複製を作成することもできます。ここでは JavaScript で複数のオブジェクトを一つにまとめる方法について解説します。

複数のオブジェクトを一つにまとめる(assign)

複数のオブジェクトを一つにまとめたるには Object オブジェクトの assign メソッドを使います。書式は次の通りです。

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

1 番目の引数がコピー先となるオブジェクトです。このオブジェクトに対して 2 番目以降のオブジェクトのプロパティを順番にコピーして追加していきます。戻り値は追加が終わったあとのコピー先オブジェクトです。

コピー先オブジェクトに対して他の引数で指定されたオブジェクトのプロパティが追加されていくので、コピー先オブジェクト自身が変更される点に注意してください。

次のサンプルをみてください。

let objA = {a:'Ant'};
let objB = {b:'bee'};
let objC = {c:'cicada'};
let allObj = Object.assign(objA, objB, objC);

console.log(allObj);
--> {a: "Ant", b: "bee", c: "cicada"}

console.log(objA);
--> {a: "Ant", b: "bee", c: "cicada"}

複数のオブジェクトを一つにまとめる(assign)(1)

3 つのオブジェクトに含まれていたプロパティがひとつにまとめられました。なおすべてのプロパティを持つ新しいオブジェクトが作成されているのではなく、 assign メソッドの最初の引数のオブジェクトに他のオブジェクトのプロパティが追加されている点に注意してください。 assign メソッドの戻り値は最初の引数のオブジェクトと同じです。

既存のオブジェクトを変更せずにオブジェクトのプロパティを一つにまとめたオブジェクトを取得したい場合は、 assign メソッドの最初に引数に空のオブジェクト {} を指定します。次のサンプルをみてください。

let objA = {a:'Ant'};
let objB = {b:'bee'};
let objC = {c:'cicada'};
let allObj = Object.assign({}, objA, objB, objC);

console.log(allObj);
--> {a: "Ant", b: "bee", c: "cicada"}

複数のオブジェクトを一つにまとめる(assign)(2)

空のオブジェクトに対して他のオブジェクトのプロパティが順番に追加され、ひとつにまとめられたオブジェクトを戻り値として取得できます。

なおオブジェクトの中に同じプロパティ名を持つプロパティがあった場合は、あとに記述されているプロパティで上書きされます。次のサンプルをみてください。

let objA = {a:'Ant', b:'bee'};
let objB = {c:'cicada', b:'butterfly'};
let allObj = Object.assign({}, objA, objB);

console.log(allObj);
--> {a: "Ant", b: "butterfly", c: "cicada"}

複数のオブジェクトを一つにまとめる(assign)(3)

プロパティ名 b を持つプロパティがまとめようとする 2 つのオブジェクトにそれぞれ含まれています。この場合、後に記述されたプロパティによって上書きされます。

オブジェクトの複製を作成する

空のオブジェクトに対してひとつだけオブジェクトを指定して assign メソッドを呼び出すことでオブジェクトの複製を作成することができます。次のサンプルをみてください。

let obj = {a:'Ant', b:'bee'};
let cloneObj = Object.assign({}, obj);

console.log(cloneObj);
--> {a: "Ant", b: "bee"}

console.log(obj === cloneObj);
--> false

オブジェクトの複製を作成する(1)

assign メソッドの 2 番目の引数に指定したオブジェクトの複製を作成し、戻り値として取得しました。なお 1 番目の引数である空のオブジェクトに対してプロパティを追加したものなので、 2 つのオブジェクトは名前や値が同じプロパティを持っていますが別のオブジェクトです。

-- --

JavaScript で複数のオブジェクトを一つにまとめる方法について解説しました。

( Written by Tatsuo Ikura )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。