# So entfernen Sie Array-Duplikate in ES6

Hier sind 3 Möglichkeiten, Duplikate aus einem Array herauszufiltern und nur die eindeutigen Werte zurückzugeben. Mein Favorit ist die Verwendung von Set, da es das kürzeste und einfachste ist 😁

const array = ;// 1: "Set";// 2: "Filter"array.filter((item, index) => array.indexOf(item) === index);// 3: "Reduce"array.reduce( (unique, item) => (unique.includes(item) ? unique : ), ,);// RESULT:// ;

# 1. Verwenden von set

Lassen Sie mich zunächst erklären, was Set ist:

Set ist ein neues Datenobjekt, das in ES6 eingeführt wurde. Weil Sie mit Set nur eindeutige Werte speichern können. Wenn Sie ein Array übergeben, werden alle doppelten Werte entfernt.

Okay, gehen wir zurück zu unserem Code und brechen auf, was passiert. Es sind 2 Dinge los:

  1. Zuerst erstellen wir ein neues Set , indem wir ein Array übergeben. Da Set nur eindeutige Werte zulässt, werden alle Duplikate entfernt.
  2. Jetzt sind die Duplikate weg, wir werden es mit dem Spread-Operator wieder in ein Array konvertieren ...
const array = ;// Step 1const uniqueSet = new Set(array);// Set { '🐑', 1, 2, 3 }// Step 2const backToArray = ;// 

# Konvertieren Sie Set mit Array in ein Array.von

Alternativ können Sie auch Array.from verwenden, um ein Set in ein Array zu konvertieren:

const array = ;Array.from(new Set(array));// 

# 2: Filter verwenden

Um diese Option zu verstehen, gehen wir durch, was diese beiden Methoden tun: indexOf und filter

# indexOf

Die indexOf -Methode gibt den ersten gefundenen Index des bereitgestellten Elements aus unserem Array zurück.

const array = ;array.indexOf('🐑'); // 0array.indexOf(1); // 1array.indexOf(2); // 2array.indexOf(3); // 5

# filter

Die filter() -Methode erstellt ein neues Array von Elementen, die die von uns bereitgestellte Bedingung übergeben. Mit anderen Worten, wenn das Element true übergibt und zurückgibt, wird es in das gefilterte Array aufgenommen. Und jedes Element, das fehlschlägt oder false zurückgibt, befindet sich NICHT im gefilterten Array.

Lassen Sie uns einsteigen und durchgehen, was passiert, wenn wir das Array durchlaufen.

const array = ;array.filter((item, index) => { console.log( // a. Item item, // b. Index index, // c. indexOf array.indexOf(item), // d. Condition array.indexOf(item) === index, ); return array.indexOf(item) === index;});

Unten ist die Ausgabe von der Konsole.log oben gezeigt. Die Duplikate sind dort, wo der Index nicht mit dem indexOf übereinstimmt. In diesen Fällen ist die Bedingung also falsch und wird nicht in unser gefiltertes Array aufgenommen.

Item Index indexOf Condition
🐑 0 0 true
1 1 1 true
2 2 2 true
🐑 3 0 false
🐑 4 0 false
3 5 5 true

# Abrufen der doppelten Werte

Wir können auch die Filtermethode verwenden, um die doppelten Werte aus dem Array abzurufen. Wir können dies tun, indem wir einfach unseren Zustand so anpassen:

const array = ;array.filter((item, index) => array.indexOf(item) !== index);// 

Lassen Sie uns dies noch einmal durchgehen und die Ausgabe sehen:

Item Index indexOf Condition
🐑 0 0 false
1 1 1 false
2 2 2 false
🐑 3 0 true
🐑 4 0 true
3 5 5 false

# 3: Verwenden von reduce

Die reduce -Methode wird verwendet, um die Elemente des Arrays zu reduzieren und sie basierend auf einer von Ihnen übergebenen Reduziererfunktion zu einem endgültigen Array zu kombinieren.

In diesem Fall prüft unsere Reduziererfunktion, ob unser endgültiges Array das Element enthält. Wenn nicht, schieben Sie dieses Element in unser endgültiges Array. Andernfalls überspringen Sie dieses Element und geben Sie nur unser endgültiges Array wie es ist zurück (im Wesentlichen überspringen Sie dieses Element).

Reduce ist immer etwas schwieriger zu verstehen, also gehen wir auch auf jeden Fall ein und sehen uns die Ausgabe an:

const array = ;array.reduce((unique, item) => { console.log( // a. Item item, // b. Final Array (Accumulator) unique, // c. Condition (Remember it only get pushed if this returns `false`) unique.includes(item), // d. Reducer Function Result unique.includes(item) ? unique : , ); return unique.includes(item) ? unique : ;}, ); // 👈 The initial value of our Accumulator is an empty array// RESULT:// ;

Und hier ist die Ausgabe von der Konsole.anmelden:

Item Akkumulator (VOR Reduzierfunktion) Auf Akkumulator drücken? Akkumulator (NACH Reduzierfunktion)
🐑 Ja
1 Ja
2 Ja
🐑 Nein
🐑 Nein
3 Ja

# Beitrag der Gemeinschaft

  • @ smokkku: array.includes(item) ist idiomatischer, um zu testen, ob das Array das Element enthält

  • @ riquelkovsky : Gerade heute habe ich das getan, indem ich Folgendes getan habe.Object.keys(array.reduce((map, next) => ({...map, : true}), {}))

-@ luisiacc2 : Sicher, Set() wird den Trick für primitive Werte machen, mit Objekten würde eine nicht O(n^2) Lösung zuerst eine sort() auf dem Array(das in O(nlogn) operiert) und dann nach den adjacents equal items(das ist O(n) ) , also hast du O(n + nlogn) .

  • @ iamdipankarj: Auch Array.from(new Set()) , aber das funktioniert nur bei Primitiven. Zum Filtern von Duplikaten im Array von benutzerdefinierten Objekten Array.filter() ist der richtige Weg.

  • @ benawad : filter Laufzeit ist O(n^2)

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.