12 Möglichkeiten, Duplikate aus JavaScript-Arrays zu entfernen (Zusammenfassung)

Array-Deduplizierung tritt normalerweise bei Vorstellungsgesprächen auf und erfordert in der Regel das handschriftliche Schreiben des Codes der Array-Deduplizierungsmethode. Wenn Sie gefragt werden: Welche Methoden gibt es zum Deduplizieren von Arrays? Wenn Sie zehn davon beantworten können, wird der Interviewer wahrscheinlich von Ihnen beeindruckt sein.

Array-Deduplizierung, die in realen Projekten auftritt, wird normalerweise im Hintergrund verarbeitet, und das Front-End wird selten zur Verarbeitung der Array-Deduplizierung verwendet. Obwohl die Wahrscheinlichkeit, dass es in alltäglichen Projekten verwendet wird, relativ gering ist, müssen Sie es dennoch wissen, falls Sie im Vorstellungsgespräch danach gefragt werden.

Hinweis: Ich habe es in Eile geschrieben und war in letzter Zeit etwas beschäftigt, daher habe ich es nicht sehr sorgfältig geprüft, aber es gibt kein Problem mit der Idee. Möglicherweise gibt es einige kleine Details das ist falsch.

Methode der Array-Deduplizierung

1. Verwenden Sie die ES6-Einstellung zum Deduplizieren (am häufigsten in ES6 verwendet)

function unique (arr) {
 return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

Unabhängig von der Kompatibilität hat diese Deduplizierungsmethode den geringsten Code. Diese Methode kann keine leeren „{}“-Objekte entfernen, und spätere Methoden höherer Ordnung fügen Methoden hinzu, um wiederholte „{}“ zu entfernen.

2. Zum Verschachteln verwenden und dann zum Entfernen von Duplikaten verbinden (am häufigsten in ES5 verwendet)

function unique(arr){ 
 for(var i=0; i<arr.length; i++){
 for(var j=i+1; j<arr.length; j++){
 if(arr[i]==arr[j]){ //第一个等同于第二个，splice方法删除第二个
  arr.splice(j,1);
  j--;
 }
 }
 }
return arr;
}
var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
 //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}] //NaN和{}没有去重，两个null直接消失了

Doppelschichtige Schleife, äußeres Schleifenelement, inneres Schleife Werte vergleichen. Bei Gleichheit der Werte wird dieser Wert gelöscht.
Wenn Sie schnell mehr über die am häufigsten verwendete ES6-Syntax erfahren möchten, können Sie meinen vorherigen Artikel „Lernen von ES6-Notizen – In der Arbeit häufig verwendete ES6-Syntax“ lesen.

3. Verwenden Sie indexOf, um Duplikate zu entfernen

function unique(arr) {
 if (!Array.isArray(arr)) {
 console.log('type error!')
 return
 }
 var array = [];
 for (var i = 0; i < arr.length; i++) {
 if (array .indexOf(arr[i]) === -1) {
 array .push(arr[i])
 }
 }
 return array;
}
var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
console.log(unique(arr))
 // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}] //NaN、{}没有去重

Erstellen Sie ein neues leeres Ergebnisarray, for-Schleifen Sie das ursprüngliche Array und bestimmen Sie, ob das aktuelle Element im Ergebnisarray vorhanden ist Wenn es dieselben Werte gibt, werden sie übersprungen und in das Array verschoben.

4. Verwenden Sie sort()

function unique(arr) {
 if (!Array.isArray(arr)) {
 console.log('type error!')
 return;
 }
 arr = arr.sort()
 var arrry= [arr[0]];
 for (var i = 1; i < arr.length; i++) {
 if (arr[i] !== arr[i-1]) {
 arrry.push(arr[i]);
 }
 }
 return arrry;
}
 var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined] //NaN、{}没有去重

Verwenden Sie die Sortiermethode sort() und durchlaufen und vergleichen Sie dann benachbarte Elemente basierend auf den sortierten Ergebnissen.

5. Verwenden Sie die Eigenschaften von Objekten, die nicht identisch sein können, um sie zu deduplizieren (Diese Methode zum Deduplizieren von Arrays ist problematisch, wird nicht empfohlen und muss verbessert werden)

function unique(arr) {
 if (!Array.isArray(arr)) {
 console.log('type error!')
 return
 }
 var arrry= [];
 var obj = {};
 for (var i = 0; i < arr.length; i++) {
 if (!obj[arr[i]]) {
 arrry.push(arr[i])
 obj[arr[i]] = 1
 } else {
 obj[arr[i]]++
 }
 }
 return arrry;
}
 var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
//[1, "true", 15, false, undefined, null, NaN, 0, "a", {…}] //两个true直接去掉了，NaN和{}去重

6. Verwendung umfasst

function unique(arr) {
 if (!Array.isArray(arr)) {
 console.log('type error!')
 return
 }
 var array =[];
 for(var i = 0; i < arr.length; i++) {
 if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
  array.push(arr[i]);
 }
 }
 return array
}
var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}] //{}没有去重

7. Verwenden Sie hasOwnProperty

function unique(arr) {
 var obj = {};
 return arr.filter(function(item, index, arr){
 return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
 })
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
 console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}] //所有的都去重了

Verwenden Sie hasOwnProperty, um festzustellen, ob Objekteigenschaften vorhanden sind

8. Filter verwenden

function unique(arr) {
 return arr.filter(function(item, index, arr) {
 //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
 return arr.indexOf(item, 0) === index;
 });
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
 console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

9. Rekursion verwenden, um Duplikate zu entfernen

function unique(arr) {
 var array= arr;
 var len = array.length;

 array.sort(function(a,b){ //排序后更加方便去重
 return a - b;
 })

 function loop(index){
 if(index >= 1){
 if(array[index] === array[index-1]){
 array.splice(index,1);
 }
 loop(index - 1); //递归loop，然后数组去重
 }
 }
 loop(len-1);
 return array;
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

10. Kartendatenstruktur verwenden, um Duplikate zu entfernen

function arrayNonRepeatfy(arr) {
 let map = new Map();
 let array = new Array(); // 数组用于返回结果
 for (let i = 0; i < arr.length; i++) {
 if(map .has(arr[i])) { // 如果有该key值
 map .set(arr[i], true); 
 } else { 
 map .set(arr[i], false); // 如果没有该key值
 array .push(arr[i]);
 }
 } 
 return array ;
}
 var arr = [1,1,&#39;true&#39;,&#39;true&#39;,true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,&#39;NaN&#39;, 0, 0, &#39;a&#39;, &#39;a&#39;,{},{}];
 console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

Erstellen Sie eine leere Map-Datenstruktur, durchlaufen Sie das Array, das dedupliziert werden muss, und speichern Sie jedes Element des Arrays als Schlüssel in der Map. Da in der Karte nicht derselbe Schlüsselwert angezeigt wird, ist das Endergebnis das Ergebnis nach der Deduplizierung.

11. Verwendung von Reduce+includes

function unique(arr){
 return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

12 🎜>[...new Set(arr)]

//Der Code ist so klein----(Eigentlich handelt es sich streng genommen nicht um einen Typ im Vergleich zum ersten Typ In Was die Methode betrifft, vereinfacht es nur den Code)

function distinct(a, b) {
 return Array.from(new Set([...a, ...b]))
}

PS: In einigen Artikeln wurde die Array-Deduplizierungsmethode foreach+indexOf erwähnt. Ich persönlich denke, dass sie alle ähnlich sind, deshalb habe ich sie nicht aufgeschrieben.

Welcher zu verwendende Code empfohlen wird, lesen Sie in diesem Artikel: JavaScript-Hochleistungsarray-Deduplizierung.

Empfohlenes Tutorial: „

JS-Tutorial

“

Das obige ist der detaillierte Inhalt von12 Möglichkeiten, Duplikate aus JavaScript-Arrays zu entfernen (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!