Wir alle wissen, dass verschiedene Programmiersprachen über Array-Deduplizierung verfügen. In diesem Artikel werden wir über die JavaScript-Array-Deduplizierung sprechen und hoffen, allen zu helfen.
Doppelschichtschleife
Vielleicht denken wir zuerst daran, indexOf zu verwenden, um das Urteil zu durchlaufen, aber vor dieser Methode werfen wir einen Blick auf die originellste Methode:
var array = [1, 1, '1', '1'];function unique(array) { // res用来存储结果
var res = []; for (var i = 0, arrayLen = array.length; i < arrayLen; i++) { for (var j = 0, resLen = res.length; j < resLen; j++ ) { if (array[i] === res[j]) { break;
}
} // 如果array[i]是唯一的，那么执行完循环，j等于resLen
if (j === resLen) {
res.push(array[i])
}
} return res;
}console.log(unique(array)); // [1, "1"]In dieser Methode verwenden wir Schleifenverschachtelung, das äußerste Schleifenarray und das innere Schleifenarray res. Wenn der Wert von array[i] gleich dem Wert von res[j] ist, springen wir aus Wenn sie nicht gleich sind, erklären Sie, dass der Wert von j zu diesem Zeitpunkt gleich der Länge von res ist, und addieren Sie den Wert zu res.
Es scheint sehr einfach zu sein, dass ich über diese Methode sprechen möchte, weil sie eine gute Kompatibilität aufweist!
indexOf
Wir können indexOf verwenden, um die innere Schleife zu vereinfachen:
var array = [1, 1, '1'];function unique(array) { var res = []; for (var i = 0, len = array.length; i < len; i++) { var current = array[i]; if (res.indexOf(current) === -1) {
res.push(current)
}
} return res;
}console.log(unique(array));Deduplizierung nach dem Sortieren
Stellen Sie sich vor, wir deduplizieren zuerst das Array Wenn Sie die Sortiermethode verwenden, werden dieselben Werte zusammensortiert. Dann können wir nur beurteilen, ob das aktuelle Element mit dem vorherigen Element übereinstimmt. Fügen Sie sie zu res hinzu. Schreiben wir eine Demo:
var array = [1, 1, '1'];function unique(array) { var res = []; var sortedArray = array.concat().sort(); var seen; for (var i = 0, len = sortedArray.length; i < len; i++) { // 如果是第一个元素或者相邻的元素不相同
if (!i || seen !== sortedArray[i]) {
res.push(sortedArray[i])
}
seen = sortedArray[i];
} return res;
}console.log(unique(array));Wenn wir ein sortiertes Array deduplizieren, ist diese Methode definitiv effizienter als die Verwendung von indexOf.
unique API
Nachdem wir diese beiden Methoden kennen, können wir versuchen, eine Tool-Funktion namens Unique zu schreiben. Wir bestimmen, ob das eingehende Array anhand eines Parameters dupliziert wird. Wir werden beurteilen, ob die benachbarten Elemente gleich sind. Wenn dies falsch ist, verwenden wir indexOf, um zu beurteilen
var array1 = [1, 2, '1', 2, 1];var array2 = [1, 1, '1', 2, 2];// 第一版function unique(array, isSorted) { var res = []; var seen = []; for (var i = 0, len = array.length; i < len; i++) { var value = array[i]; if (isSorted) { if (!i || seen !== value) {
res.push(value)
}
seen = value;
} else if (res.indexOf(value) === -1) {
res.push(value);
}
} return res;
}console.log(unique(array1)); // [1, 2, "1"]console.log(unique(array2, true)); // [1, "1", 2]Optimierung
Obwohl unqique bereits die Deduplizierungsfunktion ausprobieren kann, um Um diese API leistungsfähiger zu machen, betrachten wir eine Anforderung:
Neue Anforderung: Die Groß- und Kleinschreibung von Buchstaben gelten als konsistent, z. B. „a“ und „A“, behalten Sie einfach eine bei!
Obwohl wir zuerst alle Daten im Array verarbeiten können, z. B. alle Buchstaben in Kleinbuchstaben umwandeln, und sie dann an die Unique-Funktion übergeben können, gibt es eine Möglichkeit, diese Schleife der Array-Verarbeitung einfach zu speichern Machen Sie es direkt? Wie wäre es mit einem Deduplizierungszyklus? Erfüllen wir diese Anforderung:
var array3 = [1, 1, 'a', 'A', 2, 2];// 第二版// iteratee 英文释义：迭代 重复function unique(array, isSorted, iteratee) { var res = []; var seen = []; for (var i = 0, len = array.length; i < len; i++) { var value = array[i]; var computed = iteratee ? iteratee(value, i, array) : value; if (isSorted) { if (!i || seen !== value) {
res.push(value)
}
seen = value;
} else if (iteratee) { if (seen.indexOf(computed) === -1) {
seen.push(computed);
res.push(value);
}
} else if (res.indexOf(value) === -1) {
res.push(value);
}
} return res;
}console.log(unique(array3, false, function(item){ return typeof item == 'string' ? item.toLowerCase() : item
})); // [1, "a", 2]In dieser und der letzten Version der Implementierung übergibt die Funktion drei Parameter:
Array: stellt das Array zum Entfernen von Duplikaten dar, das „Fill“ sein muss in
isSorted: Gibt an, ob das von der Funktion übergebene Array sortiert wurde. Wenn dies der Fall ist, wird eine schnellere Methode zum Entfernen von Duplikaten verwendet.
iteratee: Übergeben Sie eine Funktion, die kann das Array neu berechnen und dann entsprechend den Verarbeitungsergebnissen deduplizieren.
An dieser Stelle haben wir eine einzigartige Funktion geschrieben, die der Idee des Unterstrichs folgt. Weitere Informationen finden Sie auf Github.
filter
ES5 stellt die Filtermethode bereit, mit der wir die äußere Schleife vereinfachen können:
Verwenden Sie beispielsweise die indexOf-Methode:
var array = [1, 2, 1, 1, '1'];function unique(array) { var res = array.filter(function(item, index, array){ return array.indexOf(item) === index;
}) return res;
}console.log(unique(array));Sortiermethoden zum Entfernen von Duplikaten:
var array = [1, 2, 1, 1, '1'];function unique(array) { return array.concat().sort().filter(function(item, index, array){ return !index || item !== array[index - 1]
})
}console.log(unique(array));Objekt-Schlüssel-Wert-Paar
Es gibt viele Methoden zum Entfernen von Duplikaten. Obwohl wir bereits eine eindeutige API nach dem Unterstrich geschrieben haben, schauen wir uns das an Bei anderen Methodenerweiterungen Untere Ansicht:
Diese Methode verwendet ein leeres Objektobjekt. Wir speichern den Wert des Arrays als Schlüsselwert des Objekts, z. B. Object[value1] = true, wenn ein anderer Wert beurteilt wird. Wenn das Objekt [Wert2] vorhanden ist, bedeutet dies, dass der Wert wiederholt wird. Der Beispielcode lautet wie folgt:
var array = [1, 2, 1, 1, '1'];function unique(array) { var obj = {}; return array.filter(function(item, index, array){ return obj.hasOwnProperty(item) ? false : (obj[item] = true)
})
}console.log(unique(array)); // [1, 2]Wir können feststellen, dass ein Problem vorliegt, weil 1 und „1“ unterschiedlich sind, aber diese Methode beurteilt aufgrund des Schlüsselwerts von den gleichen Wert das Objekt Es kann nur eine Zeichenfolge sein, daher können wir typeof item + item verwenden, um eine Zeichenfolge als Schlüsselwert zu bilden, um dieses Problem zu vermeiden:
var array = [1, 2, 1, 1, '1'];function unique(array) { var obj = {}; return array.filter(function(item, index, array)
{ return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
})
}console.log(unique(array)); // [1, 2, "1"]ES6
Mit der Ankunft von ES6, Deduplizierung Es gab Fortschritte bei der Methode. Beispielsweise können wir Set- und Map-Datenstrukturen verwenden. Am Beispiel von Set stellt ES6 eine neue Datenstruktur bereit. Es ähnelt einem Array, aber die Werte der Mitglieder sind eindeutig und es gibt keine doppelten Werte.
Haben Sie das Gefühl, dass Sie sich darauf vorbereiten, Gewicht zu verlieren? Schreiben wir eine Version:
var array = [1, 2, 1, 1, '1'];function unique(array) { return Array.from(new Set(array));
}console.log(unique(array)); // [1, 2, "1"]Es kann sogar noch weiter vereinfacht werden:
function unique(array) { return [...new Set(array)];
}Es kann auch noch weiter vereinfacht werden:
var unique = (a) => [...new Set(a)]
Außerdem, wenn Sie verwenden Maps Worte:
function unique (arr) { const seen = new Map() return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
}Die Entwicklung von JavaScript
Wir können sehen, dass die Deduplizierungsmethode von den ursprünglichen 14 Codezeilen auf eine Codezeile von ES6 übergegangen ist, was tatsächlich veranschaulicht Die JavaScript-Sprache Ich glaube, dass die zukünftige Entwicklung mit kontinuierlichem Fortschritt immer effizienter werden wird.
Spezieller Typvergleich
Damit ist die Deduplizierungsmethode beendet. Die zu deduplizierenden Elementtypen können jedoch unterschiedlich sein, mit Ausnahme der einfachen 1 und „1“ im Beispiel. Es gibt auch null, undefiniert, NaN, Objekte usw. Was ist also das Deduplizierungsergebnis der vorherigen Methoden für diese Elemente?
Davor schauen wir uns ein paar Beispiele an:
var str1 = '1';var str2 = new String('1');console.log(str1 == str2);
// trueconsole.log(str1 === str2); // falseconsole.log(null == null);
// trueconsole.log(null === null); // trueconsole.log(undefined == undefined);
// trueconsole.log(undefined === undefined); // trueconsole.log(NaN == NaN);
// falseconsole.log(NaN === NaN); // falseconsole.log(/a/ == /a/);
// falseconsole.log(/a/ === /a/); // falseconsole.log({} == {});
// falseconsole.log({} === {});
// falseAlso, für ein solches Array
var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN];
können die oben genannten Methoden verwendet werden, um Duplikate zu entfernen Was ist das Ergebnis?
Ich habe speziell eine Liste zusammengestellt, wir konzentrieren uns auf die Deduplizierung von Objekten und NaN:
Methodenergebnisbeschreibung
für Schleife [1, "1", null, undefiniert, String, String, /a/, /a/, NaN, NaN] Objekte und NaN werden nicht dupliziert
indexOf [1, "1", null, undefined, String, String, /a/, /a/, NaN, NaN] 对象和 NaN 不去重
sort [/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined] 对象和 NaN 不去重 数字 1 也不去重
filter + indexOf [1, "1", null, undefined, String, String, /a/, /a/] 对象不去重 NaN 会被忽略掉
filter + sort [/a/, /a/, "1", 1, String, 1, String, NaN, NaN, null, undefined] 对象和 NaN 不去重 数字 1 不去重
优化后的键值对方法 [1, "1", null, undefined, String, /a/, NaN] 全部去重
Set [1, "1", null, undefined, String, String, /a/, /a/, NaN] 对象不去重 NaN 去重
想了解为什么会出现以上的结果，看两个 demo 便能明白：
// demo1var arr = [1, 2, NaN];
arr.indexOf(NaN); // -1
indexOf 底层还是使用 === 进行判断，因为 NaN ==== NaN的结果为 false，所以使用 indexOf 查找不到 NaN 元素
// demo2function unique(array) { return Array.from(new Set(array));
}console.log(unique([NaN, NaN])) // [NaN]Set 认为尽管 NaN === NaN 为 false，但是这两个元素是重复的。
写在最后
虽然去重的结果有所不同，但更重要的是让我们知道在合适的场景要选择合适的方法。
以上内容就是各种不同的JavaScript数组去重方法，如果大家觉得有用的话赶紧收藏起来吧。
相关推荐：
Das obige ist der detaillierte Inhalt vonDeduplizierungsmethode für JavaScript-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
