Object.assign()-Methode in ES6

In diesem Artikel erfahren Sie hauptsächlich, dass die Object.assign-Methode zum Zusammenführen von Objekten und zum Kopieren aller aufzählbaren Eigenschaften des Quellobjekts (Quelle) in das Zielobjekt (Ziel) verwendet wird. Der folgende Artikel stellt Ihnen hauptsächlich Freunde vor Bei Bedarf können Sie sich auf die relevanten Informationen zur neuen Object.assign()-Methode in ES6 beziehen. Ich hoffe, dass sie allen helfen kann.

Vorwort

Das Kopieren der Eigenschaften von Objekt A auf Objekt B ist eine sehr häufige Operation in der JavaScript-Programmierung. Im folgenden Artikel wird die Object.assign()-Eigenschaft von ES6 vorgestellt, die zum Kopieren von Objekten verwendet werden kann.

Im JavaScript-Ökosystem hat das Kopieren von Objekten einen anderen Begriff: erweitern. Im Folgenden sind die Erweiterungsschnittstellen aufgeführt, die von zwei JS-Bibliotheken bereitgestellt werden:

Prototyp: Object.extend(destination, source)

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

Einführung in Object.assign()

ES6 bietet Object.assign(), das zum Zusammenführen/Kopieren der Eigenschaften von Objekten verwendet wird.

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

Das Zielobjekt wird geändert und dann zurückgegeben: Kopieren Sie zuerst alle aufzählbaren Eigenschaften des Objekts „Quelle_1“ in das Ziel und dann die Eigenschaften von „Quelle_1“ usw. der Reihe nach.

1. Der Attributname kann eine Zeichenfolge oder ein Symbol sein

In ES6 kann der Attributname des Objekts eine Zeichenfolge oder ein Symbol sein. Da der Symbolwert eindeutig ist, bedeutet dies, dass bei Verwendung von Symbol als Attributname eines Objekts garantiert ist, dass Attribute mit demselben Namen nicht angezeigt werden. Wenn der Objektattributname eine Zeichenfolge oder ein Symbol ist, unterstützt Object.assign() beides.

2. Das Kopieren von Attributen erfolgt durch Zuweisung

Die Attribute des Zielobjekts werden durch Kopieren erstellt, was bedeutet, dass diese aufgerufen werden, wenn das Ziel Settermethoden hat.

Eine andere Lösung besteht darin, es durch Definition zu implementieren, wodurch neue eigene Eigenschaften erstellt werden und nicht die Setter-Methode aufgerufen wird. Tatsächlich verwendet eine andere Version des Object.assign()-Vorschlags diese Methode. Dieser Vorschlag wurde jedoch in ES6 abgelehnt und kann in späteren Versionen erneut berücksichtigt werden.

Verwendungsbeispiele von Object.assign()

1. Objekteigenschaften initialisieren

Der Konstruktor dient normalerweise nur dazu, die Eigenschaften des Objekts zu initialisieren um es mehrmals zu tun. Attributnamen duplizieren. Im Konstruktor des Beispielcodes werden sowohl x als auch y zweimal wiederholt:

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

Wenn möglich, ist es meine persönliche Präferenz, jegliche Redundanz wegzulassen. (Tatsächlich verfügen sowohl CoffeeScript als auch TypeScript über eine Syntax, um das Problem wiederholter Eigenschaftsnamen in Konstruktoren zu lösen.):

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

Zumindest kann uns Object.assign() dabei helfen, einige Duplikate zu reduzieren:

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

In ES6 ist { x, y } die Abkürzung von { x: x, y: y }.

2. Eine Methode zu einem Objekt hinzufügen

ECMAScript 5, Sie verwenden einen Funktionsausdruck, um eine Methode zu einem Objekt hinzuzufügen:

In ES5 müssen Sie verwenden Funktionsschlüsselwortdefinition Neue Methoden von Objekten:

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

In ES6 ist die Definition von Objektmethoden prägnanter und erfordert nicht die Verwendung des Funktionsschlüsselworts. Zu diesem Zeitpunkt können Sie Object.assign() verwenden, um dem Objekt eine neue Methode hinzuzufügen:

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

3. Kopieren Sie das Objekt

Verwenden Sie Object.assign(), um es tief zu kopieren das Objekt, einschließlich seines Prototyps

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}

Kopieren Sie nur seine eigenen Eigenschaften:

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}

Verwandte Empfehlungen:

7 praktische ES6-Tipps zum Teilen

Beispiele für die Get- und Set-Verwendung von Klassen in ES6-Javascript

Was sind die Funktionen statischer Methoden von Klassen in ES6

Das obige ist der detaillierte Inhalt vonObject.assign()-Methode in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!