Details zur JS-Array-Deduplizierung

1 Testfälle

// Testfall const a = {};
Konstante b = { c: 1 };
Konstantes Array = [
  1, 1, "1", "1",
  {}, {}, { c: 1 }, { c: 1},
  ein, ein, b, b, 
  [], [], [1], [1],
  undefiniert, undefiniert,
  null, null,
  NaN, NaN,
];

2 JS-Array-Deduplizierung 4 Typen

2.1 Elementvergleich

Dieser Typ entfernt Duplikate durch Vergleichen von Array-Elementen.

2.1.1 Zweischichtiger For-Schleifenvergleich (häufig in es5 verwendet)

Verwenden Sie eine doppelte for-Schleife, um Array-Elemente einzeln zu vergleichen, und verwenden Sie splice Methode, um doppelte Elemente zu entfernen

// Doppelte for-Schleife Funktion uniq1(arr) {
    für (sei i = 0; i < arr.length; i++) {
        für (sei j = i + 1; j < arr.length; j++) {
            wenn (arr[i] === arr[j]) {
                arr.splice(j, 1)
                J--
            }
        }
    }
    Rückflug an
}

// Deduplizierungsergebnis// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

Durch den Vergleich der Ergebnisse vor und nach der Deduplizierung werden die doppelten NaN nicht entfernt, da NaN === NaN false

2.1.2 Sortierung benachbarter Vergleiche

Verwenden Sie die Methode sort() , um die Array-Elemente zu sortieren, vergleichen Sie dann benachbarte Elemente und verwenden Sie splice um doppelte Elemente zu entfernen.

Funktion uni2(arr) {
    arr.sort();
    für (sei i = 0; i < arr.length - 1; i++) {
        arr[i] === arr[i + 1] && arr.splice(i + 1, 1) && i--;
    }
    Rückflug an;
}

Sie können auch ein neues Array erstellen und nicht wiederholte Elemente in das neue Array einfügen.

Funktion uniq3(arr) {
    arr = arr.sort()
    const newArr = [arr[0]]
    für (sei i = 1; i < arr.length; i++) {
        wenn (arr[i] !== arr[i - 1]) {
            newArr.push(arr[i])
        }
    }
    returniere newArr
}

// Deduplizierungsergebnis// [[],[],1,'1',[1],[1],NaN,NaN,{},{},{c:1},{c:1},{},{c:1},null,undefined]

Doppelte NaN werden nicht entfernt, da NaN === NaN為false
sort Die Standardsortierreihenfolge NaN === NaN為false
sort besteht darin, Elemente in Zeichenfolgen umzuwandeln. In Zeichenfolgen umgewandelte Objekte sind alle [object Object] , sodass sort Sortiermethode Objekte in einem Array nicht sortieren kann und möglicherweise doppelte Objekte nicht entfernen kann, es sei denn, die doppelten Objekte sind benachbart.

2.2 Elementpositionstyp suchen

Dieser Typ entfernt Duplikate, indem er das erste Vorkommen eines Elements findet.

2.2.1 Index von

Verwenden Sie indexOf , um herauszufinden, ob die Position, an der das aktuelle Element zuerst erscheint, die aktuelle Position ist. Wenn ja, fügen Sie es in das neue Array ein.

Funktion uniq4(arr) {
    lass res = []
    für (sei i = 0; i < arr.length; i++) {
        wenn (arr.indexOf(arr[i]) === i) {
            res.push(arr[i])
        }
    }
    Rückgabewert
}

// Deduplizierungsergebnis// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

Und weil NaN === NaN false ist, ergibt die Suche nach NaN mit indexOf immer -1, sodass das neue Array kein NaN enthält.

2.2.2 Index finden

Verwenden Sie findIndex um herauszufinden, ob die Position, an der das aktuelle Element zuerst erscheint, die aktuelle Position ist. Wenn ja, fügen Sie es in das neue Array ein.

Funktion uniq5(arr) {
    lass res = []
    für (sei i = 0; i < arr.length; i++) {
        wenn (arr.findIndex(item => item === arr[i]) === i) {
            res.push(arr[i])
        }
    }
    Rückgabewert
}
// Deduplizierungsergebnis// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null]

Und weil NaN === NaN false ist, ist das Ergebnis der Suche nach NaN mit findIndex immer -1, sodass das neue Array kein NaN enthält.

2.3 Element-Existenztyp

Dieser Typ entfernt Duplikate, indem er bestimmt, ob das aktuelle Element im neuen Array vorhanden ist.

2.3.1 umfasst

Mit der Methode includes wird ermittelt, ob ein Array einen angegebenen Wert enthält.

Funktion uniq6(arr) {
    lass res = []
    für (sei i = 0; i < arr.length; i++) {
        wenn (!res.includes(arr[i])) {
            res.push(arr[i])
        }
    }
    Rückgabewert
}
// Deduplizierungsergebnis// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

includes verwendet einen Nullwert-Gleichheitsalgorithmus, um zu ermitteln, ob ein gegebenes Element gefunden wurde, sodass es ermitteln kann, ob NaN im neuen Array vorhanden ist.

2.3.2 einige

Mit der Methode some wird getestet, ob mindestens ein Element im Array den Test der bereitgestellten Funktion besteht.

Funktion uniq7(arr) {
    lass res = []
    für (sei i = 0; i < arr.length; i++) {
        wenn (!res.some(item => item === arr[i])) {
            res.push(arr[i])
        }
    }
    Rückgabewert
}
// Deduplizierungsergebnis// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN,NaN]

Auch hier wird === weiterhin zum Vergleichen von Elementen verwendet, da NaN === NaN false ist und das neue Array daher mehrere NaN enthält.

2.4 Sich auf Datenstruktureigenschaften verlassen

Dieser Typ verwendet die nicht wiederholbaren Eigenschaften der von ES6 bereitgestellten Datenstrukturen Map und Set , um Duplikate zu deduplizieren

2.4.1 Karte

Die von ES6 bereitgestellte Map-Struktur kann verschiedene Wertetypen (einschließlich Objekte) als Schlüssel verwenden, und die Schlüssel sind eindeutig.

Funktion uniq8(arr) {
    const map = neue Map()
    für (sei i = 0; i < arr.length; i++) {
        !map.hat(arr[i]) && map.set(arr[i], true)
    }
    zurückgeben [...map.keys()]
}
// Deduplizierungsergebnis// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

map.has funktioniert auch für NaN

2.4.2 Set (ES6 am häufigsten verwendet)

Die Werte der Mitglieder der Set -Struktur sind eindeutig und es gibt keine doppelten Werte.

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

// Deduplizierungsergebnis// [1,'1',{},{},{c:1},{c:1},{},{c:1},[],[],[1],[1],undefined,null,NaN]

3 Ergänzung

Die oben genannten Methoden können mithilfe verschiedener Api geändert werden. Wenn beispielsweise splice Methode zum Entfernen von Array-Elementen verwendet wird, können wir filter verwenden, um das Array zu filtern und ein neues Array zu erhalten.

Beispielsweise wird in der includes -Methode das Array nicht mit for Schleife durchlaufen, sondern die reduce Methode.

Kurz gesagt: Es gibt viele Methoden, aber sie bleiben alle gleich.

Einige Deduplizierungsmethoden sind für NaN nicht gültig, da NaN === NaN false ist. Bei Bedarf können Sie Object.is(NaN, NaN) verwenden, um true zu ändern.

In praktischen Anwendungen ist die gebräuchlichste Methode die Verwendung von Set, oder Sie können zur Verarbeitung die Drittanbieterbibliothek lodash verwenden

Dies ist das Ende dieses Artikels über die Details der JS-Array-Deduplizierung. Weitere relevante Inhalte zur JS-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!