Anmerkungen zur JavaScript-Studie: Array-Deduplizierung_Javascript-Kenntnisse

Empfohlene Lektüre: JavaScript-Studiennotizen: Hinzufügen, Löschen, Ändern und Überprüfen von Arrays

JavaScript Study Notes Array Sum Method

JavaScript Study Notes Array Random Sorting

In Vorstellungsgesprächen stellen Interviewer häufig Fragen zur Implementierung der Array-Deduplizierung in JavaScript. Vor kurzem habe ich mich zufällig mit JavaScript-Arrays befasst und diese Gelegenheit genutzt, um einige Methoden zur Deduplizierung von Arrays in JavaScript zu klären.

Die folgenden Methoden zur Array-Deduplizierung wurden von mir selbst zusammengestellt und organisiert. Wenn es Fehler gibt, weisen Sie bitte auf die Fehler im Text hin.

Double-Loop-Deduplizierung

Diese Methode verwendet zwei for-Schleifen zum Durchlaufen. Die ganze Idee ist:

Erstellen Sie ein leeres Array zum Speichern des deduplizierten Arrays

Die äußere for-Schleife durchläuft das ursprüngliche Array, entnimmt jedes Mal ein Element aus dem Array und vergleicht es mit dem Ergebnisarray
Wenn die aus dem ursprünglichen Array entnommenen Elemente mit den Elementen im Ergebnisarray übereinstimmen, brechen Sie die Schleife aus; andernfalls speichern Sie sie im Ergebnisarray

Der Code lautet wie folgt:

Array.prototype.unique1 = function () {
// 构建一个新数组，存放结果
var newArray = [this[0]];
// for循环，每次从原数组中取出一个元素
// 用取出的元素循环与结果数组对比
for (var i = 1; i < this.length; i++) {
var repeat = false;
for (var j=0; j < newArray.length; j++) {
// 原数组取出的元素与结果数组元素相同
if(this[i] == newArray[j]) {
repeat = true;
break;
}
}
if(!repeat) {
// 如果结果数组中没有该元素，则存放到结果数组中
newArray.push(this[i]);
}
}
return newArray;
}

Angenommen, wir haben ein Array wie dieses:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1',`2`];
arr.unique1(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5]

Es wird gesagt, dass diese Methode zeitaufwändig und leistungsintensiv ist. Führen Sie einfach einen einfachen Test durch (die Testmethode ist schlecht geschrieben):

function test () {
var arr = [];
for (var i = 0; i < 1000000; i++) {
arr.push(Math.round(Math.random(i) * 10000));
}
doTest(arr, 1);
}
function doTest(arr, n) {
var tStart = (new Date()).getTime();
var re = arr.unique1();
var tEnd = (new Date()).getTime();
console.log('双重循环去重方法使用时间是:' + (tEnd - tStart) + 'ms');
return re;
}
test();

Führen Sie den obigen Code im Chrome-Controller aus und testen Sie die benötigte Zeit für die Double-Loop-Deduplizierung: 11031 ms.

Die obige Methode kann mit der forEach()-Methode und der indexOf()-Methode simuliert werden:

function unique1() {
var newArray = [];
this.forEach(function (index) {
if (newArray.indexOf(index) == -1) {
newArray.push(index);
}
});
return newArray;
}

Anruf über unique1.apply(arr) oder unique1.call(arr). Diese Methode ist jedoch viel effizienter. Der gleiche Testcode oben benötigt 5423 ms, was fast halb so schnell ist.

Sortierdurchlauf zum Entfernen von Duplikaten

Verwenden Sie zunächst die Methode sort(), um das ursprüngliche Array zu sortieren. Durchlaufen Sie nach dem Sortieren das Array und prüfen Sie, ob das i-te Element im Array mit dem letzten Element im Ergebnisarray übereinstimmt. Wenn sie unterschiedlich sind, werden die Elemente im resultierenden Array platziert.

Array.prototype.unique2 = function () {
// 原数组先排序
this.sort();
// 构建一个新数组存放结果
var newArray = [];
for (var i = 1; i < this.length; i++) {
// 检查原数中的第i个元素与结果中的最后一个元素是否相同
// 因为排序了，所以重复元素会在相邻位置
if(this[i] !== newArray[newArray.length - 1]) {
// 如果不同，将元素放到结果数组中
newArray.push(this[i]);
}
}
return newArray;
}

Zum Beispiel:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique2(); // ["1", 1, 2, "2", 3, 32, 34, 4, 5, 56, "a", "b", "c"]

Diese Methode weist zwei Merkmale auf:

Das Array wird nach der Deduplizierung sortiert, hauptsächlich weil die ursprünglichen Zahlen vor der Deduplizierung sortiert wurden

Im Array nach der Deduplizierung können numerische Zeichen, die mit Zahlen identisch sind, nicht unterschieden werden, z. B. „1“ und 1

Bei Verwendung derselben Methode beträgt die Testzeit: 1232 ms.

Objekt-Schlüssel-Wert-Paar-Methode

Die Implementierungsidee dieser Deduplizierungsmethode ist:

Erstellen Sie ein JavaScript-Objekt und ein neues Array

Verwenden Sie eine for-Schleife, um das ursprüngliche Array zu durchlaufen, wobei Sie jedes Mal ein Element herausnehmen und es mit dem Schlüssel des JavaScript-Objekts vergleichen

Wenn es nicht enthalten ist, verschieben Sie den Wert des im Objekt gespeicherten Elements in das Ergebnisarray und setzen Sie den Wert des im Objektobjekt gespeicherten Attributnamens auf 1

Der Code lautet wie folgt:

Array.prototype.unique3 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 创建一个空对象
var object = {};
// for循环时，每次取出一个元素与对象进行对比
// 如果这个元素不重复，则将它存放到结果数中
// 同时把这个元素的内容作为对象的一个属性，并赋值为1,
// 存入到第2步建立的对象中
for (var i = 0; i < this.length; i++){
// 检测在object对象中是否包含遍历到的元素的值
if(!object[typeof(this[i]) + this[i]]) {
// 如果不包含，将存入对象的元素的值推入到结果数组中
newArray.push(this[i]);
// 如果不包含，存入object对象中该属性名的值设置为1
object[typeof(this[i]) + this[i]] = 1;
}
}
return newArray;
}

Führen Sie das vorherige Beispiel aus:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique3(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

In ähnlicher Weise können verschiedene Schlüssel mit dem gleichen verwechselt werden, zum Beispiel: a[1], a["1"] . Zeitaufwand für diese Methode: 621 ms. Diese Methode benötigt die kürzeste Zeit, beansprucht jedoch mehr Speicher.

Zusätzlich zu den oben genannten Methoden gibt es mehrere andere Methoden wie folgt:

// 方法四
Array.prototype.unique4 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 遍历整个数组
for (var i = 0; i < this.length; i++) {
// 遍历是否有重复的值
for (j = i + 1; j < this.length; j++) {
// 如果有相同元素，自增i变量，跳出i的循环
if(this[i] === this[j]) {
j = ++i;
}
}
// 如果没有相同元素，将元素推入到结果数组中
newArray.push(this[i]);
}
return newArray;
}

Chrome-Testergebnisse

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique4(); // ["a", 1, 3, 4, 56, 32, 34, 2, "b", "c", 5, "1", "2"]

Ebenso sind 1 und „1“ nicht zu unterscheiden.

// 方法五
Array.prototype.unique5 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 遍历整个数组
for (var i = 0; i < this.length; i++) {
// 如果当前数组的第i值保存到临时数组，那么跳过
var index = this[i];
// 如果数组项不在结果数组中，将这个值推入结果数组中
if (newArray.indexOf(index) === -1) {
newArray.push(index);
}
}
return newArray;
}

Chrome-Testergebnisse:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

Ebenso sind 1 und „1“ nicht zu unterscheiden. Zeitaufwand: 14361 ms.

// 方法六
Array.prototype.unique6 = function () {
return this.reduce(function (newArray, index) {
if(newArray.indexOf(index) < 0) {
newArray.push(index);
}
return newArray;
},[]);
}

Die Testergebnisse lauten wie folgt:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

Benötigte Zeit: 16490 ms.

// 方法七
Array.prototype.unique7 = function(){
var newArray;
newArray = this.filter(function (ele,i,arr) {
return arr.indexOf(ele) === i;
});
return newArray;
}

Testergebnisse:

var arr = [1,2,3,4,'a','b',1,3,4,56,32,34,2,'b','c',5,'1','2'];
arr.unique6(); // [1, 2, 3, 4, "a", "b", 56, 32, 34, "c", 5, "1", "2"]

Benötigte Zeit: 13201 ms.

Obwohl es viele Methoden gibt, ist die folgende Methode im Vergleich eine bessere Lösung:

Array.prototype.unique3 = function () {
// 构建一个新数组存放结果
var newArray = [];
// 创建一个空对象
var object = {};
// for循环时，每次取出一个元素与对象进行对比
// 如果这个元素不重复，则将它存放到结果数中
// 同时把这个元素的内容作为对象的一个属性，并赋值为1,
// 存入到第2步建立的对象中
for (var i = 0; i < this.length; i++){
// 检测在object对象中是否包含遍历到的元素的值
if(!object[typeof(this[i]) + this[i]]) {
// 如果不包含，将存入对象的元素的值推入到结果数组中
newArray.push(this[i]);
// 如果不包含，存入object对象中该属性名的值设置为1
object[typeof(this[i]) + this[i]] = 1;
}
}
return newArray;
}

Aber es gibt einfachere und optimiertere Lösungen für die Deduplizierung in ES6, wie zum Beispiel:

// ES6
function unique (arr) {
const seen = new Map()
return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}
// or
function unique (arr) {
return Array.from(new Set(arr))
}

Das Obige sind die vom Herausgeber eingeführten JavaScript-Lernnotizen zum Entfernen von Duplikaten aus Arrays. Ich hoffe, sie werden Ihnen hilfreich sein!