Was sind die neuen Funktionen von es6?

ES6 neue Funktionen: 1. Attribute zu Objekten hinzufügen; 3. Attribute von Objekten löschen; 6. Attribute von Objekten umbenennen; ; 8. Bedingte Attribute.

Die Betriebsumgebung dieses Artikels: Windows 7-System, ECMAScript Version 6.0, Dell G3-Computer.

es6 neue Funktionen:

1. Attribute zum Objekt hinzufügen

Klonen Sie das Objekt und fügen Sie dem (flachen) geklonten Objekt zusätzliche Attribute hinzu, wie im folgenden Code gezeigt:

const user = { id: 10, name: 'Tom'}const userWithPass = { ...user, password: 'Password!' }user //=> { id: 10, name: 'Tom' }userWithPass //=> { id: 10, name: 'Tom', password: 'Password!' }

In diesem Beispiel: Der Benutzer wird in userWithPass geklont und das Passwortattribut wird dem userWithPass-Objekt hinzugefügt, und der Code ist einfach und effizient.

2. Objekte zusammenführen

Wir geben ein Beispiel, um die Funktionsweise zu veranschaulichen

const part1 = { id: 10, name: 'Howard Moon' }const part2 = { id: 11, password: 'Password!' }const user1 = { ...part1, ...part2 }//=> { id: 10, name: 'Howard Moon', password: 'Password!' }

In diesem Beispiel führen wir Teil1 und Teil2 zu einem Objekt Benutzer1 zusammen. Sie können Objekte auch auf folgende Weise zusammenführen:

const partial = { id: 100, name: 'Howard Moon' }const user = { ...partial, id: 100, password: 'Password!' }user //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

3 . Löschen Sie die Attribute des Objekts

Sie können die Zerstörung in Verbindung mit dem REST-Operator verwenden, um die Attribute zu löschen.

onst noPassword = ({ password, ...rest }) => restconst user = { id: 100, name: 'Howard Moon', password: 'Password!'}noPassword(user) //=> { id: 100, name: 'Howard moon' }

4. Attribute dynamisch löschen

Sie können den Objektattributnamen verwenden und dann den Attributnamen übergeben, um das Attribut zu löschen

const user1 = { id: 100, name: 'Howard Moon', password: 'Password!'}const removeProperty = prop => ({ [prop]: _, ...rest }) => rest// ---- ------//  /// dynamic destructuringconst removePassword = removeProperty('password')const removeId = removeProperty('id')removePassword(user1) //=> { id: 100, name: 'Howard Moon' }removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

5. Passen Sie die Position der Objektattribute an nicht die von uns benötigte Reihenfolge erfüllen. Mit einigen Tricks können wir Attribute an den Anfang der Liste verschieben oder sie nach unten verschieben, zum Beispiel:

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = object => ({ id: undefined, ...object })// -------------// /// move id to the first propertyorganize(user3)//=> { id: 300, password: 'Password!', name: 'Naboo' }

In diesem Beispiel wurde die ID an die erste Position verschoben. Das folgende Beispiel verschiebt das Passwortattribut nach die letzte Position.

const user3 = { password: 'Password!', name: 'Naboo', id: 300}const organize = ({ password, ...object }) => ({ ...object, password })// --------// /// move password to last propertyorganize(user3)//=> { name: 'Naboo', id: 300, password: 'Password!' }

6. Standardattribut

const user2 = { id: 200, name: 'Vince Noir'}const user4 = { id: 400, name: 'Bollo', quotes: ["I've got a bad feeling about this..."]}const setDefaults = ({ quotes = [], ...object}) => ({ ...object, quotes })setDefaults(user2)//=> { id: 200, name: 'Vince Noir', quotes: [] }setDefaults(user4)//=> {//=> id: 400,//=> name: 'Bollo',//=> quotes: ["I've got a bad feeling about this..."]//=> }

Es ist erwähnenswert, dass der Standardattributwert nur dann festgelegt wird, wenn er nicht im Originalobjekt enthalten ist um den Standardwert festzulegen. Oder Sie müssen möglicherweise auch so schreiben

const setDefaults = ({ ...object}) => ({ quotes: [], ...object })

7. Benennen Sie die Attribute des Objekts um

In einigen Szenarien müssen wir beispielsweise möglicherweise die Groß-/Kleinschreibung der Objektattribute ändern, dann können wir es hier umbenennen Weg

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })const user = {ID: 500,name: "Bob Fossil"}renamed(user) //=> { id: 500, name: 'Bob Fossil' }//将大写ID改成了小写的

8. Bedingte Attribute

Das ist manchmal sehr praktisch. Dem Namen nach zu urteilen, zeigt es, dass die Eigenschaften des Objekts durch Bedingungen gesteuert werden

const user = { id: 100, name: 'Howard Moon' }const password = 'Password!'const userWithPassword = { ...user, id: 100, ...(password && { password })}userWithPassword //=> { id: 100, name: 'Howard Moon', password: 'Password!' }

Verwandte Videoempfehlungen:

PHP-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die neuen Funktionen von es6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!