JavaScriptのフィルター関数の詳細な紹介

JavaScriptを勉強したことのあるVueの友達は皆フィルター機能を知っていると思いますが、知っていてもフィルターの方法を知らない人も多いので、今日はフィルター機能を紹介します。 JavaScriptのフィルター機能を詳しく紹介！

例のグリッド コンポーネントを見たとき、ネストされたコードの一部に混乱しました。多くの情報源 (細分化された質問) に助けを求めて初めて理解できました。後の問い合わせのためにここに記録します。すべてのコードを表示するには、ここをクリックしてください

コード スニペットの一部:

<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: &#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>

注: ここで、filterKey は 文字列

に入力された html"、ここでは ck と仮定します

ここで、row は data[i]</code を表します>、ルーチン実行コードの A 行では、<code>row は { name: 'Chuck Norris', power: Infinity } で、次に Object.keys(row) = ['name' , 'power']、key は name と power を表します。 1 つ目は name、row['name'] = 'Chuck Norris' です。この文字列には文字列 'ck' が含まれているため、< code>true の場合、power を実行する必要はありません。その後、row または data[0] が新しい配列に戻り、以下のデータの走査を続けます。 row['name'] にこの文字列が含まれていない場合、両方が false の場合は、row['power'] を調べる必要があります。 、いいえ 行 に戻り、移動を続けます。

filterKey表示的是在input中输入的字符串，这里假设输入ck

这里的row表示的是data[i]，以第一行为例执行代码，row为{ name: 'Chuck Norris', power: Infinity }，那么Object.keys(row) = ['name', 'power'], key表示name和power。首先是name，row['name'] = 'Chuck Norris', 这个字符串中包含字符串'ck'，所以返回true，不需要执行power，那么row即data[0]返回到新的数组，继续遍历下面的数据。如果row['name']不包括此字符串，那么需要遍历row['power']，如果都为false，不返回row，继续遍历。

整段代码涉及到vue的数据绑定，但是由于我还处于懵懂的状态就不记录了。

一只前端小白，如果您发现本文有什么错误或者理解不到位的地方，希望不吝赐教。

最近在正在学习vue，看到示例中网格组件的时候，被一段嵌套代码搞的晕头转向，多方求助（segmentful提问）之后才将将理解，特此记录，以备后续查询：

查看全部代码点击此处

部分代码片段：

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 }
]

注：在这里filterKey表示的是在input中输入的字符串，这里假设输入ck

这里的row表示的是data[i]，以第一行为例执行代码，row为{ name: 'Chuck Norris', power: Infinity }，那么Object.keys(row) = ['name', 'power'], key表示name和power。首先是name，row['name'] = 'Chuck Norris', 这个字符串中包含字符串'ck'，所以返回true，不需要执行power，那么row即data[0]返回到新的数组，继续遍历下面的数据。如果row['name']不包括此字符串，那么需要遍历row['power']，如果都为false，不返回rowコード全体には Vue のデータ バインディング

が含まれていますが、私はまだ無知な状態なので、もう記録されました。

私はフロントエンドの初心者です。この記事に間違いを見つけたり、よく理解していない場合は、お気軽にアドバイスをいただければ幸いです。

最近、Vue を学習しています。サンプルのグリッド コンポーネントを見たときに、助けを求めた後に理解できました (分割された質問)。 すべてのコードについては、ここをクリックしてください
一部のコード スニペット:

rrreee

注: ここで、filterKey は、入力に入力された文字列を表します。ここでは、ck と想定されています。が入力されています

ここでの row は data[i] を表します。row が であることを例として説明します。 >{ 名前: 'チャック ノリス'、パワー: Infinity }、次に Object.keys(row) = ['name', 'power']、key > は 名前 と power を意味します。 1 つ目は name、row['name'] = 'Chuck Norris' です。この文字列には文字列 'ck' が含まれているため、true の場合、power を実行する必要はありません。その後、row または data[0] が新しい配列に戻り、以下のデータの走査を続けます。 row['name'] にこの文字列が含まれていない場合、両方が false の場合は、row['power'] を調べる必要があります。 、いいえ 行 に戻り、移動を続けます。 コード全体には Vue データ バインディングが含まれていますが、まだ無知な状態なので記録しません。

概要:

この記事では、サンプルコードを通じて JavaScript のフィルター関数を詳しく紹介します。これがあなたの仕事に役立つことを願っています。

関連する推奨事項:

Ajax とフィルターの書き方

🎜🎜🎜🎜 CSS3 のフィルター属性の詳細な紹介 🎜🎜🎜🎜🎜🎜サーブレットとフィルタの設定方法とマッピングルール🎜🎜🎜

以上がJavaScriptのフィルター関数の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。