Sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS

Beispiel: Entfernen Sie doppelte Elemente aus dem folgenden Array (am Beispiel mehrerer Datentypen)

const arr = [1, 2, 2, 'abc', 'abc', true, true, false, false, undefiniert, undefiniert, NaN, NaN]

1. Verwenden von Set()+Array.from()

• Set-Objekt: ist eine Sammlung von Werten, deren Elemente Sie in der Reihenfolge durchlaufen können, in der sie eingefügt wurden. Die Elemente in einem Set kommen nur einmal vor, das heißt, die Elemente in einem Set sind eindeutig.
• Array.from()-Methode: Erstellen Sie eine neue, oberflächliche Kopie eines arrayähnlichen oder iterierbaren Objekts.

const Ergebnis = Array.from(neues Set(arr))
console.log(Ergebnis) // [ 1, 2, 'abc', wahr, falsch, undefiniert, NaN ]

Hinweis: Die obige Methode ist auch für die Deduplizierung von NaN- und undefinierten Typen effektiv, da sowohl NaN als auch undefiniert in Set gespeichert werden können und NaN als derselbe Wert betrachtet wird (obwohl in js: NaN !== NaN).

2. Verwenden der Zweischicht-Loop- + Array-Splice-Methode

Die Array-Elemente werden in zwei Schleifen einzeln verglichen. Anschließend werden die doppelten Elemente splice Methode gelöscht. Diese Methode kann NaN nicht deduplizieren, da beim Vergleichen NaN !== NaN ist.

Funktion entferneDuplikat(arr) {

   lass len = arr.length

   für (sei i = 0; i < len; i++) {

      für (sei j = i + 1; j < len; j++) {
        wenn (arr[i] === arr[j]) {
        arr.splice(j, 1)
        len-- // Reduzieren Sie die Anzahl der Schleifen, um die Leistung zu verbessern j-- // Stellen Sie sicher, dass der Wert von j nach der Addition unverändert bleibt}
    }
  }
   Rückflug an
}

 const Ergebnis = removeDuplicate(arr)

 console.log(Ergebnis) // [ 1, 2, 'abc', wahr, falsch, undefiniert, NaN, NaN ]

3. Verwenden der indexOf-Methode des Arrays

Erstellen Sie ein neues leeres Array, durchlaufen Sie das Array, das dedupliziert werden muss, und speichern Sie die Array-Elemente im neuen Array. Stellen Sie vor dem Speichern fest, ob das Array das aktuelle Element bereits enthält. Wenn nicht, speichern Sie es. Mit dieser Methode können auch keine Duplikate von NaN entfernt werden.

Methode indexOf(): Gibt den Index des ersten Vorkommens eines angegebenen Werts im String Objekt zurück, für das sie aufgerufen wird. Die Suche beginnt bei fromIndex . Wenn der Wert nicht gefunden wird, wird -1 zurückgegeben.

Funktion entferneDuplikat(arr) {

   const neuerArr = []

   arr.fürJeden(Element => {

     wenn (newArr.indexOf(item) === -1) {
     newArr.push(Artikel)
    }
 })
 return newArr // Gibt ein neues Array zurück }

const Ergebnis = removeDuplicate(arr)
console.log(Ergebnis) // [ 1, 2, 'abc', wahr, falsch, undefiniert, NaN, NaN ]

4. Verwenden Sie die Includes-Methode des Arrays

Die Logik dieser Methode ähnelt der indexOf “, mit dem Unterschied, dass sie mithilfe der Methode includes ermittelt, ob doppelte Elemente eingeschlossen sind.

Methode „includes()“: Wird verwendet, um zu bestimmen, ob ein Array einen angegebenen Wert enthält. Je nach Situation gibt sie „true“ zurück, wenn es einen Wert enthält, andernfalls „false“.

 Funktion entferneDuplikat(arr) {

    const neuerArr = []

    arr.fürJeden(Element => {

       wenn (!newArr.includes(item)) {
       newArr.push(Artikel)
      }
   })
  returniere newArr
 }

 const Ergebnis = removeDuplicate(arr)

 console.log(Ergebnis) // [ 1, 2, 'abc', wahr, falsch, undefiniert, NaN ]

Hinweis: Warum Includes erkennen können, dass das Array NaN enthält, hängt mit der zugrunde liegenden Implementierung von Includes zusammen. Die folgende Abbildung zeigt einen Teil des Codes für die Includes-Implementierung. Bei der Ermittlung, ob ein Element enthalten ist, wird zum Vergleich die Methode sameValueZero aufgerufen. Wenn es NaN ist, wird isNaN() zur Konvertierung verwendet.

Einfacher Test zur Beurteilung von NaN durch include():

const testArr = [1, 'a', NaN]
console.log(testArr.includes(NaN)) // wahr

5. Verwenden von filter()+indexOf() des Arrays

filter speichert die Elemente, die die Bedingungen erfüllen, in einem neuen Array und trifft Beurteilungen in Kombination mit indexOf Methode.

filter()-Methode: Erstellt ein neues Array, das alle Elemente enthält, die den von der bereitgestellten Funktion implementierten Test bestehen.

 Funktion entferneDuplikat(arr) {

    return arr.filter((Element, Index) => {

       Rückgabewert arr.indexOf(item) === index
  })
}

const Ergebnis = removeDuplicate(arr)

console.log(Ergebnis) // [ 1, 2, 'abc', wahr, falsch, undefiniert ]

Hinweis: Die Ausgabe hier enthält kein NaN, da indexOf() NaN nicht beurteilen kann, d. h. arr.indexOf(item) === index gibt false zurück. Der Test läuft wie folgt ab:

const testArr = [1, 'a', NaN]
console.log(testArr.indexOf(NaN)) // -1

6. Verwenden von Map()

Das Map-Objekt ist eine von JavaScript bereitgestellte Datenstruktur. Die Struktur hat die Form von Schlüssel-Wert-Paaren. Die Array-Elemente werden als Map-Schlüssel gespeichert, und das Front-End-Training kombiniert dann die Methoden has() und set(), um festzustellen, ob die Schlüssel wiederholt werden.

Map-Objekt: Wird verwendet, um Schlüssel-Wert-Paare zu speichern und die ursprüngliche Einfügereihenfolge der Schlüssel zu merken. Jeder beliebige Wert (Objekt oder Primitiv) kann als Schlüssel oder Wert verwendet werden.

Funktion entferneDuplikat(arr) {

const map = neue Map()

const neuerArr = []

arr.fürJeden(Element => {

  if (!map.has(item)) { // Mit has() wird ermittelt, ob die Map den Attributwert des Elements enthält map.set(item, true) // Mit set() wird das Element der Map zugewiesen und sein Attributwert auf true gesetzt.
  
    newArr.push(Artikel)
  }
})

returniere newArr
}

const Ergebnis = removeDuplicate(arr)

console.log(Ergebnis) // [ 1, 2, 'abc', wahr, falsch, undefiniert, NaN ]

Hinweis: Sie können auch Map() verwenden, um NaN zu deduplizieren, da Map NaN als gleich NaN betrachtet und alle anderen Werte basierend auf dem Ergebnis des ===-Operators gleich sind.

7. Verwendungszweck

Die Implementierungsidee ähnelt der von Map() und nutzt hauptsächlich die Tatsache aus, dass die Attributnamen von Objekten nicht wiederholt werden können.

Funktion entferneDuplikat(arr) {

   const neuerArr = []

   const obj = {}

   arr.fürJeden(Element => {

       wenn (!obj[item]) {
       newArr.push(Artikel)
       obj[item] = true
      }
   })

   returniere newArr
 }

 const Ergebnis = removeDuplicate(arr)

 console.log(Ergebnis) // [ 1, 2, 'abc', wahr, falsch, undefiniert, NaN ]

Damit ist dieser Artikel über sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS abgeschlossen. Weitere Informationen zur JS-Array-Deduplizierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!