Drei nützliche Punkte - der Rest und die Verbreitung in JavaScript

Übrige Parameter

Die Rest-Syntax ermöglicht es uns, eine unbestimmte Anzahl von Argumenten als Array darzustellen. Schauen Sie sich eine Funktion an, die alle übergebenen Argumente addiert.

const sum = (...args) => args.reduce((prev, current) => prev + current);

console.log(summe(1, 2)); // 3
console.log(Summe(1, 2, 3)); // 6

Spreizsyntax

Der Spread-Operator ermöglicht es uns, iterierbare Objekte in einzelne Elemente zu zerlegen. Diese Funktionalität ist das Gegenteil von dem, was wir mit den übrigen Parametern erreicht haben. Sie kann auf alle iterierbaren Objekte angewendet werden, z. B. Arrays, Objekte, Mengen, Maps usw.

const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];

console.log(sum(...zahlen)); // 6

Drei Punkte in realen Anwendungsfällen

Kopieren eines Arrays

Die Spread-Syntax geht beim Kopieren eines Arrays effektiv eine Ebene tiefer. Eine Ebene bedeutet, dass die erste Ebene der Referenzen kopiert wird.

const array0 = [1, [2, 3]];
const array1 = [...array0];

console.log(array1); // [1, [2, 3]]

Erstellen eines Arrays mit eindeutigen Elementen

Erstellen Sie das Set, das nur eindeutige Elemente speichert, und konvertieren Sie es in ein Array.

const array = [1, 1, 2, 3];
const uniqueElements = [...new Set(array)];

console.log(uniqueElements); // [1, 2, 3]

Arrays verketten

const array0 = [1, 2];
const array1 = [3, 4];
const concated = [...array0, ...array1];

console.log(concated); // [1, 2, 3, 4]

Aufteilung eines Arrays

const [firstElement, ...newArray] = [1, 2, 3, 4];

console.log(erstesElement); // 1
console.log(newArray); // [2, 3, 4]

Wir können auch entfernen n erste Elemente mit Komma.

const [, , , ...newArray] = [1, 2, 3, 4];

console.log(newArray); // [4]

Einfügen eines Arrays am Anfang eines anderen Arrays

const array0 = [4, 5, 6];
const array1 = [1, 2, 3];
const newArray = [...array1, ...array0];

console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ]

Generierung einer Zahlenreihe von 0 bis n

const array = [...Array(10)].map((_, i) => i);

console.log(array); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

Destrukturierung eines Objekts

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

Erstellen einer Kopie eines Objekts

let person = {
  Name: 'John',
  Alter: 25,
  Brieftasche: {
    Summe: 500,
    Währung: 'USD'
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// Name: 'John',
// Alter: 25,
// Brieftasche: {
// Summe: 500,
// Währung: 'USD'
// }
// }

Beachten Sie, dass die erstellte Kopie des Objekts ein neues Objekt ist, das alle Eigenschaften des ursprünglichen Objekts, aber keine seiner prototypischen Informationen enthält.

person.age = 20;

console.log(person.age); // 20
console.log(personKopie.alter); // 25

Beachten Sie, dass die Spread-Syntax eine "flache" Kopie des Objekts erstellt, so dass die Eigenschaft "wallet" nur als Verweis auf das ursprüngliche Unterobjekt kopiert wird. Für ein tiefes Klonen können Sie je nach Komplexität des Objekts den JSON-Stringify/Parse-Ansatz oder die von Lodash bereitgestellte Methode "cloneDeep" verwenden. In manchen Fällen kann diese Methode auch hilfreich sein:

let personCopy = { ...Person, Brieftasche = {...Person.Brieftasche}}; 

Bedingtes Hinzufügen von Eigenschaften zu Objekten

Wir können einem neuen Objekt, das wir erstellen, bedingt Eigenschaften hinzufügen, indem wir den Spread-Operator zusammen mit der Kurzschlussauswertung verwenden.

const colors = {
  red: '#ff0000',
  grün: '#00ff00',
  blue: '#0000ff'
};
const black = {
  schwarz: '#000000'
};

let extraBlack = false;
let conditionalMerge = {
  ...Farben,
  ...(extraSchwarz ? schwarz : {})
};

console.log(conditionalMerge);
// {
// rot: '#ff0000',
// grün: '#00ff00', // grün: '#00ff00',
// blau: '#0000ff'
// }

extraBlack = true;
conditionalMerge = {
  ...Farben,
  ...(extraSchwarz ? schwarz : {})
};

console.log(conditionalMerge);
// {
// rot: '#ff0000',
// grün: '#00ff00', // grün: '#00ff00',
// blau: '#0000ff'
// schwarz: '#000000', // schwarz: '#000000'.
// }

Zerlegen einer Zeichenkette in Zeichen

Dies ist vergleichbar mit dem Aufruf der Split-Methode mit einer leeren Zeichenkette als Parameter.

const split = [...'qwerty'];
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]

Lesen Sie mehr:

3 Gemeinsame Herausforderungen bei der Software-Produktentwicklung für Startups

Die beste Art von Projekten für Java

Wie kann man ein Projekt nicht durch schlechte Programmierpraktiken zerstören?