JavaScriptメソッド：Object.assign（）

JavaScriptには、これらのオブジェクトを操作するために使用できるあらゆる種類のメソッドを持つObjectクラスがあります。この記事では、Object.assign（）メソッドを見て、その使用方法を示します。

少し背景

念のため、オブジェクトはJavaScriptのデータ型であり、Pythonの辞書に似ており、キーと値のペアと呼ばれるものがあります。オブジェクトがあるとしましょう。それをハリーと呼びましょう。次のようなキーと値のペアが含まれている可能性があります。

let Harry = {
 	firstName: 'Harry',
 	lastName: 'Potter',
 	age: 11,
 	house: 'Gryffindor',
 	pet: {
   	  name: 'Hedwig',
        animal: 'owl'
 	}
};

この状況でのテーマの基本的なルールは、コロンの左側にあるプロパティ名がキーであり、右側にあるものが値であるということです。キーと値のほとんどはかなり単純です。少し厄介かもしれない唯一のものは、最後のプロパティであるペットです。この場合でもペットが鍵となります。ただし、値は、さらに2つのkey：valueペアを持つオブジェクトです。これをネストされたオブジェクトと呼びます。

Object.assign（ target、…sourceObjs）;

assign（）と呼ばれるObjectメソッドがあります これを使用して、1つ以上のソースオブジェクトを取得し、それらをターゲットオブジェクトにコピーできます。コードに直接移動して、コードの機能を確認しましょう。

let hpChar = {
 firstName: 'Harry',
 lastName: 'Potter',
 age: 11,
 house: 'Gryffindor',
 pet: {
   name: 'Hedwig',
   animal: 'owl'
 }
}
 
Object.assign({}, hpChar);
console.log(hpChar, '\n');
Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);
 
console.log(hpChar)

一緒にコードを見ていきましょう。まず、hpCharというオブジェクトリテラルから始めます。このhpCharには、firstName、lastName、age、house、およびpetプロパティがあります。そのペットプロパティはそれ自体がオブジェクトであり、それ自体にいくつかのキーと値があります。

次に、ここで説明するメソッドの最初のインスタンスがあります。 Object.assignは2つ以上のパラメーターを取ります。 1つ目は常に 値を割り当てるターゲットオブジェクト。この場合、それは空のオブジェクトです。

2番目のパラメーターは、上記で定義したオブジェクトです。これは、ターゲットオブジェクト（最初のパラメータ）に割り当てるために取得するソースマテリアルです。

次の行は、結果をコンソールに記録します：

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

{ firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Hedwig', animal: 'owl' } }

それほどひどく違うものはありませんよね？これは、hpCharを空のオブジェクトに割り当てたためです。基本的にオブジェクトのクローンを作成しました。もう一度やり直したが、いくつかの値を変更した場合はどうなりますか？今回は空のオブジェクトの代わりに、それをhpCharオブジェクトに置き換えましょう。これが今回のターゲットになります。 2番目のパラメータのいくつかの値を変更してみましょう。キーを同じに保つ限り、値を自由に試してみてください。

置き換える値は次のとおりです。ターゲットオブジェクトの値を変更する必要がない場合は、ソースオブジェクトの値を明示的に呼び出す必要はありません。

Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);

2回目に結果をコンソールに記録すると、ターゲットオブジェクトが返され、プロパティが新しい値で上書きされます。これで、コンソールは次のようになります。

{ firstName: 'Hermione',
  lastName: 'Grainger',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Crookshanks', animal: 'cat' } }

これは、同じプロパティを持つ2つのオブジェクトをマージする方法です。では、異なるプロパティを持つ3つのオブジェクトをマージするとしたらどうでしょうか。何が起こると思いますか？

var obj1 = {
 foo: 1
}
 
var obj2 = {
 bar: 2
}
 
var obj3 = {
 baz: 3
}
 
Object.assign(obj1, obj2, obj3)
 
console.log(obj1);

Obj1はターゲットオブジェクトです。 Obj2とobj3はソースオブジェクトです。それらはターゲットオブジェクトにマージされます。プロパティが重複していないため、すべてのプロパティがそれぞれの値でobj1にマージされます。

{ foo: 1, bar: 2, baz: 3 }

あります！ Object.assign（）の実用的な実装。ここでの概念を理解すると、JavaScriptフレームワークの学習に一歩近づきます。

準備はいいですか？

これらのチュートリアルを見て、さらに学習してください…

JavaScript Object.keys（）

JavaScriptLetのステップバイステップガイド

JavaScript typeof

JavaScript文字列に含まれるもの：ステップバイステップガイド

JavaScript変数