Ich glaube, dass alle Freunde, die Vue in JavaScript studiert haben, die Filterfunktion kennen, aber es gibt viele Freunde, die nicht wissen, was ein Filter ist Heute geben wir Ihnen eine ausführliche Einführung in die Filterfunktion in JavaScript!
Als ich die Rasterkomponente im Beispiel sah, war ich durch einen verschachtelten Code verwirrt. Nachdem ich um Hilfe gebeten habe, notiere ich ihn hiermit für spätere Anfragen:
Klicken Sie hier, um den gesamten Code anzuzeigen
Teil des Codeausschnitts:
<p style="margin-top: 5px; margin-bottom: 14px; line-height: normal;">data = data.filter(function (row) {<br/> return <a href="http://www.php.cn/wiki/60.html" target="_blank">Object</a>.keys(row).some(function (key) {<br/> return String(row[key]).toLowerCase().<br/> indexOf(filterKey) > -1;<br/> });<br/>});<br/><br/>data = [<br/> { name: 'Chuck Norris', power: Infinity },<br/> { name: 'Bruce Lee', power: 9000 },<br/> { name: 'Jackie Chan', power: 7000},<br/> { name: 'Jet Li', power: 8000 }<br/>]<br/></p>
Hinweis: Hier stellt filterKey
die in der Eingabe eingegebene Zeichenfolge dar , hier gehen wir davon aus, dass ck
wobei row
data[i]
darstellt, nehmen Sie die erste Zeile als Beispiel für die Ausführung des Codes, row
ist { name: 'Chuck Norris', power: Infinity }
, dann Object.keys(row) = ['name', 'power']
, key
bedeutet name
und power
. Die erste ist name
, row['name'] = 'Chuck Norris'
. Diese Zeichenfolge enthält die Zeichenfolge 'ck'
, sodass true
nicht ausgeführt werden muss. Dann kehrt power
oder row
zum neuen Array zurück und durchläuft weiterhin die Daten unten. Wenn data[0]
diese Zeichenfolge nicht enthält, durchlaufen Sie row['name']
. Wenn alle row['power']
sind, geben Sie false
nicht zurück und fahren Sie mit dem Durchlaufen fort. row
Datenbindung von Vue, aber ich werde ihn nicht aufzeichnen, da ich mich immer noch in einem Zustand der Unwissenheit befinde.
Ich bin ein Front-End-Neuling. Wenn Sie in diesem Artikel Fehler finden oder ihn nicht gut verstehen, können Sie mir gerne einen Rat geben. Ich lerne kürzlich die Rasterkomponente im Beispiel und war verwirrt über einen verschachtelten Code, den ich erst verstehen werde, nachdem ich um Hilfe gebeten habe für spätere Anfragen. :Klicken Sie hier, um den gesamten Code anzuzeigenTeil des Codeausschnitts:data = data.filter(function (row) { return Object.keys(row).some(function (key) { return String(row[key]).toLowerCase(). indexOf(filterKey) > -1; }); }); data = [ { name: 'Chuck Norris', power: Infinity }, { name: 'Bruce Lee', power: 9000 }, { name: 'Jackie Chan', power: 7000}, { name: 'Jet Li', power: 8000 } ]
für die eingegebene Zeichenfolge die Eingabe, Hier wird davon ausgegangen, dass die Eingabe filterKey
ck
row
darstellt. Nehmen Sie die erste Zeile als Beispiel für die Ausführung des Codes, data[i]
ist row
, dann { name: 'Chuck Norris', power: Infinity }
, Object.keys(row) = ['name', 'power']
steht für key
und name
. Die erste ist power
, name
. Diese Zeichenfolge enthält die Zeichenfolge row['name'] = 'Chuck Norris'
, sodass 'ck'
nicht ausgeführt werden muss. Dann kehrt true
oder power
zum neuen Array zurück und durchläuft weiterhin die Daten unten. Wenn row
diese Zeichenfolge nicht enthält, durchlaufen Sie data[0]
. Wenn alle row['name']
sind, geben Sie row['power']
nicht zurück und fahren Sie mit dem Durchlaufen fort. false
row
Der gesamte Code beinhaltet die Vue-Datenbindung, aber ich werde ihn nicht aufzeichnen, da ich mich immer noch in einem Zustand der Unwissenheit befinde.
Zusammenfassung:
Dieser Artikel stellt die Filterfunktion in JavaScript ausführlich anhand von Beispielcode vor. Ich glaube, dass Freunde es auch wissen werden Erfahren Sie mehr und hoffen Sie, dass es für Ihre Arbeit hilfreich sein wird!
Verwandte Empfehlungen:
Einfache Ajax-Anwendung und Filterschreibmethode
Detaillierte Einführung in das Filterattribut von CSS3
Die URL-Muster-Einstellungsmethode und die Zuordnungsregeln von Servlet und Filter
Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in die Filterfunktion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!