ES6 の Object.assign() メソッド-jsチュートリアル-php.cn

ES6 の Object.assign() メソッド

小云云

リリース： 2018-02-03 13:32:57

オリジナル

1763 人が閲覧しました

この記事では、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}

ログイン後にコピー