Schneller Tipp: So verwenden Sie den Spread -Operator in JavaScript

Dieses Tutorial erklärt die verschiedenen Verwendungen erweiterter Operatoren in JavaScript sowie die Hauptunterschiede zwischen erweiterten Operatoren und Restbetreibern.

JavaScript -Erweiterungsoperator wird durch drei Punkte (...) dargestellt und in ES6 eingeführt. Es kann Elemente in Sammlungen und Arrays in einzelne Elemente erweitern.

erweiterte Operatoren können verwendet werden, um Arrays und Objekte zu erstellen und zu klonen, Arrays als Funktionsparameter zu übergeben, Duplikate in Arrays zu löschen und mehr.

Schlüsselpunkte

• JavaScript -Erweiterungsoperator wird durch drei Punkte dargestellt (...). Es kann verwendet werden, um Arrays und Objekte zu erstellen und zu klonen, Arrays als Funktionsparameter zu übergeben, Duplikate in Arrays zu löschen und mehr.
• Der Erweiterungsoperator kann verwendet werden, um Arrays und Objekte zu klonieren, Arrays zu verketten, Nodelist in Arrays umzuwandeln und Duplikate in Arrays zu löschen. Es ist jedoch wichtig anzumerken, dass es nur flache Kopien ausführt, was bedeutet, dass es nur die Elemente oder Attribute auf der Spitze der Top-Ebene kopiert. Wenn ein Array oder Objekt ein anderes Array oder Objekt enthält, werden diese Arrays oder Objekte durch Referenz und nicht durch Werte kopiert.
• Der Erweiterungsoperator unterscheidet sich vom verbleibenden Bediener, obwohl beide dieselbe Syntax wie drei Punkte (...) verwenden. Die verbleibenden Operatoren können in der Parameterliste der Funktion verwendet werden, um anzuzeigen, dass die Funktion eine undefinierte Anzahl von Parametern akzeptiert, die als Array verarbeitet werden können.

Grammatik

erweiterte Operatoren können nur für iterable Objekte verwendet werden. Es muss unmittelbar vor dem iterbaren Objekt ohne Trennung sein. Zum Beispiel:

console.log(...arr);

Funktionsparameter

math.min () Methode als Beispiel. Diese Methode nimmt mindestens eine Nummer als Parameter und gibt die kleinste Anzahl der übergebenen Parameter zurück.

Wenn Sie eine Reihe von Zahlen haben und den Mindestwert dieser Zahlen finden möchten, müssen Sie, wenn es keinen Erweiterungsoperator gibt des Arrays als Argumente. Zum Beispiel:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

Beachten Sie, dass der erste Parameter null ist, da der erste Parameter verwendet wird, um den Wert dieser Aufruffunktion zu ändern.

Der Erweiterungsoperator ist eine bequemere und lesbarere Lösung, um Elemente eines Arrays als Parameter an eine Funktion zu übergeben. Zum Beispiel:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13

Sie können in diesem Online -Beispiel sehen:

Zeigen Sie das Beispiel auf CodePen

an

Erstellen Sie ein Array

Der erweiterte Operator

kann verwendet werden, um Neuarrays aus vorhandenen Arrays oder anderen iterablen Objekten zu erstellen, die die Symbol -Methode enthalten. Dies sind Objekte, die mit einem für ... der Schleife iteriert werden können.

Zum Beispiel kann es verwendet werden, um Arrays zu klonen. Wenn Sie nur den Wert des vorhandenen Arrays einem Neuarray zuweisen, aktualisiert die Änderungen am Neuarray das vorhandene Array:

console.log(...arr);

Durch die Verwendung des Erweiterungsoperators können Sie ein vorhandenes Array in ein neues Array klonen, und alle Änderungen am neuen Array haben sich nicht auf das vorhandene Array aus:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

Es ist zu beachten, dass dies nur ein eindimensionales Array klonen wird. Es funktioniert nicht mit mehrdimensionalen Arrays.

Der Erweiterungsoperator kann auch verwendet werden, um mehrere Arrays in ein Array zu verkettet. Zum Beispiel:

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13

Sie können auch den Erweiterungsoperator für Zeichenfolgen verwenden, um ein Array zu erstellen, in dem jedes Element ein Zeichen in der Zeichenfolge ist:

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]

Erstellen Sie ein Objekt

Erweiterungsoperatoren können verwendet werden, um Objekte auf unterschiedliche Weise zu erstellen.

Es kann verwendet werden, um ein anderes Objekt leicht zu klonen. Zum Beispiel:

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]

Es kann auch verwendet werden, um mehrere Objekte in ein Objekt zusammenzuführen. Zum Beispiel:

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]

Es ist zu beachten, dass, wenn das Objekt denselben Eigenschaftsnamen teilt, der Eigenschaftswert des zuletzt erweiterten Objekts verwendet wird. Zum Beispiel:

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

Der Erweiterungsoperator kann verwendet werden, um Objekte aus einem Array zu erstellen, in dem der Index im Array zum Attribut wird, und der Wert an diesem Index zum Wert des Attributs wird. Zum Beispiel:

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

Es kann auch verwendet werden, um Objekte aus Zeichenfolgen zu erstellen. In ähnlicher Weise wird der Index in der Zeichenfolge zum Attribut, und die Zeichen in diesem Index werden zum Wert des Attributs. Zum Beispiel:

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

Konvertieren Sie die Nodelist in ein Array

nodelist ist eine Sammlung von Knoten, die Elemente im Dokument sind. Im Gegensatz zu Arrays werden auf diese Elemente durch Methoden in einer Sammlung wie Elementen oder Einträgen zugegriffen.

Sie können den Erweiterungsoperator verwenden, um Nodelist in ein Array umzuwandeln. Zum Beispiel:

const obj1 = { name: 'Mark', age: 20};
const obj2 = { age: 30 };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 30}

Duplikate im Array

löschen

Set -Objekt ist eine Sammlung, die nur eindeutige Werte speichert. Ähnlich wie Nodelist können Sets mit dem Erweiterungsoperator in Arrays konvertiert werden.

Da das Set nur eindeutige Werte gespeichert ist, kann es mit dem Erweiterungsoperator gepaart werden, um Duplikate im Array zu löschen. Zum Beispiel:

const numbers = [15, 13, 100, 20];
const obj = { ...numbers };
console.log(obj); // {0: 15, 1: 13, 2: 100, 3: 20}

erweiterter Operator und Restbetreiber

Der verbleibende Bediener ist auch ein Dreipunktoperator (...), wird jedoch für verschiedene Zwecke verwendet. Die verbleibenden Operatoren können in der Parameterliste der Funktion verwendet werden, um anzuzeigen, dass die Funktion eine undefinierte Anzahl von Parametern akzeptiert. Diese Parameter können als Arrays verarbeitet werden.

Beispiel:

const str = 'Hello, World!';
const obj = { ...str };
console.log(obj); // {0: 'H', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ',', 6: ' ', 7: 'W', 8: 'o', 9: 'r', 10: 'l', 11: 'd', 12: '!'}

In diesem Beispiel werden die verbleibenden Operatoren als Parameter zur Berechnung von Funktionen verwendet. Anschließend iterieren Sie die Elemente im Array und fügen sie hinzu, um ihre Summe zu berechnen.

Sie können dann die Variablen einzeln an die Funktion calculateum als Parameter übergeben oder den Erweiterungsoperator verwenden, um Elemente des Arrays als Parameter zu übergeben:

const nodeList = document.querySelectorAll('div');
console.log(nodeList.item(0)); // <div>...</div>
const nodeArray = [...nodeList];
console.log(nodeArray[0]); // <div>...</div>

Schlussfolgerung

Extended -Operatoren ermöglichen es Ihnen, mehr mit weniger Codezeilen zu tun, während Sie den Code lesbar halten. Es kann für iterable Objekte verwendet werden, Parameter an Funktionen übergeben oder Arrays und Objekte von anderen iterbaren Objekten erstellen.

Verwandte Lesungen:

• fehlende mathematische Methode in JavaScript
• Schnelle Tipps: So sortieren Sie das Objektarray in JavaScript
• So verwenden Sie für die Schleife in JavaScript
• Schnelltipp: Testen Sie, ob die Zeichenfolge mit dem regulären Ausdruck in JavaScript
übereinstimmt
• 《JavaScript: vom Neuling nach Ninja》

JavaScript erweiterter Operator FAQs (FAQs)

(häufig gestellte Fragen ähnlich dem ursprünglichen FAQ

Das obige ist der detaillierte Inhalt vonSchneller Tipp: So verwenden Sie den Spread -Operator in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!