Detaillierte Untersuchung des Problems der Array-Deduplizierung in JavaScript

Vorwort 👀

Array-Deduplizierung dürfte ein weit verbreitetes Problem sein. Da es häufig vorkommt, sollten wir uns darüber informieren!

Damit es mir nicht peinlich ist, wenn ich nicht weiß, wie es geht~ Hehe

Beginnen Sie mit der Recherche 🐱‍🏍

Original 🧶

Zum Entfernen von Duplikaten aus einem Array war meine ursprüngliche Idee folgende: Definieren Sie ein neues Array, führen Sie zwei Schichten von For-Schleifen durch, übertragen Sie die Daten in das neue Array, wenn sie zum ersten Mal auftreten, unterbrechen Sie sie, verwenden Sie den Wert von j gleich der Länge von res, um zu bestimmen, dass die Daten eindeutig sind, und geben Sie schließlich das neue Array zurück.

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

Funktion einzigartig(arr){
	var res = []
	für(var i = 0; i < arr.length; i++){
		für(var j = 0; j < res.length; j++){
			wenn(arr[i] === res[j]){
				brechen
			}
		}
		// Wenn die Daten zum ersten Mal auftreten, sollte nach der Ausführung der obigen for-Anweisung der Wert von j gleich der Länge von res sein, if(j === res.length){
			res.push(arr[i])
		}
	}
	Rückgabewert;
}

Konsole.log(eindeutig(arr));

Optimierung der ursprünglichen Methode mit indexOf ✍

Werfen wir zunächst einen kurzen Blick auf indexOf:

Die Methode indexOf(item,start) gibt die Position eines angegebenen Elements in einem Array zurück.

Diese Methode durchsucht das Array von Anfang bis Ende, um zu sehen, ob es das entsprechende Element enthält. Die Suche beginnt am Anfang des Arrays oder am Beginn des Arrays (wenn der Startparameter nicht angegeben ist). Wenn ein Element gefunden wird, wird die Position des ersten Vorkommens des Elements zurückgegeben. Die Startposition hat einen Index von 0.

Wenn das angegebene Element nicht im Array gefunden wird, wird -1 zurückgegeben.

Wenn man das sieht, versteht jeder, was wir ausnutzen, oder? Ja, es ist der fettgedruckte Satz: Wenn das angegebene Element nicht im Array gefunden wird, wird -1 zurückgegeben .

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

Funktion einzigartig(arr){
	var res = []
	für(var i = 0; i < arr.length; i++){
		wenn (res.indexOf(arr[i]) === -1) {
			res.push(arr[i])
		}
	}
	Rückgabewert;
}

Konsole.log(eindeutig(arr));

Nochmals optimieren, Filtermethode 🎉

Wie der Name schon sagt, bedeutet Filter Filtern. Diese Methode erstellt ein neues Array. Die Elemente im neuen Array werden erhalten, indem alle Elemente überprüft werden, die die Bedingungen im angegebenen Array erfüllen.

Idee: Verwenden Sie Filter anstelle einer Schleifenebene in Verbindung mit indexOf, um den Filtereffekt zu erzielen und das deduplizierte Array direkt zurückzugeben.

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

Funktion einzigartig(arr){
	var res = arr.filter(Funktion(Element,Index,arr){
		Rückgabewert arr.indexOf(item) === index
	})
	Rückgabewert;
}
Konsole.log(eindeutig(arr));

Umdenken? Werde ein geordnetes Array ✨

Ich frage mich, ob diejenigen von Ihnen, die seit einigen Tagen Lecture Hall spielen, dieses Gefühl hatten. Wenn Sie in einer Frage ein Array sehen, blicken Ihre Augen sofort nach vorne, um zu sehen, ob es sich um ein geordnetes oder ein ungeordnetes Array handelt.

Zurück zu dieser Frage: Wir sortieren das zu deduplizierende Array, und die wiederholten Daten müssen nebeneinander liegen. Verwenden Sie eine Variable, um den vorherigen Elementwert zu speichern, und führen Sie dann eine Schleife aus, um zu bestimmen, ob der aktuelle Wert mit dem vorherigen Elementwert übereinstimmt. Wenn nicht, fügen Sie ihn zu res hinzu.

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

Funktion einzigartig(arr){
	var res = []
	var vor
	arr = arr.sort()
	für(var i = 0; i < arr.length; i++){
		wenn(!i || vor !== arr[i]){
			res.push(arr[i])
		}
		vor = arr[i]
	}
	Rückgabewert;
}

Konsole.log(eindeutig(arr));

Nochmals optimieren, filtern🧨

Mir ist gerade aufgefallen, dass Filter die Sortierung hier auch neu schreiben können, um sie prägnanter zu gestalten. Schauen wir uns den Code direkt an:

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

Funktion einzigartig(arr){
	var res = arr.sort().filter(Funktion(Element,Index,arr){
		Rückgabe !index || Element !== arr[index - 1]
	})
	Rückgabewert;
}

Konsole.log(eindeutig(arr));

ES6, Set kommt 🧸

ES6 bringt uns viele Vorteile, unter denen Map und Set besonders hervorstechen.

Map-Objekte speichern Schlüssel-Wert-Paare. Jeder beliebige Wert (Objekt oder Primitiv) kann als Schlüssel oder Wert verwendet werden.

Mit dem Set-Objekt können Sie eindeutige Werte beliebigen Typs speichern, seien es primitive Werte oder Objektreferenzen.

Daher können wir diese Funktion von Set nutzen, um Deduplizierungsvorgänge durchzuführen.

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

Funktion einzigartig(arr){
	gibt Array.from(neues Set(arr)) zurück
}

Konsole.log(eindeutig(arr));

Hinweis: Da es sich bei Set um ein Objekt handelt, muss es für die Rückgabe in ein Array konvertiert werden.

Wenn Sie die Destrukturierungszuweisung verstehen, können Sie sie noch etwas weiter vereinfachen 🧵

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']

Funktion einzigartig(arr){
	zurückgeben [...neues Set(arr)]
}

Konsole.log(eindeutig(arr));

Wenn Sie mehr über die Destrukturierungszuweisung erfahren möchten, können Sie zunächst auch Folgendes lesen: Verständnis und Anwendung von Destrukturierungsoperatoren

Vorheriges Studium, aufgezeichnete Notizen 🎨

Bleib weiterhin großartig (Pfeilfunktionen) 🏆

var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
var unique = (arr) => [...neues Set(arr)]
Konsole.log(eindeutig(arr));

Endlich 📖

Von mehreren Codezeilen am Anfang bis zu einer Codezeile am Ende mithilfe von Pfeilfunktionen reicht es aus, um zu zeigen, dass wir nur durch kontinuierliches Lernen eleganteren und prägnanteren Code schreiben können.

Dies ist das Ende dieses Artikels über JavaScript-Array-Deduplizierung. Weitere relevante Inhalte zur JavaScript-Array-Deduplizierung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!