Ausführliche Erklärung der Set- und WeakSet-Sammlungen in ES6

Ausführliche Erklärung der Set- und WeakSet-Sammlungen in ES6

Ein Set ist eine spezielle Sammlung, deren Werte sich nie wiederholen.

Sie verwenden Arrays täglich. Gab es schon einmal einen Moment, in dem Sie sich Sorgen machten, doppelte Werte einzufügen? Nutzen Sie die Set-Sammlung! Set verfügt über eine spezielle Datenstruktur, die gewährleistet, dass die eingefügten Werte nie wiederholt werden.

Grundlegende API für Set-Sammlungen

Erstellen Sie eine Set-Instanz über den Konstruktor Set.prototype.constructor

/*
 * Nur Instanziierung: Rufen Sie den Konstruktor auf, ohne Parameter zu übergeben*/ 
let empty_set = neues Set()    


/*
 * Instanziieren und initialisieren: Übergeben Sie ein beliebiges Iterationsobjekt und konvertieren Sie es in eine Set-Sammlung*/ 
let transfer_set4arr = neues Set([1, 2, 3])
// gibt Set(3) {1, 2, 3} zurück

let transfer_set4string = neues Set("huilin")
// Gibt Set(5) {"h", "u", "i", "l", "n"} zurück

let transfer_set4set = neues Set(neues Set([5, 6]))
// gibt Set(2) { 5, 6 } zurück

Greifen Sie auf die Eigenschaft Set.prototype.size zu, um die Anzahl der Elemente im Set zurückzugeben

console.log(leerer_Satz.Größe) // 0
console.log(transfer_set4arr.size) // 3

Rufen Sie die Methode Set.prototype.has(value) auf, um zu bestimmen, ob das Element vorhanden ist

// Im Vergleich zu Array.includes() hat Set.has() eine höhere Leistung, da es für Mitgliedschaftstests optimiert ist console.log(empty_set.has(1)) // false
console.log(transfer_set4arr.has('h')) // wahr

Beurteilung des einzigartigen Wertes

  • Um die Eindeutigkeit des Werts sicherzustellen, verwendet die Set-Sammlung zur Beurteilung Object.is(value1, value2) anstelle des Symbols === (Identitätssymbol), da die Identitätsbeurteilung eine Typkonvertierung der Variablen auf beiden Seiten erzwingen würde.
  • Wenn beispielsweise die Werte zweier Variablen beide NaN oder 0 und -0 sind, sind sie bei der Beurteilung durch JS nicht gleich, Object.is () betrachtet sie jedoch als gleich und kann daher nicht in der Set-Sammlung gespeichert werden.

Weitere Informationen zu Object.is() finden Sie unter: developer.mozilla.org/zh-CN/docs/…

sei n1 = NaN
sei n2 = NaN

konsole.log(n1 === n2)  
// Wenn das Identitätssymbol feststellt, dass die beiden inkonsistent sind, geben Sie false aus.

console.log(Objekt.ist(n1,n2)) 
// Aber Object.is() beurteilt die beiden als gleich und gibt false aus.

// Die Set-Sammlung erlaubt nicht, zwei NaNs in die Sammlung aufzunehmen let set = new Set()
setze.add(n1).add(n2)
console.log(Größe festlegen)   
// Größe: 1

Bei komplexen Datentypen erfolgt die Beurteilung überwiegend über Objektreferenzen. Wenn die Referenzen inkonsistent sind, werden sie, auch wenn die Datenstrukturen gleich sind, als unterschiedlich betrachtet und können daher in der Set-Sammlung gespeichert werden.

lassen Sie same_value_set = neues Set();
//Speichern Sie zuerst ein Objekt same_value_set.add({num: 0});
//Speichern Sie ein neues Objekt mit der gleichen Struktur let obj = {num: 0};
gleicher_Wert_Satz.add(obj);
// Beide können erfolgreich gespeichert werden console.log(same_value_set.size); // 2

Rufen Sie die Methode Set.prototype.add(value) auf, um dem Set Daten hinzuzufügen

// Die Methode add() kann jeden beliebigen Datentyp anhängen, egal ob es sich um einen primitiven Wert oder eine Objektreferenz handelt let set1 = new Set()
// Da die Methode add() immer eine Referenz auf die aktuelle Instanz zurückgibt, erfolgt ein Kettenaufruf: set1.add(1).add(2).add(3)
console.log(set1) // Set(3) {1, 2, 3}

// Hinweis: Wenn add() an ein Array übergeben wird, fügt Set die Array-Instanz in das Set ein, nicht die Elemente im Array set1.add([4, 5])
console.log(set1) // Set(4) {1, 2, 3, [4, 5]}

Rufen Sie die Methode Set.prototype.delete(value) auf, um Elemente aus dem Set zu entfernen

// Die Methode delete() gibt zurück, ob der Entfernungsvorgang erfolgreich war, genau wie die Methode .has() let success = set1.delete(1)
console.log(Erfolg)
// WAHR

Rufen Sie die Methode Set.prototype.clear() auf, um das Set zu löschen

lass num_set = neues Set([1, 6, 3])
console.log(Anzahl_Satz)
// Setze(3) { 1, 6, 3 }

set1.löschen()
console.log(Anzahl_Satz)
// Setze(0) {}

3 Möglichkeiten, ein Set zu durchlaufen

Da Mengen keine Indizes/Indizes haben, werden sie oft als „ungeordnete Mengen“ betrachtet. JavaScript merkt sich jedoch die Reihenfolge, in der die Elemente eingefügt wurden, und durchläuft die Elemente beim Durchlaufen der Reihe nach.

Direktes Durchlaufen der Set-Sammlung

lass set = neues Set([1, 2, 3, 4, 5])
für (let Element des Sets) {
    console.log(Element)
}
// Ausgabe in der Reihenfolge: 1 2 3 4 5

Erstellen Sie einen Iterator für die Durchquerung

/*
 * Es gibt drei Möglichkeiten, Iteratoren zu erstellen * Set.prototype.entries()
 * Set.prototype.keys()
 * Setze.prototype.values()
 */ 

// Die Set-Sammlung hat nur Werte, aber keine Schlüssel, aber um sie dem Durchlaufen eines Map-Objekts ähnlich zu machen, sind Schlüssel und Wert jedes Elements gleich, wenn Set.entries () ein neues Iterator-Objekt erstellt, d. h. [Wert, Wert]
für (let [Schlüssel, Wert] von set.entries()) {
    console.log(Wert)
}
// Ausgabe in der Reihenfolge: 1 2 3 4 5

// Set.keys() erstellt ein neues Iteratorobjekt und gibt jeden Wert zurück für (let key of set.keys()){
    console.log(Schlüssel)
}
// Ausgabe in der Reihenfolge: 1 2 3 4 5

// Set.values() ist konsistent mit Set.keys() und gibt den Wert jedes Elements zurück for(let value of set.values()){
    console.log(Wert)
}
// Ausgabe in der Reihenfolge: 1 2 3 4 5

Rufen Sie die Methode Set.prototype.forEach(callbackFn) auf, um zu durchlaufen

// forEach(callbackFn) ruft callbackFn in der Reihenfolge der Einfügung auf und ruft jeden Wert ab set.forEach(item => {
    console.log(Element)
})
// Ausgabe in der Reihenfolge: 1 2 3 4 5

Sammlungsfallpraxis festlegen

Konvertierung zwischen Set-Sammlung und Array-Array

/*
 * Auf Array setzen
 */
setze set1 = neues Set([1, 2, 3])
// Array.from()-Methode let arr1 = Array.from(set1)  
// Erweiterungsoperator let arr2 = [...set1]  

/*
 * Zu setzendes Array
 */
 // Verwenden des Set-Konstruktors let set = new Set(array)

Einzel-Array-Deduplizierung

setze = neues Set([1, 2, 4, 4, 2, 5])
konsole.log(einstellen)
// Setze(4) { 1, 2, 4, 5 }

Mehrere Arrays zusammenführen, um Duplikate zu entfernen

sei arr1 = [1, 2, 4]
sei arr2 = [1, 5, 6]

// Anhand der Eigenschaften der Set-Sammlung sind die Elemente im Set eindeutig. let result = new Set([...set1, ...set2]) 
console.log(Ergebnis)
// Setze(5) { 1, 2, 4, 5, 6 }

Holen Sie sich die Schnittmenge (doppelte Elemente)

setze set1 = neues Set([1, 2, 4])
lass set2 = neues Set([1, 5, 6])

//Gibt Elemente zurück, die sowohl in Set1 als auch in Set2 vorhanden sind. let result = new Set([...set1].filter(x => set2.has(x))) 
console.log(Ergebnis)
// Satz(1) { 1 }

Ermitteln, ob eine Überschneidung vorliegt (doppelte Elemente)

setze set1 = neues Set([1, 2, 4])
lass set2 = neues Set([1, 5, 6])

Funktion istgemischt(Menge, Teilmenge) {
    für (let Element der Teilmenge) {
        wenn (set.has(elem)) {
            gibt true zurück;
        }
    }
    gibt false zurück;
}

console.log(istgemischt(Satz1, Satz2))
// WAHR

Den Unterschied erkennen: Nur Duplikate zurückgeben

setze set1 = neues Set([1, 2, 4])
lass set2 = neues Set([1, 5, 6])

Funktion Differenz(MengeA, MengeB) {
    let Ergebnis = neues Set()
    für (let elem of setB) {
        wenn (setA.has(elem)){
            Ergebnis.add(Element)
        }
    }
    Ergebnis zurückgeben;
}

console.log(Unterschied(Satz1, Satz2))

Was ist die „Schwäche“ von WeakSet?

Zusätzlich zur Set-Sammlung bietet ES6 auch WeakSet und WeakMap. Da der Name der Sammlung „Schwache Sammlung“ lautet, was genau ist „schwach“?

Schwache Funktion

WeakSet erlaubt nicht das Einfügen primitiver Werte, es werden nur Objektreferenzen unterstützt;

sei val1 = {id: 1},
    val2 = {id: 2}

lass ws = neues WeakSet()

// Wie bei der Set-Sammlung werden die Werte von WeakSet nicht wiederholt. Gleichzeitig gibt add () auch eine Set-Instanz zurück, sodass die Kettenoperation ws.add (val1) .add (val1) .add (val2) verwendet werden kann

// Einfügen von Basisdatentypen ist nicht erlaubt ws.add(3)
// Fehler: TypeError: Ungültiger Wert in WeakSet verwendet

// Aber du kannst es zuerst in ein Objekt einbinden und dann einfügen let val3 = new Number(3)
ws.add(Wert3)
console.log(ws.has(val3))
// Ausgabe: true

  • WeakSet implementiert nur drei Operationsmethoden: add(), has() und delete();
  • WeakSet erlaubt keine Durchquerung und hat keine Größen- oder Längenattribute;

Schwache Referenzen

Um über schwache Referenzen zu sprechen, schauen wir uns zunächst an, was starke Referenzen sind:

// ein Objekt deklarieren let handsome = {
    Name: 'huilin',
    Alter: 30
}

// Setze es in das Array ein let arr = [1, handsome, 2]
console.log('Freigabe vor arr-Länge', arr.length) // 3

// In die Karte einfügen
lass Benutzer = {
    oid: 10001,
    klassifizieren: 'Chinesisch',
    MitarbeiterReferenz: gutaussehend
}
console.log('Freigabe vor Kartenlänge', Object.keys(Benutzer).Länge) // 3

konsole.log('----')

// Setze das Objekt plötzlich auf null
gutaussehend = null
// Im stark referenzierten Container existiert das Objekt noch und wurde nicht wiederverwendet console.log('release after arr length', arr.length) // 3
console.log(arr[1]) // { Name: 'huilin', Alter: 30 }
console.log('Freigabe nach Kartenlänge', Object.keys(Benutzer).Länge) // 3
console.log(Benutzer.Mitarbeiterreferenz) // { Name: 'huilin', Alter: 30 }

Aus dem Testcode können wir erkennen, dass das referenzierte Objekt nicht recycelt wurde, sofern der Container nicht zerstört wurde. Die sogenannte schwache Referenz bedeutet, dass der Container voraussichtlich automatisch entsprechend den Elementen erweitert und verkleinert wird. Sobald das Objekt null ist, wird auch die Referenz im Container recycelt.

lass obj1 = {
    Name: 'huilin',
    Alter: 30
}

let obj2 = {
    Name: "cc",
    Alter: 29
}

lass ws1 = neues WeakSet()
ws1.add(Objekt1).add(Objekt2)
console.log(ws1.has(obj1)) // wahr

// Unabhängig davon, ob es sich um ein vom Container bedientes Element handelt ws1.delete(obj1)
console.log(ws1.has(obj1)) // falsch

// Oder wenn das Objekt selbst auf null gesetzt ist, wird es automatisch recycelt obj2 = null
console.log(ws1.has(obj2)) // falsch

Referenz

  • zh.javascript.info/Kartensatz
  • es6.ruanyifeng.com/#docs/set-m…

Zusammenfassen

Dies ist das Ende dieses Artikels über Set- und WeakSet-Sammlungen in ES6. Weitere Informationen zu ES6 Set- und WeakSet-Sammlungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der Map- und Set-Sammlungen in ES6

<<:  So installieren Sie Grafana und fügen Influxdb-Überwachung unter Linux hinzu

>>:  Deinstallation und Installation von MySQL5.7-Betriebsprozess und Methode zur Änderung des Kodierungsformats von CentOS7.x

Artikel empfehlen

Master-Slave-Synchronisationskonfiguration der Mysql-Datenbank

Inhaltsverzeichnis Mysql Master-Slave-Synchronisi...

Installieren und Bereitstellen von Java8 und MySQL unter CentOS7

Im Allgemeinen werden Java-Lernprogramme und Bere...

So zeichnen Sie in CocosCreator ein cooles Radardiagramm

Inhaltsverzeichnis Vorwort Vorschau Text Grafikko...

Analyse von Multithread-Programmierbeispielen unter Linux

1 Einleitung Die Thread-Technologie wurde bereits...

Linux Bash: ./xxx: Fehler „Binärdatei kann nicht ausgeführt werden“

Heute habe ich einem Kunden ein kleines Tool für ...

HTML-Grundlagen-Zusammenfassungsempfehlung (Titel)

HTML: Titel Überschriften werden durch Tags wie &...

So zeigen Sie die Erstellungszeit von Dateien in Linux an

1. Einleitung Ob die Erstellungszeit einer Datei ...

Detaillierte Erläuterung der Destrukturierungszuweisung von JS ES6-Variablen

Inhaltsverzeichnis 1. Was ist Dekonstruktion? 2. ...

Swiper+echarts realisiert den Links- und Rechts-Scrolleffekt mehrerer Dashboards

In diesem Artikel wird der spezifische Code von S...

Vue – Erste Schritte mit der Wettervorhersage

In diesem Artikelbeispiel wird der spezifische Co...

So implementieren Sie eine verschachtelte if-Methode in Nginx

Nginx unterstützt weder verschachtelte if-Anweisu...

Aufbau einer Zookeeper-Standalone-Umgebung und einer Clusterumgebung

1. Aufbau einer Einzelmaschinenumgebung# 1.1 Heru...