JS implementiert Array-Filterung von einfacher bis hin zu Multi-Condition-Filterung

Als ich in meiner vorherigen Firma arbeitete, bestand die Anforderung, die Filterfunktion am Front-End abzuschließen, alle Daten auf einmal abzurufen und dann entsprechend den Bedingungen zu filtern. Normalerweise erfolgt die Filterung über die Backend-Schnittstelle. Wenn die Datenmenge nicht groß ist, kann es sein, dass manche Leute auf Frontend-Filterung stoßen. Ich habe diesen Artikel geschrieben, um ihn mit Ihnen zu teilen. Wenn Sie Fragen haben, weisen Sie uns bitte darauf hin, damit wir voneinander lernen können.

Im Allgemeinen kann die Filtermethode des Arrays die Anforderungen für die Filterung unter einer einzigen Bedingung erfüllen. Dieser Artikel konzentriert sich auf die zusammengesetzte Filterung unter mehreren Bedingungen und listet mehrere damit verbundene Wissenspunkte auf.

Hier gibt es viele 🌰🌰🌰🌰

// Dies ist das gefilterte Array im Beispiel var aim = [
    {name:'Anne', Alter: 23, Geschlecht:'weiblich'},
    {name:'Leila', Alter: 16, Geschlecht:'weiblich'},
    {name:'Jay', Alter: 19, Geschlecht:'männlich'},
    {name:'Mark', Alter: 40, Geschlecht:'männlich'}
]

Einzelne Bedingung, einzelne Datenfilterung

Filtern Sie nach einem einzelnen Namen und verwenden Sie die Filtermethode, um zu bestimmen, ob es sich bei dem Namen um den Zielnamen handelt.

// Nach einzelnem Namen filtern function filterByName(aim, name) {
    Zielfilter zurückgeben(Element => Elementname == Name)
}
// Eingabeziel 'Leila' Erwartete Ausgabe: [{name:'Leila', Alter: 16, Geschlecht:'weiblich'}]
console.log(filterByName(Ziel,'leila'))

Filtern mehrerer Daten mit einer einzigen Bedingung

Um nach mehreren Namen zu filtern, verwenden wir eine for-Schleife, um das Zielarray zu durchlaufen, und verwenden dann die find-Methode, um es zu finden und in das Ergebnisarray einzufügen. Die find-Methode kann das gewünschte Ergebnis erzielen, auch wenn doppelte Namen vorhanden sind. Die For-Schleife kann durch einige Array-Traversal-Methoden ersetzt werden, der Code kann vereinfacht werden und das Beispiel dient nur dazu, die allgemeine Idee auszudrücken.

// Nach mehreren Namen filtern function filterByName1(aim, nameArr) {
    let ergebnis = []
    für(lass i = 0; i < nameArr.length; i++) {
        Ergebnis.push(Ziel.finden(Artikel => Artikel.name = NameArr[i]))
    }
    Ergebnis zurückgeben
}
// Ziel eingeben ['Anne','Jay'] 
//Erwartete Ausgabe ist [{name:'Anne', Alter: 23, Geschlecht:'weiblich'},{name:'Jay', Alter: 19, Geschlecht:'männlich'}]
console.log(filterByName1(Ziel,['Leila','Jay']))
// Nach BUG-Behebung

Mehrfache bedingte Datenfilterung

Um nach einem einzelnen Namen oder einem einzelnen Alter zu filtern, verwenden Sie die Filtermethode, um zu bestimmen, ob die Bedingungen in einer ODER-Beziehung stehen.

// Filtern nach Name oder Alter function filterByName2(aim, name, age) {
    returniere aim.filter(item => item.name == Name || item.age == Alter)
}
console.log(filterByName2(Ziel,'Leila',19))

Mehrere Bedingungen und mehrere Datenfilter

Ich habe zunächst versucht, eine umständliche doppelte For-Schleife zu verwenden, aber sie war langsam und erzielte nicht den gewünschten Effekt. Die konkrete gedankliche Reise liegt zu weit entfernt, daher werde ich kurz den folgenden Screening-Algorithmus vorstellen.
Der erste Schritt besteht darin, alle Filterbedingungen in ein Objekt einzufügen und die Schlüsselmethode des Objekts zu verwenden, um den Namen der Filterbedingung abzurufen und herauszufinden, welche Bedingung gefiltert werden muss. Ist das der Name? Alter? Geschlecht?
Verwenden Sie dann die Filtermethode, um die Zieldaten wie folgt zu filtern ⬇️
Filtern nach Name und Alter

//Mehrere Elemente basierend auf Name und Alter filtern Exportfunktion multiFilter(Array, Filter) {
  const filterKeys = Objekt.keys(filters)
  // filtert alle Elemente, die die Kriterien erfüllen
  returniere Array.Filter((Element) => {
    // alle Filterkriterien dynamisch validieren
    returniere filterKeys.every(key => {
        //Ignorieren wenn der Filter leer ist Anne
      wenn (!filters[Schlüssel].Länge) return true
      return !!~filter[Schlüssel].indexOf(Element[Schlüssel])
    })
  })
}
/*
 * Dieser Code stammt nicht von mir. Wenn Sie interessiert sind, können Sie zum ursprünglichen Autor gehen und einen Daumen hoch geben. * Der Autor ist: @author https://gist.github.com/jherax
 * Ich habe in diesem Code nur eine Zeile hinzugefügt, um das Problem zu lösen, dass der Gesamtfilter fehlschlägt, wenn einige Filterbedingungen gelöscht werden*/

var Filter = {
    Name:['Leila', 'Jay'],
    Alter:[]
}
/* Ergebnis:
 * [{Name: "Leila", Alter: 16, Geschlecht: "weiblich"},
 * {Name: "Jay", Alter: 19, Geschlecht: "männlich"}]
 */

Hier ermitteln wir beispielsweise, ob der Name-Wert jedes Datensatzes im Filters.name-Array enthalten ist. Wenn dies der Fall ist, wird „true“ zurückgegeben. Wenn „filters.age“ ein leeres Array ist, wird „true“ direkt zurückgegeben. Das leere Array simuliert die Situation, in der die Altersbedingung aufgehoben ist und wir trotzdem die korrekt gefilterten Daten erhalten können.

Wissenspunkt 1: Object.key() ruft den Array-Index oder das Objektattribut ab

var arr = ['a', 'b', 'c'];
Konsole.log(Objekt.Schlüssel(arr)); 
// ["0", "1", "2"]


var obj = { 0: 'a', 1: 'b', 2: 'c' };
Konsole.log(Objekt.Schlüssel(Objekt)); 
// ["0", "1", "2"]


var anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Objekt.keys(einObjekt)); 
// ["2", "7", "100"] Raten Sie mal, warum?

Wissenspunkt 2: Falsy in js

falsy: 0, false, "", null, undefiniert, NaN

In der Urteilsbegründung werden nur die oben genannten 6 Fälle falsch sein, der Rest ist wahr

var a;
wenn(a!=null&&typeof(a)!=undefined&&a!=''){
    //Code der nur ausgeführt wird, wenn a Inhalt hat}

wenn(!!a){
    //aCode, der nur ausgeführt wird, wenn Inhalt vorhanden ist...  
}

Wissenspunkt 3: Der Unterschied zwischen Array.every und Array.some

Nach meinem Verständnis gilt beim Durchlaufen eines Arrays:

• Die Bedingung von Array.every ist eine „und“-Beziehung. Wenn alle Bedingungen erfüllt sind, wird „true“ zurückgegeben. Wenn eine Bedingung falsch ist, wird „false“ zurückgegeben.
• Die Bedingung von Array.some ist eine „oder“-Beziehung. Sie gibt true zurück, wenn eine der Bedingungen erfüllt ist, und false, wenn alle Bedingungen falsch sind.

Hier ist ein Beispiel 🌰

// Prüfen, ob jeder Name Anne ist?
let dataEvery = aim.every(item => item.name === 'Anne') // falsch
let dataEvery = aim.some(item => item.name === 'Anne') // wahr

// Prüfen, ob jeder Name ein String ist?
let dataEvery = aim.every(item => typeof item.name === 'string') // wahr
let dataEvery = aim.some(item => typeof item.name === 'string') // wahr

Wissenspunkt 4: Tiefe Kopie und flache Kopie des Arrays

Ich habe vor Kurzem an einigen Front-End-Interviews teilgenommen und „Deep Copy“ und „Shallow Copy“ gehören zu meinen Lieblingsfragen. Eine Frage untersucht Datentypen, Array-Operationen, rekursive Algorithmen usw.

Da Arrays in JS Referenztypen sind, werden ihre Referenzbeziehungen kopiert, wenn sie einfach kopiert werden. Beim Filtern der erfassten Daten möchte ich die Originaldaten nicht beeinträchtigen. Daher muss ich „Deep Copy“ verwenden, um Daten zu erhalten, die vollständig mit der ursprünglichen Datenstruktur identisch und voneinander unabhängig sind, anstatt nur ihre Referenzbeziehung zu kopieren.

// Normalerweise verwende ich diese Methode. Bei großen Projekten ist dies nicht zu empfehlen. let obj1 = JSON.parse(JSON.stringify(obj))

//tiefer Klon
Funktion deepClone(o1, o2) {
    für (sei k in o2) {
        wenn (Typ von o2[k] === 'Objekt') {
            o1[k] = {};
            o1[k], o2[k]);
        } anders {
            o1[k] = o2[k];
        }
    }
}

Denken Sie darüber nach: Optimierung rekursiver Algorithmen

Dieser Wissenspunkt hat wenig mit diesem Artikel zu tun. 😄 Entschuldigen Sie die vorherige Irreführung.

Ich habe das gesehen, als ich den Front-End-Interviewleitfaden in der Nuggets-Broschüre gelesen habe. Als sie über Algorithmen sprachen, erwähnten sie die Optimierung rekursiver Algorithmen. Ich war erstaunt, als ich es zum ersten Mal sah, aber ich habe es noch nicht im Projekt verwendet. Wenn Sie interessiert sind, können Sie es versuchen. Dies ist die Summe der Fibonacci-Folge. Sie können es in Ihren Browser eingeben, um den Unterschied zwischen der Anzahl der Vorgänge ohne und mit Caching zu sehen.

lass count = 0;
Funktion fn(n) {
    lass cache = {};
    Funktion _fn(n) {
        wenn (Cache[n]) {
            Cache zurückgeben[n];
        }
        zählen++;
        wenn (n == 1 || n == 2) {
            Rückgabe 1;
        }
        sei prev = _fn(n - 1);
        Cache[n - 1] = vorh.;
        sei nächstes = _fn(n - 2);
        Cache[n - 2] = nächster;
        Zurück zu vorheriger + nächster;
    }
    gibt _fn(n) zurück;
}

lass count2 = 0;
Funktion fn2(n) {
    Anzahl2++;
    wenn (n == 1 || n == 2) {
        Rückgabe 1;
    }
    gibt fn2(n - 1) + fn2(n - 2) zurück;
}

Damit ist dieser Artikel über die Implementierung der Array-Filterung mit JS von der einfachen bis zur Multi-Condition-Filterung abgeschlossen. Weitere relevante Inhalte zur JS-Array-Filterung 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!