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

Beispielcode zur Implementierung von Follow Ads mit JavaScript

Floating Ads sind eine sehr verbreitete Form der ...

Detaillierte Erklärung der JavaScript-Fehlererfassung

Inhaltsverzeichnis 1. Grundlegende Verwendung und...

Konkretes Beispiel einer MySQL-Mehrtabellenabfrage

1. Verwenden Sie die SELECT-Klausel, um mehrere T...

Detaillierte Erklärung, wie NGINX PV, UV und unabhängige IP der Website zählt

Nginx: PV, UV, unabhängige IP Jeder, der Websites...

Block- und Zeilenelemente, Sonderzeichen und Verschachtelungsregeln in HTML

Wenn wir die Verschachtelungsregeln grundlegender...

Der DOCTYPE-Modusauswahlmechanismus bekannter Browser

Dokumentumfang Dieser Artikel behandelt den Modus...

Tutorial zur Verwendung des iostat-Befehls unter Linux

Vorwort Es wird gesagt, dass sich die für Betrieb...

Der Unterschied zwischen HTML-Block-Level-Tags und Inline-Tags

1. Blockebenenelement: bezieht sich auf die Fähigk...

Eine detaillierte Analyse und Verarbeitung von MySQL-Alarmen

Vor kurzem hat ein Dienst einen Alarm ausgelöst, ...

Ein MySQL-Migrationsplan und eine praktische Auflistung der Fallstricke

Inhaltsverzeichnis Hintergrund Lösung 1: Alte Dat...

Über gutes Design

<br />Auf zehntausend Personen, die die Frag...

Installations-Tutorial für die komprimierte Version von MySQL 5.7.18 Archiv

In diesem Artikel wird die spezifische Methode zu...

Häufige Anwendungsszenarien für React Hooks (Zusammenfassung)

Inhaltsverzeichnis 1. Staatshaken 1. Grundlegende...

Die 9 besten ausländischen Websites mit kostenlosem Bildmaterial

Es ist schwierig, Websites mit gutem Bildmaterial...