ES6 の Object.assign() メソッド

この記事では、Object.assign メソッドがオブジェクトをマージし、ソース オブジェクト (source) のすべての列挙可能なプロパティをターゲット オブジェクト (target) にコピーするために使用されることを主に共有します。次の記事では、主に ES6 Friends について紹介します。新しく追加された Object.assign() メソッドに関する情報が必要な場合は、それを参照してください。

はじめに

オブジェクト A のプロパティをオブジェクト B にコピーすることは、JavaScript プログラミングでは非常に一般的な操作です。次の記事では、オブジェクトのコピーに使用できる ES6 の Object.assign() プロパティを紹介します。

JavaScript エコシステムでは、オブジェクトのコピーには拡張という別の用語があります。以下は 2 つの JS ライブラリによって提供される拡張インターフェイスです:

プロトタイプ: Object.extend(destination, source)

Underscore.js: _.extend(destination, *sources)

Object.assign() の概要

ES6 は、オブジェクトのプロパティをマージ/コピーするための Object.assign() を提供します。

Object.assign(target, source_1, ..., source_n)

これは、ターゲット オブジェクトを変更してからそれを返します。まず、source_1 オブジェクトの列挙可能な属性をすべてターゲットにコピーし、次に、source_1 の属性を順番にコピーします。

1. 属性名は文字列またはシンボルにすることができます

ES6 では、オブジェクトの属性名は文字列またはシンボルにすることができます。 Symbol 値は一意であるため、Symbol がオブジェクトの属性名として使用される場合、同じ名前の属性が表示されないことが保証されます。オブジェクトの属性名が文字列またはシンボルの場合、Object.assign() は両方をサポートします。

2. 属性のコピーは代入によって実装されます

ターゲット オブジェクトの属性はコピーによって作成されます。つまり、ターゲットにセッター メソッドがある場合、それらのメソッドが呼び出されます。

もう 1 つの解決策は、定義を通じて実装することです。これにより、新しい独自のプロパティが作成され、setter メソッドは呼び出されません。実際、Object.assign() 提案の別のバージョンではこのメソッドが使用されています。ただし、この提案は ES6 で拒否されたため、後のバージョンで再度検討される可能性があります。

Object.assign() の使用例

1. オブジェクトのプロパティを初期化する

通常、コンストラクターはオブジェクトのプロパティを複数回繰り返す必要があります。コード例のコンストラクターでは、x と y の両方が 2 回繰り返されています:

class Point
{
 constructor(x, y)
 {
  this.x = x;
  this.y = y;
 }
}

可能であれば、私の個人的な好みは、すべての冗長性を省略することです。 (実際、CoffeeScript と TypeScript には、コンストラクター内のプロパティ名が重複する問題を解決するための構文があります。):

class Point
{
 constructor(this.x, this.y){}
}

少なくとも、Object.assign() は重複を減らすのに役立ちます:

class Point
{
 constructor(x, y)
 {
  Object.assign(this, { x, y });
 }
}

ES6 では、 { x, y } は { x: x, y: y } の略称です。

2. オブジェクトにメソッドを追加します

ECMAScript 5 では、関数式を使用してオブジェクトにメソッドを追加します:

ES5 では、関数キーワードを使用してオブジェクトの新しいメソッドを定義する必要があります:

MyClass.prototype.foo = function(arg1, arg2)
{
 //...
};

ES6 では、オブジェクト メソッドの定義がより簡潔になり、 function キーワードを使用する必要がありません。この時点で、Object.assign() を使用して、オブジェクトに新しいメソッドを追加できます:

Object.assign(MyClass.prototype,
{
 foo(arg1, arg2)
 {
  //...
 }
});

3. オブジェクトをコピーします。

Object.assign() を使用して、プロトタイプを含むオブジェクトを深くコピーします

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({ __proto__: obj.__proto__ }, obj); // 输出{x:1,y:2}

console.log(copy) // 输出{x:1,y:2}

のみ独自の属性をコピー:

var Point = function(x)
{
 this.x = x;
}

Point.prototype.y = 2;

var obj = new Point(1);

var copy = Object.assign({}, obj);

console.log(copy) // 输出{x:1}

関連推奨:

7 ES6 で共有する実践的なヒント

ES6 でのクラスの get および set の使用例 javascript

のクラスの静的メソッドの機能は何ですかES6

以上がES6 の Object.assign() メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。