Einführung in neue ECMAscript-Objektfunktionen

1. Objekteigenschaften

1.1 Attributnotation

ECMAScript 2015 ermöglicht es, Variablen und Funktionen direkt in geschweiften Klammern als Eigenschaften und Methoden von Objekten zu schreiben. Diese Schreibweise ist prägnanter.

Der Beispielcode lautet wie folgt:

let name = 'Eine Schüssel Zhou'
let job = 'Front-End-Ingenieur'

// Die Attributnotation wird direkt in die Variable let obj1 = { geschrieben.
  Name,
  Arbeit,
  sagMich() {
    console.log(Name)
  }
}
// Äquivalent zu let obj2 = {
  Name: Name,
  Beruf: Beruf,
  sagIch: Funktion() {
    console.log(Name)
  }
}
konsole.log(obj1, obj2);

2. Berechnen Sie den Eigenschaftsnamen

In JavaScript definieren wir Eigenschaften auf zwei Arten: Klammern [] oder .:

// Methode 1 obj.foo = true;
// Methode 2 obj['a'+'bc'] = 123;

Der .-Operator weist erhebliche Einschränkungen auf. Beispielsweise können Attribute wie der Vorname nur mit eckigen Klammern definiert werden. Der Klammeransatz ermöglicht es uns, Eigenschaften mithilfe von Variablen oder Zeichenfolgenliteralen zu definieren, die bei der Verwendung von Bezeichnern zu einem Syntaxfehler führen würden.

Zum Beispiel:

lass person = {},
  lastName = "Nachname";

person["Vorname"] = "Nicholas";
person[Nachname] = "Zakas";
console.log(Person["Vorname"]); // "Nicholas"
console.log(Person[Nachname]); // "Zakas"

Diese beiden Methoden können nur mit eckigen Klammern definiert werden. In ES5 können Sie Zeichenfolgenliterale als Eigenschaften in Objektliteralen verwenden, zum Beispiel:

lass Person = {
  "Vorname": "Nicholas"
};
console.log(Person["Vorname"]); // "Nicholas"

Wenn unser Attributname jedoch in einer Variablen vorhanden ist oder berechnet werden muss, ist es unmöglich, das Attribut mit Objektliteralen zu definieren.

Wenn der Eigenschaftsname vor ES5 eine Variable war oder dynamisch berechnet werden musste, konnte darauf nur über Objekt.[Variablenname] zugegriffen werden.

sei p = {
  Name: 'Li Si',
  Alter: 20
}
let attName = "Name";
console.log(p[attName]) //Hier stellt attName einen Variablennamen dar.
// Li Si

Darüber hinaus kann diese Methode zur dynamischen Berechnung von Attributnamen nicht in Literalen verwendet werden.

let attName = "Name";
  sei p = {
    attName: „Attributname“, // Hier ist attName der Attributname, was dem Definieren eines Attributs mit dem Attributnamen attName auf jeder Ebene von p entspricht.
    Alter: 20
  }
console.log(p[attName]) // undefiniert

In ECMAScript 2015 können Sie den Eigenschaftsnamen in [] einschließen, um auf vordefinierte Variablen in den Klammern zu verweisen.

let attName = "Name";
  sei p = {
    [attName]: 'Li Si', // verweist auf die Variable attName. Dies entspricht dem Hinzufügen eines Attributs mit dem Namen Name und dem Alter: 20
  }
console.log(p[attName]) // Mehr dazu

Die Klammern in einem Objektliteral geben an, dass der Eigenschaftsname ausgewertet werden soll und sein Inhalt als Zeichenfolge ausgewertet wird.

3.Objektmethoden

3.1Object.is()-Methode

ECMAScript 2015 verfügt nur über zwei Operatoren zum Vergleichen zweier Werte auf Gleichheit: den Gleichheitsoperator ( == ) und den strikten Gleichheitsoperator ( === ).

• Allerdings haben beide Betreiber Nachteile
• Bei Verwendung des Gleichheitsoperators werden Datentypen automatisch konvertiert

Der strenge Gleichheitsoperator bewirkt, dass NaN ungleich sich selbst ist und +0 gleich -0 ist.

Zur Lösung dieses Problems wurde in ECMAScript 2015 der Algorithmus „ Same-value equality vorgeschlagen. Object.is ist eine neue Möglichkeit, diesen Algorithmus bereitzustellen. Es wird verwendet, um zu vergleichen, ob zwei Werte streng gleich sind, und das Verhalten ist grundsätzlich dasselbe wie beim strengen Vergleichsoperator (===).

Die Syntaxstruktur ist wie folgt:

Objekt.ist(Wert1, Wert2);

Parameterbeschreibung:

• value1 : Der erste zu vergleichende Wert.
• value2 : Der zweite zu vergleichende Wert.

Gibt einen Booleschen Wert zurück.

Der Beispielcode lautet wie folgt:

console.log(+0 === -0); //wahr
console.log(NaN === NaN); // falsch

console.log(Objekt.ist(+0, -0)); // falsch
console.log(Objekt.ist(NaN, NaN)); // wahr

3.2Object.assign()-Methode

Mit Object.assign() werden die Werte aller aufzählbaren Eigenschaften aus einem oder mehreren Quellobjekten einem Zielobjekt zugewiesen. Es wird das Zielobjekt zurückgegeben.

Die Syntaxstruktur ist wie folgt:

Objekt.assign(Ziel, ...Quellen)

Parameterbeschreibung:

• target : Zielobjekt
• sources : Quellobjekt

Beachten Sie: Wenn eine Eigenschaft im Zielobjekt denselben Schlüssel hat, wird diese Eigenschaft durch die Eigenschaft im Quellobjekt überschrieben. Die Eigenschaften der späteren Quellobjekte überschreiben in ähnlicher Weise die Eigenschaften der früheren Quellobjekte.

Der Beispielcode lautet wie folgt:

let Quellen = {
  Name: 'Eine Schale Zhou',
  Beruf: 'Frontend-Ingenieur'
}
lass Ziel = {}
// Verwenden Sie die Methode assign(), um die Werte aller aufzählbaren Eigenschaften von einem oder mehreren Quellobjekten dem Zielobjekt zuzuweisen.
Object.assign(Ziel, Quellen)
konsole.log(Ziel);
//Überprüfen Sie, ob es sich um eine Deep Copy handelt target.name = 'eine Schüssel Haferbrei'
console.log(Ziel, Quellen); //{ Name: 'Belagerungslöwe', Job: 'Front-End-Belagerungslöwe' } { Name: 'Belagerungslöwe', Job: 'Front-End-Belagerungslöwe' }

4.Super-Schlüsselwort

Wir wissen, dass sich das Schlüsselwort this immer auf das aktuelle Objekt bezieht, in dem sich die Funktion befindet. ECMAScript 2015 fügt ein weiteres ähnliches Schlüsselwort hinzu, super, das auf das Prototypobjekt des aktuellen Objekts verweist.

// Definieren Sie ein Objekt, das als Prototypobjekt verwendet werden soll const proto = {
  v: 'Hallo'
}
// Definiere ein Objekt const obj = {
  v: 'Welt',
  druckenV1() {
    konsole.log(dieses.v);
  },
  // Verwenden des Superschlüsselworts printV2() {
    Konsole.log(super.v);
  }
}
//Ändern Sie den Prototyp des obj-Objekts in prtot
Objekt.setPrototypeOf(obj, proto)
// Verwendung dieses obj.printV1() // Welt
// Verwendung von super obj.printV2() // Hallo

Beachten Sie, dass das Schlüsselwort super , wenn es ein Prototypobjekt darstellt, nur in der Methode des Objekts verwendet werden kann. Die Verwendung an einer anderen Stelle führt zu einem Fehler. Derzeit kann JavaScript Engine nur mit der Kurzform der Objektmethode bestätigen, dass es sich bei der definierten Methode um eine Objektmethode handelt.

5. Objekterweiterungsoperator

Mit dem Objekt-Spread-Operator ( ... ) werden alle traversierbaren Eigenschaften des Parameterobjekts extrahiert und in das aktuelle Objekt kopiert.

Der Beispielcode lautet wie folgt:

// Der Objekterweiterungsoperator (...) wird verwendet, um alle durchquerbaren Eigenschaften des Parameterobjekts zu extrahieren und sie in das aktuelle Objekt zu kopieren.
lass obj = {
  Name: 'Eine Schale Zhou',
  Beruf: 'Frontend-Ingenieur'
}
lass neuesObj = {
  ...obj
}
console.log(newObj); // { Name: ‚Yiwan Zhou‘, Job: ‚Front-End-Ingenieur‘ }
// Überprüfen Sie, ob es sich um eine tiefe Kopie handelt newObj.name = 'Eine Schüssel Haferbrei'
console.log(obj, newObj); // { name: 'Belagerungslöwe', job: 'Front-end-Belagerungslöwe' } { name: 'Belagerungslöwe', job: 'Front-end-Belagerungslöwe' }

Da Arrays spezielle Objekte sind, kann der Object Spread Operator auch für Arrays verwendet werden.

sei arr = [1, 2, 3, 4, 5]
lass obj = {
  ...arr
}
konsole.log(obj); // { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5 }

Wenn auf den Spread-Operator kein Objekt folgt, wird er automatisch in ein Objekt umgewandelt.

konsole.log(
  {
  ...1 // entspricht {...Object(1)}
  }
); // {}
konsole.log(
  {
  ...true // entspricht {...Object(true)}
  }
); // {}
konsole.log(
  {
  ...undefined // entspricht {...Object(undefined)}
  }
); // {}
konsole.log(
  {
  ...null // entspricht {...Object(null)}
  }
); // {}

Dies ist das Ende dieses Artikels über die Einführung neuer Feature-Objekte von ECMAscript. Weitere relevante Inhalte zur Einführung in ECMAscript-Objekte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!