以前の会社で働いていたときは、フロントエンドでフィルタリング機能を完備し、データを一括取得して条件に応じてフィルタリングするといった要件がありました。通常、フィルタリングはバックエンド インターフェースを通じて行われます。データ量が多くない場合は、フロントエンド フィルタリングに遭遇する人もいます。この記事は皆さんと共有するために書きました。質問がある場合は、指摘していただき、お互いに学び合うようにしてください。 一般的に、単一条件フィルタリングの場合、配列のフィルタ方式でニーズを満たすことができます。この記事では、複数の条件での複合フィルタリングに焦点を当て、関連する知識ポイントをいくつか示します。 ここにたくさんの🌰🌰🌰🌰があります // これは例のフィルタリングされた配列です var aim = [ {名前:'Anne'、年齢: 23、性別:'女性'}、 {名前:'レイラ'、年齢: 16、性別:'女性'}、 {名前:'ジェイ'、年齢: 19、性別:'男性'}, {名前:'マーク'、年齢: 40、性別:'男性'} ] 単一条件単一データフィルタリング単一の名前でフィルタリングし、フィルタ メソッドを使用してその名前がターゲット名であるかどうかを判断します。 // 単一の名前でフィルタリングする function filterByName(aim, name) { aim.filter(item => item.name == name) を返します } // 入力目標 'Leila' 期待される出力: [{name:'Leila', age: 16, gender:'female'}] console.log(filterByName(aim, 'レイラ')) 単一条件複数データフィルタリング複数の名前でフィルタリングするには、for ループを使用してターゲット配列を走査し、find メソッドを使用して検索して結果配列にプッシュします。find メソッドを使用すると、重複する名前があっても目的の結果を得ることができます。 for ループはいくつかの配列トラバーサルメソッドに置き換えることができ、コードは簡素化できます。この例は一般的な考え方を表現するためのものです。 // 複数の名前でフィルタリングする function filterByName1(aim, nameArr) { 結果 = [] for(let i = 0; i < nameArr.length; i++) { result.push(aim.find(item => item.name = nameArr[i])) } 結果を返す } // 入力目標 ['Anne','Jay'] // 期待される出力は [{name:'Anne', age: 23, gender:'female'},{name:'Jay', age: 19, gender:'male'}] です console.log(filterByName1(aim,['レイラ','ジェイ'])) // バグ改善後 複数の条件付きデータフィルタリング単一の名前または単一の年齢でフィルタリングするには、フィルタ メソッドを使用して、条件が OR 関係にあるかどうかを判断します。 // 名前または年齢でフィルタリングする function filterByName2(aim, name, age) { aim.filter(item => item.name == name || item.age == age) を返します } console.log(filterByName2(目的,'レイラ',19)) 複数の条件と複数のデータフィルタリング最初は扱いにくい二重の for ループを使用しようとしましたが、速度が遅く、期待した効果が得られませんでした。具体的な精神的な旅はあまりにも遠いので、次のスクリーニングアルゴリズムを簡単に紹介します。 //名前と年齢に基づいて複数の要素をフィルタリングする export function multiFilter(array,filters) { const filterKeys = Object.keys(フィルター) // 条件を満たすすべての要素をフィルタリングします 配列.filter((item) => { を返す // すべてのフィルター条件を動的に検証する filterKeys.every(キー => { を返します //フィルターが空の場合は無視する Anne if (!filters[key].length) が true を返す 戻り値 !!~filters[key].indexOf(item[key]) }) }) } /* * このコードは私が作成したものではありません。興味がある場合は、元の作者に連絡して、いいねを押してください。* 作者は @author です https://gist.github.com/jherax * 一部のフィルター条件がクリアされるとフィルター全体が失敗する問題を解決するために、このコードに 1 行だけ追加しました */ var フィルター = { 名前:['レイラ', 'ジェイ'], 年:[] } /* 結果: * [{名前: "レイラ", 年齢: 16, 性別: "女性"}, * {名前: "ジェイ"、年齢: 19、性別: "男性"}] */ たとえば、ここでは、各データの名前の値が、filters.name 配列内にあるかどうかを判断します。存在する場合は、true が返されます。filters.age が空の配列の場合は、true が直接返されます。空の配列は、年齢条件がクリアされている状況をシミュレートし、正しいフィルタリングされたデータを取得できます。 知識ポイント1: Object.key() は配列のインデックスまたはオブジェクトの属性を取得しますvar arr = ['a', 'b', 'c']; console.log(Object.keys(arr)); // ["0", "1", "2"] var obj = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.keys(obj)); // ["0", "1", "2"] var anObj = { 100: 'a'、2: 'b'、7: 'c' }; console.log(Object.keys(anObj)); // ["2", "7", "100"] なぜだと思いますか? 知識ポイント 2: js の falsy偽: 0、false、""、null、undefined、NaN 判決文では、上記の6つのケースのみが誤りであり、残りは正しい。 var a; if(a!=null&&typeof(a)!=undefined&&a!=''){ //コンテンツがある場合にのみ実行されるコード} もし(!!a){ //コンテンツがある場合にのみ実行されるコード... } 知識ポイント3: Array.everyとArray.someの違い私の理解では、配列を走査する場合、次のようになります。
ここに例があります🌰 // それぞれの名前が Anne かどうかを確認します。 dataEvery = aim.every(item => item.name === 'Anne') とします // false dataEvery = aim.some(item => item.name === 'Anne') とします // true // 各名前が文字列かどうかを確認します。 dataEvery = aim.every(item => typeof item.name === 'string') // true とします dataEvery = aim.some(item => typeof item.name === 'string') // true とします 知識ポイント4: 配列のディープコピーとシャローコピー私は最近、フロントエンドの面接にいくつか参加しましたが、ディープ コピーとシャロー コピーは私のお気に入りの質問の 1 つです。 1 つの質問では、データ型、配列操作、再帰アルゴリズムなどが調べられます。 配列は js では参照型なので、単純にコピーすると参照関係もコピーされます。取得したデータをフィルタリングする際に、元のデータに影響を与えたくないので、参照関係をそのままコピーするのではなく、元のデータ構造と完全に同一で互いに独立したデータを取得する「ディープ コピー」を使用する必要があります。 // 私は通常この方法を使用します。プロジェクトが大きい場合はお勧めしません。let obj1 = JSON.parse(JSON.stringify(obj)) //ディープクローン 関数deepClone(o1, o2) { (kをo2に入れる) { o2[k] の型が 'オブジェクト' の場合 o1[k] = {}; o1[k], o2[k]をdeepCloneします。 } それ以外 { o1[k] = o2[k]; } } } 考えてみましょう: 再帰アルゴリズムの最適化この知識ポイントはこの記事とはほとんど関係ありません。 😄 先ほどは誤解を招いてしまい申し訳ありませんでした。 これは、Nuggets の小冊子のフロントエンド インタビュー ガイドを読んでいるときに目にしました。アルゴリズムについて話しているときに、再帰アルゴリズムの最適化について触れていました。初めて見たときは驚きましたが、まだプロジェクトで使用していません。興味があれば試してみてください。これがフィボナッチ数列の合計です。ブラウザに入力すると、キャッシュなしとキャッシュありの操作数の違いを確認できます。 count = 0 とします。 関数fn(n) { キャッシュを {} にします。 関数_fn(n) { if (キャッシュ[n]) { キャッシュ[n]を返す。 } カウント++; (n == 1 || n == 2) の場合 { 1 を返します。 } prev = _fn(n - 1) とします。 キャッシュ[n - 1] = 前; 次は_fn(n - 2)とします。 キャッシュ[n - 2] = 次へ; 前へ + 次へを返す。 } _fn(n) を返します。 } count2 = 0 とします。 関数fn2(n) { カウント2++; (n == 1 || n == 2) の場合 { 1 を返します。 } fn2(n - 1) + fn2(n - 2) を返します。 } シンプルなものから複数条件のフィルタリングまで、JS で配列フィルタリングを実装する方法についての記事はこれで終わりです。より関連性の高い JS 配列フィルタリングのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: MySQL 5.5.56 インストール不要版の設定方法
>>: Centos7でファイルをバックアップするときは、バックアップファイルにバックアップの日付を追加します
多くの場合、Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは...
最も一般的に使用されるレイアウト要素として、DIV は Web 開発において重要な役割を果たします。...
目次1. デジタルオペレーション(1)指定された範囲内で乱数を生成する2. 配列操作(1)配列の順序...
1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...
1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...
目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...
この記事では、スライドタブを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的...
VMware Workstationsが仮想マシンエラーを起動する エラー レポートのリンク htt...
序文:複数の要素を格納するために、配列は最も一般的に使用されるデータ構造ですが、配列には多くの欠点も...
viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...
目次変数のスコープ閉鎖の概念クロージャの使用クロージャのデメリット最後に、クロージャのメリットとデメ...
目次 はじめに 同期 非同期とブロッキング JavaScript のノンブロッキング コールバック ...
これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...
この記事は MySQL 公式サイトを参考にしてまとめたものであり、遭遇したいくつかの問題も記録されて...
デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...