JavaScript-Spread-Operator

JavaScript-Spread-Operator (…)

• Der Spread-Operator in JavaScript erweitert (entpackt) ein Array in seine einzelnen Elemente.

*Es wird sowohl mit Arrays als auch mit Objekten verwendet. In Arrays wird es verwendet, wenn:

1. Erstellen eines Arrays
2. Übergabe von Argumenten an eine Funktion

1- Aufbau eines Arrays:

• hier können wir es verwenden, um ein Array-Element zu erweitern und es in einem anderen (z. B. Array) zu verwenden.

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• Wie Sie sehen, macht der Spread-Operator die Sache viel einfacher.

• Wenn Sie erneut die einzelnen Elemente des erweiterten Arrays benötigen, verwenden Sie den Spread-Operator:
  

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• Noch ein Beispiel zum besseren Verständnis:

const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']

• Denken Sie daran, dass wir hier ein völlig neues Array erstellen und das Lebensmittel-Array nicht ändern (mutieren). Schauen Sie:

console.log(foods); // ['chicken', 'meat', 'rice']

• Der Spread-Operator ähnelt der Destrukturierung, der Unterschied besteht jedoch darin, dass der Spread-Operator keine neuen Variablen erstellt, sodass wir ihn nur an Stellen verwenden können, an denen wir durch Kommas getrennte Werte schreiben.

Zwei nützliche Anwendungsfälle des Spread-Operators mit Arrays:

1.Erstellen einer Kopie eines Arrays:

const arrOriginal = [1, 2, 3, 4, 5];

const arrCopy = [...arrOriginal];
console.log(arrCopy); // [1, 2, 3, 4, 5]

2.Zwei oder mehr Arrays zusammenführen:

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // ['A', 'B', 'C', 'D', 'E', 'F']

• Der Spread-Operator funktioniert nicht nur bei Arrays, sondern auch bei allen Iterables, also Dingen wie: Arrays, Strings, Maps und Sets (die meisten der integrierten Datenstrukturen), aber NICHT (Objekte).
• bei Zeichenfolgen: jeder Buchstabe der Originalzeichenfolge = ein einzelnes Element, Beispiel:

const str = 'spongeBob';

const letters = [...str, 'squarePants'];
console.log(letters); // ['s', 'p', 'o', 'n', 'g', 'e', 'B', 'o', 'b', 'squarePants']

• aber denken Sie daran, dass wir den Spread-Operator trotzdem nur in den beiden oben angegebenen Situationen verwenden möchten, nämlich „Erstellen eines Arrays“ und „Übergeben von Argumenten“, denn zum Beispiel, wenn wir wollten Verwenden Sie einige durch Kommas getrennte Werte, um eine Zeichenfolge anhand von Vorlagenliteralen zu erstellen. Dies funktioniert nicht und führt zu einer Fehlermeldung, da es sich nicht um einen Ort handelt, an dem mehrere durch Kommas getrennte Werte erwartet werden:

console.log(`spelling sponge bob's name: ${...str}`);  // Expression expected

2- Übergabe von Argumenten an eine Funktion

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• Verwendung des Spread-Operators:
• Ab ES2018 funktioniert der Spread-Operator tatsächlich auch für Objekte, auch wenn Objekte nicht iterierbar sind, Beispiel:

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• Im ersten haben wir ein neues Objekt mit denselben Eigenschaften wie das Restaurantobjekt erstellt, aber wir haben eine weitere Eigenschaft hinzugefügt, nämlich die Eigenschaft „netWorth“.
• im zweiten haben wir eine Kopie des Restaurantobjekts erstellt. Beachten Sie, dass Änderungen am kopierten Objekt keine Auswirkungen auf das Originalobjekt haben und umgekehrt.

Ich hoffe, Sie haben hier alles verstanden. Wenn Sie Fragen haben, können Sie diese gerne im Kommentarbereich stellen. DANKE fürs Lesen ?

Das obige ist der detaillierte Inhalt vonJavaScript-Spread-Operator. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!