Tipps zur Verwendung der JavaScript-Objekte Rest und Spread (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von JavaScript-Objekten (mit Code). Ich hoffe, dass er für Sie hilfreich ist.

Die Rest- und Spread-Operatoren können nicht nur zum Ruhen von Parametern und zum Erweitern von Arrays verwendet werden.

Hier sind 7 wenig bekannte Tipps für die Verwendung von Rest and Spread mit JavaScript-Objekten.

Eigenschaften hinzufügen

Klonen Sie ein Objekt und fügen Sie dem (flachen) Klon zusätzliche Eigenschaften hinzu.

In diesem Beispiel wird der Benutzer geklont und das Kennwortattribut zu userWithPass hinzugefügt.

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

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

Objektzusammenführung

Führt zwei Objekte zu einem neuen Objekt zusammen.

Teil1 und Teil2 in Benutzer1 zusammenführen.

const part1 = { id: 100, name: 'Howard Moon' }
const part2 = { id: 100, password: 'Password!' }

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

Objekte können auch mit der folgenden Syntax zusammengeführt werden:

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

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

Objektattribute ausschließen

Attribute können mit dem destrukturierenden Restoperator entfernt werden. Hier wird das Passwort entfernt und die verbleibenden Attribute werden als Rest zurückgegeben.

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

noPassword(user) //=> { id: 100, name: 'Howard moon' }

Dynamische Ausschlusseigenschaften

Die Funktion akzeptiert eine Requisite als Parameter. Eigenschaften können mithilfe berechneter Objekteigenschaftsnamen dynamisch aus einem Klon entfernt werden.

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

const removePassword = removeProperty('password')
const removeId = removeProperty('id')

removePassword(user1) //=> { id: 100, name: 'Howard Moon' }
removeId(user1) //=> { name: 'Howard Moon', password: 'Password!' }

Eigenschaften sortieren

Manchmal sind Eigenschaften nicht in der Reihenfolge, die wir benötigen. Mit einigen Tricks können wir Eigenschaften an den Anfang der Liste verschieben oder sie an das Ende verschieben.

Um die ID an die erste Position zu verschieben, fügen Sie id: undefiniert an der Vorderseite des neuen Objekts hinzu, bevor Sie das Objekt erweitern.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = object => ({ id: undefined, ...object })
//                            -------------
//                          /
//  move id to the first property

organize(user3)
//=> { id: 300, password: 'Password!', name: 'Naboo' }

Um das Passwort in die letzte Eigenschaft zu verschieben, destrukturieren Sie das Passwort aus dem Objekt. Setzen Sie dann das Kennwortattribut zurück, nachdem Sie den Rest-Operator verwendet haben.

const user3 = {
  password: 'Password!',
  name: 'Naboo',
  id: 300
}

const organize = ({ password, ...object }) =>
  ({ ...object, password })
//              --------
//             /
// move password to last property

organize(user3)
//=> { name: 'Naboo', id: 300, password: 'Password!' }

Standardeigenschaften

Standardeigenschaften sind Werte, die nur gesetzt werden, wenn sie nicht im Originalobjekt enthalten sind.

In diesem Beispiel enthält Benutzer2 nicht das Quotes-Attribut. Die Funktion setdefaults stellt sicher, dass für alle Objekte die Eigenschaft quotes festgelegt ist, andernfalls wird sie auf [] gesetzt.

Beim Aufruf von setDefaults (Benutzer2) enthält der Rückgabewert das Quotes-Attribut: [].

Wenn Sie setDefaults (Benutzer4) aufrufen, wird dieses Attribut nicht geändert, da Benutzer4 bereits über das Quotes-Attribut verfügt.

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..."]
//=> }

Wenn Sie möchten, dass der Standardwert zuerst und nicht zuletzt angezeigt wird, können Sie auch schreiben:

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

Eigenschaftsumbenennung

Durch die Kombination der oben genannten Techniken können Sie eine erstellen Funktion zum Umbenennen der Eigenschaft.

Angenommen, es gibt einige Objekteigenschaftsnamen mit großgeschriebenen IDs, die kleingeschriebene IDs sein sollten. Dekonstruieren Sie zunächst die ID aus dem Objekt und fügen Sie sie dann wieder als ID hinzu, wenn das Objekt Spread ist.

const renamed = ({ ID, ...object }) => ({ id: ID, ...object })

const user = {
  ID: 500,
  name: "Bob Fossil"
}

renamed(user) //=> { id: 500, name: 'Bob Fossil' }

Bonus: Bedingte Attribute hinzufügen

Danke an @vinialbano für den Hinweis, dass man Attribute auch bedingt hinzufügen kann. In diesem Beispiel wird das Passwort nur hinzugefügt, wenn das Passwort wahr ist!

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!' }

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Tutorial-Video auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonTipps zur Verwendung der JavaScript-Objekte Rest und Spread (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!