Einführung in JavaScript-Array-Deduplizierungs- und -Flatteningfunktionen

Einführung in JavaScript-Array-Deduplizierungs- und -Flatteningfunktionen

1. Array-Abflachung (auch als Reduzierung der Array-Dimensionalität bekannt)

flat() durchläuft das Array rekursiv bis zu einer angegebenen Tiefe, fügt alle Elemente mit den Elementen im durchlaufenen Teilarray zu einem neuen Array zusammen und gibt es zurück.

const test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]

// Wenn flat keine Parameter übergibt, wird standardmäßig eine Ebene abgeflachttest.flat()
// ["a", "b", "c", "d", ["e", ["f"]], "g"]

// flat übergibt einen Integer-Parameter, der die Anzahl der abgeflachten Schichten angibt test.flat(2)
// ["a", "b", "c", "d", "e", ["f"], "g"]

// Wenn das Schlüsselwort Infinity als Parameter verwendet wird, wird es unabhängig von der Anzahl der Verschachtelungsebenen in ein eindimensionales Array test.flat(Infinity) umgewandelt.
// ["a", "b", "c", "d", "e", "f", "g"]

// Wenn Sie eine Ganzzahl <= 0 übergeben, wird das ursprüngliche Array ohne Abflachung zurückgegeben test.flat(0)
test.flat(-1)
// ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]

// Wenn im ursprünglichen Array freie Stellen vorhanden sind, überspringt die Methode flat() diese.
["a", "b", "c", "d",,].flat()
// ["ein", "b", "c", "d"]

Methode 1: Verwenden der Reduce-Methode

Auf einmal platt machen

Funktion flattenDeep(arr) { 
    gibt Array.isArray(arr) zurück
      ? arr.reduce( (acc, cur) => [...acc, ...flattenDeep(cur)] , [])
      : [an]
}

// Test var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
flattenDeep(test)
// ["a", "b", "c", "d", "e", "f", "g"]

Implementieren Sie die Flat-Funktion:

Funktion flach(arr, Tiefe = 1) {
    Rücklauftiefe > 0
        ? arr.reduce((acc, cur) => {
        wenn(Array.isArray(cur)) {
            return [...acc, ...flat(aktuell, Tiefe-1)]
        }
        Rückgabewert [...acc, aktuell]
    } , [])
      :arr
}

// Test var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
// Wenn keine Parameter übergeben werden, ist die Standardabflachung eine Ebene flach (Test).
// ["a", "b", "c", "d", ["e", ["f"]], "g"]

// Übergeben Sie einen ganzzahligen Parameter, der die Anzahl der abgeflachten Ebenen angibt flat(test, 2)
// ["a", "b", "c", "d", "e", ["f"], "g"]

// Wenn das Schlüsselwort Infinity als Parameter verwendet wird, wird es unabhängig von der Anzahl der verschachtelten Ebenen in ein eindimensionales Array flat(test, Infinity) konvertiert.
// ["a", "b", "c", "d", "e", "f", "g"]

// Wenn Sie eine Ganzzahl <= 0 übergeben, wird das ursprüngliche Array ohne Abflachung zurückgegeben flat(test, 0)
flach(Test, -10)
// ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]];

// Wenn im ursprünglichen Array freie Stellen vorhanden sind, überspringt die Methode flat() diese.
var arr = ["a", "b", "c", "d",,]
flach (arr)
// ["ein", "b", "c", "d"]

Methode 2: Stapeln

Reduzieren Sie alle Dimensionen auf einmal

Funktion flattenDeep(arr) {
  const Ergebnis = [] 
  //Array-Elemente auf den Stack kopieren. Direkte Zuweisung ändert das ursprüngliche Array const stack = [...arr]
  // Wenn der Stapel nicht leer ist, durchlaufe while (stack.length !== 0) {
    const val = stack.pop() 
    wenn (Array.isArray(val)) {
      // Wenn das Array wieder auf den Stack geschoben und um eine Ebene erweitert wird stack.push(...val) 
    } anders {
      // Wenn es kein Array ist, fügen Sie es mit der Kopfeinfügung result.unshift(val) in das Ergebnisarray ein.
    }
  }
  Ergebnis zurückgeben
}

// Test var test = ["a", ["b", "c"], ["d", ["e", ["f"]], "g"]]
flattenDeep(Tiere)
// ["a", "b", "c", "d", "e", "f", "g"]

2. Array-Deduplizierung

Methode 1: Set (ES6)

Funktion einzigartig(arr) {
    gibt Array.from(neues Set(arr)) zurück
}
// oder var unique = arr => [...new Set(arr)]

// Testvar arr = [1, 2, 2, 3]
einzigartig(arr); // [1, 2, 3]

Methode 2: Reduzieren

Funktion einzigartig(arr) {
    return arr.sort().reduce((acc, cur) => {
     wenn (acc.length === 0 || acc[acc.length - 1] !== cur) {
         acc.push(aktuell);
     }
     Rückgabe-Ac
 }, [])}
;

// Testvar arr = [1, 2, 2, 3]
einzigartig(arr); // [1, 2, 3]


Methode 3: Filter

Funktion einzigartig(arr) { 
    return arr.filter( (Element, Index, Array) => {
     return array.indexOf(element) === index
 })
}

// Testvar arr = [1, 2, 2, 3]
einzigartig(arr); // [1, 2, 3]

Dies ist das Ende dieses Artikels über JavaScript-Array-Deduplizierungs- und Abflachungsfunktionen. Weitere relevante Inhalte zu JS-Array-Deduplizierungs- und Abflachungsfunktionen 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!

Das könnte Sie auch interessieren:
  • Fünf gängige Möglichkeiten zum Entfernen doppelter Arrays in JavaScript
  • Details zur JS-Array-Deduplizierung
  • Detaillierte Diskussion mehrerer Methoden zur Deduplizierung von JavaScript-Arrays
  • JavaScript-Array-Deduplizierungslösung
  • Detaillierte Erklärung der JavaScript-Array-Deduplizierung
  • Sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS

<<:  Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

>>:  CSS HACK für IE6/IE7/IE8/IE9/FF (Zusammenfassung)

Artikel empfehlen

Docker verwendet ein einzelnes Image zum Zuordnen zu mehreren Ports

brauchen: Der Ressourcenserver der offiziellen We...

CSS-Einstellung Div-Hintergrundbild-Implementierungscode

Das Hinzufügen einer Hintergrundbildsteuerung zu ...

Haben Sie die MySQL-Verbindungsabfrage wirklich gelernt?

1. Übersicht über Inner Join-Abfragen Der Inner J...

Verwenden von Schleifen in awk

Lernen wir verschiedene Arten von Schleifen kenne...

CSS3-Radarscan-Kartenbeispielcode

Verwenden Sie CSS3, um coole Radar-Scan-Bilder zu...

Drei Prinzipien effizienten Navigationsdesigns, die Webdesigner kennen müssen

Das Entwerfen der Navigation für eine Website ist...

So ändern Sie das Root-Passwort von MySQL in Docker

Der erste Schritt besteht darin, einen MySQL-Cont...

Erfahren Sie mehr über JavaScript-Iteratoren

Inhaltsverzeichnis Einführung Wie sieht ein Itera...

So verwenden Sie CSS-Stile und -Selektoren

Drei Möglichkeiten, CSS in HTML zu verwenden: 1. ...

So erstellen Sie ein Tomcat-Image basierend auf Dockerfile

Dockerfile ist eine Datei, die zum Erstellen eine...