Detaillierte Erklärung zur JavaScript-Datenabflachung

Was ist Abflachung?

Beim Reduzieren eines Arrays wird ein verschachteltes Array (die Verschachtelung kann aus einer beliebigen Anzahl von Ebenen bestehen) in ein Array mit nur einer Ebene umgewandelt.

Angenommen, es gibt eine Funktion namens flatten, die ein Array abflachen kann. Der Effekt ist wie folgt:

var arr = [1, [2, [3, 4]]];
konsole.log(flatten(arr)) // [1, 2, 3, 4]
Array-Loop + Rekursion

Implementierungsidee: Durchlaufen Sie das Array, rufen Sie, wenn die Daten Arrays enthalten, rekursiv die Abflachungsfunktion auf (verwenden Sie zum Abflachen die For-Schleife), verbinden Sie es mit Concat und geben Sie schließlich das Ergebnis zurück.

Funktion flatten(arr){
     var Ergebnis = [];
     für(var i = 0, len = arr.length; i < len; i++){
         wenn(Array.isArray(arr[i])){
             Ergebnis = Ergebnis.concat(flatten(arr[i]));
         }anders{
             Ergebnis.push(arr[i]);
         }
     }
     Ergebnis zurückgeben;
 }
 
abflachen(arr) // [1,2,3,4]

Rekursion

Als erstes fällt uns ein, die Array-Elemente in einer Schleife auszuführen. Wenn es sich immer noch um ein Array handelt, können wir die Methode rekursiv aufrufen:

   var arr = [1, [2, [3, 4]]];
     
    Funktion flatten(arr) {
        var Ergebnis = [];
        für (var i = 0, len = arr.length; i < len; i++) {
            wenn (Array.isArray(arr[i])) {
                Ergebnis = Ergebnis.concat(flatten(arr[i]))
            }
            anders {
                Ergebnis.push(arr[i])
            }
        }
        Ergebnis zurückgeben;
    }
 
 
Konsole.log(flatten(arr))

zum Stringen

Wenn die Elemente des Arrays alle Zahlen sind, können wir die Verwendung der Methode toString in Betracht ziehen, weil:

[1, [2, [3, 4]]].toString() // "1,2,3,4"


Der Aufruf der Methode toString gibt einen durch Kommas getrennten flachen String zurück. Jetzt können wir ihn aufteilen und in eine Zahl umwandeln, um eine Abflachung zu erreichen.

// Methode 2
var arr = [1, [2, [3, 4]]];
 
Funktion flatten(arr) {
    returniere arr.toString().split(',').map(Funktion(Element){
        +Artikel zurückgeben
    })
}
 
Konsole.log(flatten(arr))

reduzieren

Da wir ein Array verarbeiten und einen Wert zurückgeben, können wir zur Vereinfachung des Codes die Verwendung von „Reduce“ in Betracht ziehen:

// Methode 3
var arr = [1, [2, [3, 4]]];
 
Funktion flatten(arr) {
    returniere arr.reduce(Funktion(vorherige, nächste){
        Rückgabewert für prev.concat(Array.isArray(nächstes) ? flatten(nächstes) : nächstes)
    }, [])
}
 
Konsole.log(flatten(arr))

var arr = [1, [2, [3, 4]]];
console.log([].concat(…arr)); // [1, 2, [3, 4]]

Mit dieser Methode können wir zwar nur eine Ebene abflachen, aber wenn wir in dieser Richtung weiterdenken, können wir eine Methode wie diese schreiben:

var arr = [1, [2, [3, 4]]];
 
    Funktion flatten(arr) {
     
        während (arr.some(item => Array.isArray(item))) {
            arr = [].concat(...arr);
        }
     
        Rückflug an;
    }
     
    Konsole.log(flatten(arr))

Unterkern

Wie schreiben wir also eine abstrakte flache Funktion, um unsere Entwicklung zu erleichtern? Es ist Zeit für uns, den Unterstrich erneut zu kopieren ~

Der Quellcode und die Kommentare werden hier direkt angegeben. Beachten Sie jedoch, dass die Flatten-Funktion hier nicht das endgültige _.flatten ist. Um mehrere API-Aufrufe zu ermöglichen, werden weitere Konfigurationen zum Flattening vorgenommen.

	/**
	 * Array-Abflachung * @param {Array} input Das zu verarbeitende Array * @param {boolean} shallow Ob nur eine Ebene abgeflacht werden soll * @param {boolean} strict Ob Elemente streng verarbeitet werden sollen, siehe unten * @param {Array} output Dies ist ein Parameter, der zur Vereinfachung der Rekursion übergeben wird */

	Funktion flatten(Eingabe, flach, streng, Ausgabe) {

    // Die Ausgabe wird bei rekursiver Verwendung verwendet
    Ausgabe = Ausgabe || [];
    var idx = Ausgabelänge;

    für (var i = 0, len = Eingabelänge; i < len; i++) {

        var Wert = Eingabe[i];
        // Wenn es ein Array ist, verarbeite es, if (Array.isArray(value)) {
            // Wenn nur eine Ebene abgeflacht ist, durchlaufen Sie das Array und füllen Sie die Ausgabe entsprechend aus
            wenn (flach) {
                var j = 0, len = Wert.Länge;
                während (j < Länge) Ausgabe[idx++] = Wert[j++];
            }
            // Wenn alles abgeflacht ist, rekursiv vorgehen und die verarbeitete Ausgabe übergeben, dann die Ausgabe rekursiv verarbeiten
            anders {
                flatten(Wert, flach, streng, Ausgabe);
                idx = Ausgabelänge;
            }
        }
        // Kein Array. Entscheiden Sie, ob die Verarbeitung übersprungen oder in die Ausgabe eingefügt werden soll, basierend auf dem Wert von „strict“.
        sonst wenn (!strict){
            Ausgabe[idx++] = Wert;
        }
    }

    Ausgabe zurückgeben;

}

Erklären Sie „strict“. Wir können im Code sehen, dass beim Durchlaufen von Array-Elementen, wenn das Element kein Array ist, das Ergebnis der strikten Negation beurteilt wird. Wenn „strict“ auf „true“ gesetzt ist, wird es ohne Verarbeitung übersprungen, was bedeutet, dass Nicht-Array-Elemente gefiltert werden können. Beispiel:

var arr = [1, 2, [3, 4]];
konsole.log(flatten(arr, true, true)); // [3, 4]

Welchen Nutzen hat also die Einstellung „streng“? Keine Sorge, schauen wir uns zunächst die Ergebnisse an, die den verschiedenen Werten von flach und strct entsprechen:

shallow true + strict false : normale flache Ebene

shallow false + strict false : alle Ebenen normal abflachen

shallow true + strict true : Nicht-Array-Elemente entfernen

shallow false + strict true ： gibt ein [] zurück

Sehen wir uns an, welche Methoden in Underscore die Basisfunktion flatten aufrufen:

_.flatten

Das erste ist _.flatten:

_.flatten = Funktion(Array, flach) {
    gibt flatten (Array, flach, falsch) zurück;
};

_.Union

Diese Funktion nimmt mehrere Arrays und gibt die Vereinigungsmenge der übergebenen Arrays zurück.

Zum Beispiel:

_.union([1, 2, 3], [101, 2, 1, 10], [2, 1]);
=> [1, 2, 3, 101, 10]

Wenn der übergebene Parameter kein Array ist, wird er übersprungen:

_.union([1, 2, 3], [101, 2, 1, 10], 4, 5);
=> [1, 2, 3, 101, 10]

Um diesen Effekt zu erzielen, können wir alle übergebenen Arrays abflachen und dann Duplikate entfernen. Da nur Arrays übergeben werden können, können wir strict direkt auf true setzen, um die übergebenen Nicht-Array-Elemente zu überspringen.

Funktion einzigartig(Array) {
   gibt Array.from(neues Set(Array)) zurück;
}
 
_.union = Funktion() {
    returniere eindeutig (flatten(Argumente, wahr, wahr));
}

_.Unterschied

Glauben Sie, dass es sinnvoll ist, mit strict herumzuspielen? Schauen wir uns _.difference an:

Die Syntax lautet:

_.Unterschied(Array, *andere)

Der Effekt besteht darin, die Elemente aus dem Array zu entfernen, die in mehreren anderen Arrays nicht vorhanden sind. Wie bei _.union werden Elemente ausgeschlossen, die keine Arrays sind.

Zum Beispiel:

_.Differenz([1, 2, 3, 4, 5], [5, 2, 10], [4], 3);
=> [1, 3]

Die Implementierung ist auch sehr einfach: Reduzieren Sie das Array anderer und filtern Sie die Werte im Array heraus, die nicht im abgeflachten Array enthalten sind:

Funktion Differenz(Array, ...Rest) {
 
    Rest = abflachen(Rest, wahr, wahr);
 
    returniere Array.Filter(Funktion(Element){
        gibt rest.indexOf(item) === -1 zurück;
    })
}

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!