So verwenden Sie Set in JavaScript ES6, um eindeutige Elemente zu finden

A Set ist eine einzigartige Sammlung von Elementen und hat gegenüber JavaScript-Objekten den Vorteil, dass Sie die Elemente von a Set in Einfügereihenfolge durchlaufen können.

“ Mit dem Set -Objekt können Sie eindeutige Werte eines beliebigen Typs speichern, unabhängig davon, ob es sich um primitive Werte oder Objektreferenzen handelt.“ – MDN Docs

Mit anderen Worten, Sie können ein Set wie ein Array durchlaufen, und die Elemente bleiben in der Reihenfolge, in der sie gefunden wurden. Die Eigenschaften eines JavaScript-Objekts behalten ihre Einfügereihenfolge nicht bei, sodass die Reihenfolge, in der die Eigenschaften einem Objekt hinzugefügt wurden, bei der Übersetzung verloren geht, wenn Sie versuchen, eindeutige Elemente mithilfe eines Objekts zu filtern.

Set ist eine ES6-Funktion, die in allen modernen Browsern, einschließlich IE11, gemäß der Seite für Set() auf CanIUse.com.

In diesem Artikel erfahren Sie, wie Sie Set verwenden, um die allgemeine Aufgabe zu bewältigen, eine Liste eindeutiger Elemente in einem Array zu finden, unabhängig davon, ob Sie eindeutige Grundwerte (wie Zahlen oder Zeichenfolgen) oder Objekte suchen müssen.

Ich werde sowohl die Verwendung von Set mit Objektreferenzen (das Standardverhalten) als auch mit dem Inhalt dieser Objekte (Finden eindeutiger Objekte nach Wert) behandeln.

Wie Set die Wertgleichheit prüft

Set verwendet den dreifachen Gleichheitsoperator (===), der auch als strikter Gleichheitsoperator bekannt ist, um die Gleichheit primitiver Werte oder Objekte zu überprüfen.

“ Ein Wert in Set darf nur einmal vorkommen; er ist in der Sammlung von Set eindeutig.“ – MDN Docs

Es gibt jedoch einige wichtige Unterschiede bei der Implementierung des Gleichheitsvergleichs für Set gegenüber ===, zumindest seit ECMAScript 2015 (ES6).

Für Set werden +0 (positive Null) und -0 (negative Null) als derselbe Wert betrachtet, obwohl +0 !== -0 in JavaScript.

In ähnlicher Weise behandelt Set NaN (not-a-number) anders als ===, indem Set alle NaN -Werte gleich macht und nur einen in Set speichert.

NaN ist normalerweise der einzige Wert, der in JavaScript nicht gleich ist, was bedeutet, dass NaN === NaN falsch und NaN !== NaN wahr ist.

Einzelheiten zur Funktionsweise von NaN finden Sie in meinem Artikel zum Überprüfen auf NaN:

Undefinierte Werte (undefined) können auch in einem Set gespeichert werden, und wiederum wird nur ein undefined -Wert beibehalten. Das ist jedoch normales Verhalten für === .

zusammengenommen ist das Verhalten von Set dem eines anderen ES6-Features Object.is() im Vergleich zu === etwas näher.

Die Verwendung von Set für eindeutige Grundwerte in einem Array

Die Verwendung von Set ist für JavaScript-Objekte unkompliziert: Sie rufen den Konstruktor Set() mit dem Schlüsselwort new auf: new Set() // Set .

Das Äquivalent zur .push() -Methode von Arrays (Array.prototype.push()) für a Set heißt .add() (Set.prototype.add()). Es funktioniert auf die gleiche Weise – außer dass nur einer von jedem eindeutigen Wert zu Set hinzugefügt wird.

Das bedeutet, dass Sie ein Array mit .forEach() (Array.prototype.forEach()) oder einer for...of Schleife durchlaufen können, dann .add() jedes Element zu einem neuen Set . Das resultierende Set -Objekt enthält nur die eindeutigen Werte.

Einfacher können Sie das Array direkt an den Set() Konstruktor übergeben. Das funktioniert, weil der Konstruktor Set() ein iterierbares Objekt wie ein Array als einzigen Parameter akzeptiert.

“ iterierbare Objekte eingebaute String, Array, Array-ähnliche Objekte (z. B. arguments oder NodeList), TypedArray, Map, Set, und benutzerdefinierte Iterables.“ – MDN Docs

Der Parameter des Konstruktors ist optional; new Set() macht ein leeres Set.

Um ein Set zurück in ein Array zu konvertieren, ist eine Methode Array.from() . Ich werde später über eine andere Methode mit dem Spread-Operator (...) sprechen, aber die Array.from() -Methode funktioniert genauso gut und ist leicht zu lesen.

Hier ist ein Codeausschnitt, der die Verwendung von Set mit primitiven Werten wie Zahlen und Zeichenfolgen demonstriert, um die eindeutigen Werte in einem JavaScript-Array zu finden.

Hat Ihnen der Einzeiler gefallen, um die eindeutigen Elemente in einem Array mit Set zu finden?

Ja, ich auch! 🤩 Danke ES6.

Beachten Sie, dass die Reihenfolge des resultierenden Set oder Arrays die „Einfügereihenfolge“ ist — die Reihenfolge, in der die Werte im ursprünglichen Array oder in der ursprünglichen Liste gefunden wurden.

Eindeutige Objektreferenzen in einem Array Mit Set

Wenn Sie mit primitiven Werten wie Zahlen oder Zeichenfolgen arbeiten, funktioniert ein Set —Objekt genau so, wie Sie es erwarten würden – nur eindeutige Werte werden beibehalten.

Beim Arbeiten mit Objekten werden jedoch alle Objekte, die dieselben Daten enthalten, von Set als unterschiedliche Objekte betrachtet, da sie unterschiedliche Objektreferenzen haben — die tatsächlichen „Zeiger“ im Speicher auf diese Objekte.

Anders ausgedrückt, ein Array mit nur der Nummer 1 entspricht niemals einem anderen Array, selbst wenn es auch nur enthält 1: !== // true

Wir können jedoch weiterhin Set , um eindeutige Objektreferenzen in einem Array oder einem anderen iterierbaren Objekt zu finden. Das ist sehr nützlich, wenn dasselbe Objekt möglicherweise mehrmals zu einem Array hinzugefügt wurde und wir nur die eindeutigen Objekte möchten.

Wenn Sie beispielsweise einer Variablen ein Objekt zuweisen und diese Variable dann wiederholt zu einem Array hinzufügen, können Sie Set verwenden, um die Duplikate zu entfernen:

Das Konzept der Objektreferenzen in JavaScript zu verstehen, habe ich bereits in meinem Artikel zum tiefen Kopieren von Objekten in JavaScript behandelt:

Später in diesem Artikel werde ich über die Verwendung von Set sprechen, um Objekte anhand der Werte zu vergleichen, die sie enthalten, anstatt anhand der Objektreferenzen, die auf sie verweisen.

So erstellen Sie ein Array aus einer Menge

Meine Lieblingsmethode, um ein Set in ein Array zu verwandeln, ist die Verwendung des (...) Spread-Operators mit einem Paar eckiger Klammern : .

Sie können es sogar als Einzeiler schreiben:

Wow! Natürlich entspricht die Verwendung des Spread-Operators (...) genau der Methode Array.from(), die ich zuvor verwendet habe. Fühlen Sie sich frei, entweder einen zu verwenden.

Sobald Sie ein Array haben, können Sie es mit Ihren üblichen Array-Methoden durchlaufen, z. B. einer for...of -Schleife, .forEach(), .map() und .reduce() .

Sie können das Set auch direkt durchlaufen, wie im nächsten Abschnitt erläutert, da ein Set ebenso wie Arrays selbst ein iterierbarer Objekttyp ist.

Iterieren durch eine Reihe von eindeutigen Werten

Es gibt ein paar grundlegende Möglichkeiten für die Iteration durch eine Set in JavaScript, aber sie sind nicht ganz die gleichen Methoden, die Sie für Arrays verwenden würden:

1 — Use Set.Prototyp.tasten() oder Set.Prototyp.values()

Diese beiden Methoden sind äquivalent; Beide geben ein neues Iterator -Objekt zurück, das die Werte für jedes Element in der Set in Einfügereihenfolge enthält.

Mit einem Iterator -Objekt können wir die .next() -Methode direkt aufrufen, wenn Sie dies in Ihrem JavaScript-Code tun müssten.

Arfat Salman hat einen schönen Artikel, der Iteratoren erklärt CodeBurst.io .

2 – Satz verwenden.Prototyp.forEach() mit einer Callback-Funktion

Die .forEach() -Methode für ein Set ähnelt der gleichnamigen Methode für Arrays, sodass Sie sie direkt für ein Set -Objekt aufrufen können.

“ callbackFn einmal für jeden im Set -Objekt vorhandenen Wert in Einfügereihenfolge. Wenn ein thisArg -Parameter angegeben wird, wird er als this -Wert für jeden Aufruf von callbackFn verwendet.“ – MDN Docs

Natürlich können Sie eine Pfeilfunktion als Rückruffunktion verwenden, genau wie Sie es bei der Arbeit mit einem Array tun würden.

3 – Verwenden Sie ein für…der Schleife direkt mit dem neuen Set

Da Set eine Art iterierbares Objekt ist, funktioniert eine for...of -Schleife mit einem Set genauso wie mit einem JavaScript-Array.