8 回閲覧されました

みなさんこんにちは、jonioです。

JavaScriptのObject.assignについて簡単なサンプルコードで解説します。

Laravelの無料学習サイトを作りました

Laravelをこれから勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

Object.assignとは

あるオブジェクトを1つ(または複数)のオブジェクトで上書きします。

配列の上書きもできます。

上書きをするので破壊的なメソッドです。

基本の形は下記です。

Object.assign(あるオブジェクト, 上書きに使うオブジェクト);

Object.assign(あるオブジェクト, 上書きに使うオブジェクト);

上書きに使うメソッドは複数設定することができます。

その場合は下記の記述になります。

Object.assign(あるオブジェクト, 上書きに使うオブジェクト1, 上書きに使うオブジェクト2, ・・・);

Object.assign(あるオブジェクト, 上書きに使うオブジェクト1, 上書きに使うオブジェクト2, ・・・);

この様に引数を追記していけばいいです。

サンプルコードで理解を深めましょう。

サンプルコード(オブジェクトの場合)

下記のコードで考えます。

const target = { a: 1 };
const source = { b: 2, a: 9 };

const result = Object.assign(target, source);

console.log(result); // { a: 9, b: 2 }
console.log(target); // { a: 9, b: 2 }

const target = { a: 1 };
const source = { b: 2, a: 9 };

const result = Object.assign(target, source);

console.log(result); // { a: 9, b: 2 }
console.log(target); // { a: 9, b: 2 }

4行目の結果が6行目ですがキーの「a」に該当する値が「9」に上書きされています。

このように同じキーがある場合はキーに該当する値が上書きされます。

破壊的なメソッドなので元々のtargetは6行目の結果と同じになります。

今のサンプルコードはオブジェクトの上書きをしていますが空っぽのオブジェクトを用意して上書きのオブジェクトを使って新しいオブジェクトを作成することもできます。(下記のコードを参照)

const a = { x: 1 };
const b = { y: 2 };

const merged = Object.assign({}, a, b);

console.log(merged); // { x: 1, y: 2 }

const a = { x: 1 };
const b = { y: 2 };

const merged = Object.assign({}, a, b);

console.log(merged); // { x: 1, y: 2 }

サンプルコード(配列の場合)

下記のコードで考えます。

const a1 = [1, 2, 3];
const a2 = [9, 8];

Object.assign(a1, a2);

console.log(a1); // [9, 8, 3] 

const a1 = [1, 2, 3];
const a2 = [9, 8];

Object.assign(a1, a2);

console.log(a1); // [9, 8, 3] 

オブジェクトの場合は上書きをする時にキーで対応させますが配列の場合はインデックス番号で対応させます。

だから「a1」の「1」を「a2」の「9」で上書きをして「a1」の「2」を「a2」の「8」で上書きしています。