Neun erweiterte Methoden zur Deduplizierung von JS-Arrays (erprobt und effektiv)

Vorwort

Die allgemeinen Methoden sind hier nicht aufgeführt, es gibt noch viele weitere, z. B. eine Doppelschleife, um festzustellen, ob sie gleich sind, oder ein neues Array zum Vergleichen und anschließendem Pushen erstellen usw. Es ist zu beachten, dass beim Entfernen von Elementen mit der Splice-Methode das Array möglicherweise zusammenbricht und behandelt werden muss.

Dieser Artikel stellt verschiedene Methoden zur Array-Deduplizierung vor, verwendet eine große Anzahl hochrangiger Methoden und APIs und gibt entsprechende Erklärungen und Syntax. Es gibt auch viele andere kombinierte Aufrufmethoden. Die prinzipielle Logik ist eigentlich ähnlich. Unter ihnen kann die for-Schleife in die forEach-Methode umgewandelt werden, daher werde ich sie hier nicht einzeln auflisten. Wenn Sie einen besseren Algorithmus haben, können Sie mir eine Nachricht hinterlassen und mich demütig um Rat fragen! !

Bei einem Array [1,2,2,4,null,null,'3','abc',3,5,4,1,2,2,4,null,null,'3','abc',3,5,4] Duplikate entfernen

lass arr = [1,2,2,4,null,null,'3','abc',3,5,4,1,2,2,4,null,null,'3','abc',3,5,4] 

1. Verwenden Sie den eindeutigen Schlüssel des Objekts

Wie wir alle wissen, kann der Schlüssel eines Objekts nicht wiederholt werden, da sonst der letztere den ersteren überschreibt. Mit dieser Funktion können wir das Array deduplizieren, das Array durchlaufen und jedes Element im Array als Schlüsselwert des Objekts verwenden.

lass obj = {};
für (sei i = 0; i < arr.length; i++) {
 lass Artikel = arr[i]
 wenn (Objekt[Element] !== undefiniert) {
 arr.splice(i, 1);
 i--; // Lösen Sie das Problem des Array-Zusammenbruchs nach dem Löschen von Elementen. Weiter;
 }
 obj[item] = Artikel
}

// arr: [1, 2, 4, null, "3", "abc", 3, 5]

2. Tauschen Sie die Elemente aus, um die Spleißmethode zu ersetzen

Die obige Methode weist bestimmte Leistungsprobleme auf, d. h. die Löschleistung basierend auf Splice ist nicht sehr gut. Nachdem das aktuelle Element gelöscht wurde, muss der Index jedes nachfolgenden Elements um eine Position nach vorne verschoben werden. Bei großen Datenmengen wirkt sich dies definitiv auf die Leistung aus.

Basierend auf den obigen Überlegungen ist das Austauschen der Positionen von Elementen effizienter. Wenn das aktuelle Element wiederholt wird, wird es mit dem letzten Element des Arrays ausgetauscht, und i-- kann erneut beurteilt werden. Gleichzeitig wird length--, die Länge des Arrays, ausgeführt, um das letzte Element des Arrays zu löschen, sodass andere Elemente im Array nicht betroffen sind.

lass obj = {};
für (sei i = 0; i < arr.length; i++) {
 lass Artikel = arr[i]
 wenn (Objekt[Element] !== undefiniert) {
 arr[i] = arr[arr.Länge - 1]
 arr.Länge--;
 ich--; 
 weitermachen;
 }
 obj[item] = Artikel
}
// arr: [1, 2, 4, null, "3", "abc", 3, 5]

3. Array.filter + Array.indexOf

filter()-Methode: Erstellen Sie ein neues Array, dessen Elemente alle Elemente im angegebenen Array sind, die bestimmte Bedingungen erfüllen. Wenn keine Elemente vorhanden sind, die der Bedingung entsprechen, wird ein leeres Array zurückgegeben.

Syntax: array.filter(Funktion(Element,Index,arr))

• filter() erkennt keine leeren Arrays.
• filter() verändert das ursprüngliche Array nicht.

Prinzip: Gibt das Element zurück, dessen erstes Vorkommen des Elements dem aktuellen Index entspricht

let newArr = arr.filter((item, index) => arr.indexOf(item) === index); 

// [1, 2, 4, null, "3", "abc", 3, 5]

4. Array.filter + Objekt.hasOwnProperty

Methode hasOwnProperty(): Gibt einen Booleschen Wert zurück, der angibt, ob das Objekt die angegebene Eigenschaft hat.

Prinzip: Nutzen Sie die nicht wiederholbare Natur des Schlüsselnamens des Objekts

let obj = {}

arr.filter(Element => obj.hasOwnProperty(Elementtyp + Element) ? false : (Obj[Elementtyp + Element] = true)) 

5. Array.reduce + Array.includes

Methode „reduce()“: Empfängt eine Funktion als Akkumulator, und jeder Wert im Array wird von links nach rechts berechnet und schließlich als Wert berechnet.

Syntax: arr.reduce(Funktion(Gesamt, aktuellerWert, aktuellerIndex, arr), Anfangswert)

reduce() führt die Rückruffunktion für ein leeres Array nicht aus.

Gesamt: erforderlich. Anfangswert bzw. Rückgabewert nach Berechnung

aktuellerWert: erforderlich. Aktuelles Element

aktuellerIndex: Optional. Der Index des aktuellen Elements

arr: optional. Das aktuelle Array-Objekt.

initValue: Optional. Akkumulator-Anfangswert

Das Aufrufen der Methode „reduce()“ für ein leeres Array ohne Angabe eines Anfangswerts führt zu einem Fehler.

Wenn Sie die Methode „reduce()“ mit einem leeren Array aufrufen und einen Anfangswert angeben, wird der Anfangswert direkt zurückgegeben, ohne dass die Rückruffunktion aufgerufen werden muss.

Wenn ein nicht leeres Array „reduce()“ aufruft, um einen Anfangswert bereitzustellen, ist „total“ gleich dem Anfangswert und „currValue“ beginnt beim ersten Element. Wenn kein Anfangswert bereitgestellt wird, ist „total“ gleich dem Wert des ersten Elements und „currValue“ beginnt beim zweiten Element.

lass newArr = arr.reduce((accu, cur) => {
 return accu.includes(cur) ? accu : accu.concat(cur); // 1. Verkettungsmethode// return accu.includes(cur) ? accu : [...accu, cur]; // 2. Erweiterungsoperation}, []);


// [1, 2, 4, null, "3", "abc", 3, 5]

6. Array.indexOf

Methode indexOf(): Gibt die Position eines angegebenen Elements in einem Array zurück. Diese Methode durchläuft das Array, sucht nach dem entsprechenden Element und gibt den Index des ersten Vorkommens des Elements zurück. Wenn das angegebene Element nicht gefunden wird, wird -1 zurückgegeben.

lass newArr = []
für (var i = 0; i < arr.length; i++) {
 wenn (newArr.indexOf(arr[i]) === -1) newArr.push(arr[i]) 
}

//Entspricht forEach arr.forEach( item => newArr.indexOf(item) === -1 ? newArr.push(item) : '')

console.log(newArr) // [1, 2, 4, null, "3", "abc", 3, 5]

7. Array.includes

Methode „includes()“: Wird verwendet, um zu bestimmen, ob ein Array einen angegebenen Wert enthält. Wenn ja, wird „true“ zurückgegeben, andernfalls „false“.

lass newArr = []
für (var i = 0; i < arr.length; i++) {
 wenn (!newArr.includes(arr[i])) newArr.push(arr[i])
}

// Entspricht forEach arr.forEach( item => !newArr.includes(item) ? newArr.push(item) : '')

console.log(newArr) // [1, 2, 4, null, "3", "abc", 3, 5]

8. neuer Set + Spread-Operator || Array.from

ES6 bietet ein neues Datenstruktur-Set. Ähnlich einem Array, aber die Mitgliedswerte sind eindeutig und es gibt keine doppelten Werte.

Set selbst ist ein Konstruktor, der zur Initialisierung eine Datenstruktur mit einer iterierbaren Schnittstelle als Parameter akzeptieren kann (z. B. ein Array, einen String).

// [1, 2, 4, null, "3", "abc", 3, 5]

// [1, 2, 4, null, "3", "abc", 3, 5]

let newStr = [...neues Set('ababbc')].join('') // 'abc'

9. Neue Karte

ES6 bietet eine neue Datenstruktur Map. Ähnlich wie Objekte handelt es sich auch um eine Sammlung von Schlüssel-Wert-Paaren, aber der Umfang von „Schlüssel“ ist nicht auf Zeichenfolgen beschränkt. Werte verschiedener Typen (einschließlich Objekte) können als Schlüssel verwendet werden.

Die Set-Methode setzt den Schlüsselwert entsprechend dem Schlüsselnamen key to value und gibt dann die gesamte Map-Struktur zurück. Wenn der Schlüssel bereits einen Wert hat, wird der Schlüsselwert aktualisiert, andernfalls wird ein neuer Schlüssel generiert.

Die Methode get liest den zum Schlüssel gehörigen Schlüsselwert. Wenn der Schlüssel nicht gefunden werden kann, wird undefined zurückgegeben.

Die Methode „has“ gibt einen booleschen Wert zurück, der angibt, ob sich ein Schlüssel im aktuellen Map-Objekt befindet.

lass map = neue Map();
lass newStr = [];

für (sei i = 0; i < arr.length; i++) {
 wenn (!map.has(arr[i])) {
  Karte.set(arr[i], true);
  newStr.push(arr[i]);
 }
}
console.log(newArr) // [1, 2, 4, null, "3", "abc", 3, 5]

Zusammenfassen

Damit ist der Artikel über neun erweiterte Methoden zur JS-Array-Deduplizierung abgeschlossen. Weitere relevante Inhalte zur JS-Array-Deduplizierung 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!