Eine Anleitung zu den drei Punkten (…) in JavaScript

Blog

Eine Anleitung zu den drei Punkten (…) in JavaScript

Eine Anleitung zu den drei Punkten (…) in JavaScript

Es war einmal ein bedeutendes Upgrade für die Javascript-Sprache genannt ES6/ES2015 . Es führte viele verschiedene neue Funktionen ein. Einer davon waren die drei aufeinanderfolgenden Punkte, die wir vor jeden kompatiblen Container schreiben können (Objekte, Arrays, Strings, Sets, Maps). Diese winzigen kleinen Punkte ermöglichen es uns, einen eleganteren und prägnanteren Code zu schreiben. Ich erkläre, wie die drei Punkte funktionieren und zeige die häufigsten Anwendungsfälle.

Die drei aufeinanderfolgenden Punkte haben zwei Bedeutungen: den Spread-Operator und den Rest-Operator.

Spread-Operator

Der Spread-Operator ermöglicht es einem iterierbaren, innerhalb eines Empfängers individuell zu spreizen oder zu expandieren. Das Iterable und der Empfänger können alles sein, was durchgeschleift werden kann, wie Arrays, Objekte, Sets, Maps. Sie können Teile eines Containers einzeln in einen anderen Container legen.

const newArray = ['first', ...anotherArray];

Ruheparameter

Die Syntax des Rest-Parameters ermöglicht es uns, eine unbestimmte Anzahl von Argumenten als Array darzustellen. Benannte Parameter können vor Ruheparametern stehen.

const func = (first, ...rest) => {};

Anwendungsfälle

Definitionen können nützlich sein, aber es ist schwer, das Konzept allein aus ihnen zu verstehen. Ich denke, alltägliche Anwendungsfälle können das fehlende Verständnis von Definitionen mit sich bringen.

So erhalten Sie Benutzereingaben in c++

Kopieren eines Arrays

Wenn wir mutieren müssen Array aber das Original nicht anfassen wollen (andere könnten es verwenden), müssen wir es kopieren.

const fruits = ['apple', 'orange', 'banana']; const fruitsCopied = [...fruits]; // ['apple', 'orange', 'banana'] console.log(fruits === fruitsCopied); // false // old way fruits.map(fruit => fruit);

Es wählt jedes Element innerhalb des Arrays aus und platziert jedes dieser Elemente in einer neuen Array-Struktur. Das Kopieren des Arrays erreichen wir mit dem |_+_| Operator und Erstellen einer Identitätszuordnung.

Einzigartiges Array

Wir wollen doppelte Elemente aus einem Array aussortieren. Was ist die einfachste Lösung?

Die |_+_| object speichert nur eindeutige Elemente und kann mit einem Array gefüllt werden. Es ist auch iterierbar, sodass wir es zurück auf ein neues Array verteilen können, und was wir erhalten, ist ein Array mit eindeutigen Werten.

[map](https://morioh.com/p/c636e38e9aeb '')

Arrays verketten

Wir können zwei separate Arrays mit dem |_+_| . verketten -Methode, aber warum nicht noch einmal den Spread-Operator verwenden?

Set

Argumente als Arrays übergeben

Bei der Übergabe von Argumenten beginnt der Spread-Operator, unseren Code lesbarer zu machen. Vor ES6 mussten wir die Funktion auf |_+_| anwenden. Jetzt können wir die Parameter einfach auf die Funktion verteilen, was zu viel saubererem Code führt.

const fruits = ['apple', 'orange', 'banana', 'banana']; const uniqueFruits = [...new Set(fruits)]; // ['apple', 'orange', 'banana'] // old way fruits.filter((fruit, index, arr) => arr.indexOf(fruit) === index);

Ein Array aufschneiden

Das Schneiden ist einfacher mit dem |_+_| -Methode, aber wenn wir es wollen, kann der Spread-Operator auch für diesen Anwendungsfall verwendet werden. Wir müssen die verbleibenden Elemente einzeln benennen, daher ist es keine gute Möglichkeit, aus der Mitte eines großen Arrays herauszuschneiden.

concat

Argumente in ein Array umwandeln

Argumente in Javascript sind Array-ähnliche Objekte. Sie können mit Indizes darauf zugreifen, aber Sie können keine Array-Methoden wie |_+_|, |_+_| aufrufen. Argumente sind ein iterierbares Objekt, also was können wir damit machen? Verteilen Sie es auf ein Array!

const fruits = ['apple', 'orange', 'banana']; const vegetables = ['carrot']; const fruitsAndVegetables = [...fruits, ...vegetables]; // ['apple', 'orange', 'banana', 'carrot'] const fruitsAndVegetables = ['carrot', ...fruits]; // ['carrot', 'apple', 'orange', 'banana'] // old way const fruitsAndVegetables = fruits.concat(vegetables); fruits.unshift('carrot');

Konvertieren von Argumenten in das Array erneut besucht

Die Konvertierung der Argumente in ein Array kann noch weiter vereinfacht werden, wenn wir die restlichen Argumente in der Funktionsdefinition verwenden.

arguments

Konvertieren Sie NodeList in ein Array

Argumente sind wie ein |_+_| zurückgekehrt von einem |_+_| Funktion. Sie verhalten sich auch ein bisschen wie ein Array, verfügen aber nicht über die entsprechenden Methoden.

const mixer = (x, y, z) => console.log(x, y, z); const fruits = ['apple', 'orange', 'banana']; mixer(...fruits); // 'apple', 'orange', 'banana' // old way mixer.apply(null, fruits);

Kopieren eines Objekt

Schließlich kommen wir zu Objektmanipulationen. Das Kopieren funktioniert genauso wie bei Arrays. Früher war es mit |_+_| . machbar und ein leeres Objektliteral.

slice

Objekte zusammenführen

Der einzige Unterschied beim Zusammenführen besteht darin, dass Eigenschaften mit demselben Schlüssel überschrieben werden. Die Eigenschaft ganz rechts hat die höchste Priorität.

const fruits = ['apple', 'orange', 'banana']; const [apple, ...remainingFruits] = fruits; // ['orange', 'banana'] // old way const remainingFruits = fruits.slice(1);

Beachten Sie, dass beim Zusammenführen Kopien nur auf der ersten Ebene der Hierarchie erstellt werden. Tiefere Ebenen in der Hierarchie sind dieselbe Referenz.

Aufteilen einer Zeichenfolge in Zeichen

Ein letztes mit Saiten . Sie können eine Zeichenfolge mit dem Spread-Operator in Zeichen aufteilen. Dasselbe gilt natürlich auch, wenn Sie die Methode split mit einem leeren String aufrufen würden.

map

Und das ist es

Wir haben uns viele verschiedene Anwendungsfälle für die drei Punkte in Javascript angesehen. Wie Sie sehen, hat ES6 nicht nur das Schreiben von Code effizienter gemacht, sondern auch einige unterhaltsame Möglichkeiten eingeführt, um seit langem bestehende Probleme zu lösen. Jetzt unterstützen alle gängigen Browser die neue Syntax; Alle oben genannten Beispiele können in der Browserkonsole ausprobiert werden, während Sie diesen Artikel lesen. In jedem Fall beginnen Sie mit der Verwendung des Spread-Operators und der Restparameter. Es ist eine hervorragende Ergänzung zu der Sprache, die Sie kennen sollten.

#javascript #es6