Heim Web-Frontend js-Tutorial Detaillierte Einführung in die Filterfunktion in JavaScript

Detaillierte Einführung in die Filterfunktion in JavaScript

Dec 06, 2017 am 11:29 AM
filter javascript js

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) &gt; -1;<br/>    });<br/>});<br/><br/>data = [<br/>    { name: &#39;Chuck Norris&#39;, power: Infinity },<br/>    { name: &#39;Bruce Lee&#39;, power: 9000 },<br/>    { name: &#39;Jackie Chan&#39;, power: 7000},<br/>    { name: &#39;Jet Li&#39;, power: 8000 }<br/>]<br/></p>
Nach dem Login kopieren

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: &#39;Chuck Norris&#39;, power: Infinity }, dann Object.keys(row) = [&#39;name&#39;, &#39;power&#39;] , key bedeutet name und power. Die erste ist name, row[&#39;name&#39;] = &#39;Chuck Norris&#39;. Diese Zeichenfolge enthält die Zeichenfolge &#39;ck&#39;, 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[&#39;name&#39;]. Wenn alle row[&#39;power&#39;] sind, geben Sie false nicht zurück und fahren Sie mit dem Durchlaufen fort. row

Der gesamte Code beinhaltet die

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 anzuzeigen

Teil des Codeausschnitts:

data = data.filter(function (row) {
    return Object.keys(row).some(function (key) {
        return String(row[key]).toLowerCase().
        indexOf(filterKey) &gt; -1;
    });
});

data = [
    { name: &#39;Chuck Norris&#39;, power: Infinity },
    { name: &#39;Bruce Lee&#39;, power: 9000 },
    { name: &#39;Jackie Chan&#39;, power: 7000},
    { name: &#39;Jet Li&#39;, power: 8000 }
]
Nach dem Login kopieren
Hinweis: Hier steht

für die eingegebene Zeichenfolge die Eingabe, Hier wird davon ausgegangen, dass die Eingabe filterKeyck

ist, wobei

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. falserowDer 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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße Artikel -Tags

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript Dec 17, 2023 pm 02:54 PM

So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung Apr 03, 2024 am 11:55 AM

Empfohlen: Ausgezeichnetes JS-Open-Source-Projekt zur Gesichtserkennung und -erkennung

Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS Dec 17, 2023 pm 06:55 PM

Wesentliche Tools für die Aktienanalyse: Lernen Sie die Schritte zum Zeichnen von Kerzendiagrammen mit PHP und JS

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen Dec 17, 2023 pm 05:30 PM

WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript Dec 17, 2023 am 09:39 AM

So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript

PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen Dec 18, 2023 pm 03:39 PM

PHP- und JS-Entwicklungstipps: Beherrschen Sie die Methode zum Zeichnen von Aktienkerzendiagrammen

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems Dec 17, 2023 pm 12:09 PM

Verwendung von JavaScript und WebSocket zur Implementierung eines Echtzeit-Online-Bestellsystems

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems Dec 17, 2023 pm 05:13 PM

JavaScript und WebSocket: Aufbau eines effizienten Echtzeit-Wettervorhersagesystems

See all articles