JSは単純なフィルタリングから複数条件のフィルタリングまで配列フィルタリングを実装します

JSは単純なフィルタリングから複数条件のフィルタリングまで配列フィルタリングを実装します

以前の会社で働いていたときは、フロントエンドでフィルタリング機能を完備し、データを一括取得して条件に応じてフィルタリングするといった要件がありました。通常、フィルタリングはバックエンド インターフェースを通じて行われます。データ量が多くない場合は、フロントエンド フィルタリングに遭遇する人もいます。この記事は皆さんと共有するために書きました。質問がある場合は、指摘していただき、お互いに学び合うようにしてください。

一般的に、単一条件フィルタリングの場合、配列のフィルタ方式でニーズを満たすことができます。この記事では、複数の条件での複合フィルタリングに焦点を当て、関連する知識ポイントをいくつか示します。

ここにたくさんの🌰🌰🌰🌰があります

// これは例のフィルタリングされた配列です 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 ループを使用しようとしましたが、速度が遅く、期待した効果が得られませんでした。具体的な精神的な旅はあまりにも遠いので、次のスクリーニングアルゴリズムを簡単に紹介します。
最初のステップは、すべてのフィルタリング条件をオブジェクトに格納し、オブジェクトの keys メソッドを使用して、フィルタリング条件の名前と、フィルタリングする必要がある条件 (名前ですか?) を取得することです。年齢は?性別は?
次に、フィルターメソッドを使用して、次のように対象データをフィルターします⬇️
名前と年齢でフィルタリング

//名前と年齢に基づいて複数の要素をフィルタリングする 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の違い

私の理解では、配列を走査する場合、次のようになります。

  • Array.every の条件は「and」関係です。すべての条件が true の場合は true を返します。1 つの条件が false の場合は false を返します。
  • Array.some の条件は「または」関係です。条件の 1 つが true の場合は true を返し、すべての条件が false の場合は false を返します。

ここに例があります🌰

// それぞれの名前が 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript配列についてさらに詳しく知るのに役立つ記事
  • Javascript配列の重複排除のいくつかの方法の詳細な説明
  • JavaScript配列の組み込みメソッドの詳細な説明
  • よく使われるJavaScript配列メソッド
  • JavaScript 配列の詳細な概要
  • JavaScriptでよく使われる配列重複排除実戦ソースコード
  • JavaScript で配列の変更を監視する方法
  • JS オブジェクト配列の重複排除のための 3 つの方法の例と比較
  • JavaScript 配列の Reduce() メソッドの構文と例の分析
  • JavaScript で 24 以上の配列メソッドを手動で実装する

<<:  MySQL 5.5.56 インストール不要版の設定方法

>>:  Centos7でファイルをバックアップするときは、バックアップファイルにバックアップの日付を追加します

推薦する

Tomcat クラスローダーの実装方法とサンプルコード

Tomcat は内部的に複数の ClassLoader を定義し、アプリケーションとコンテナーが異な...

CSS 円形ホローイングの実装(クーポン背景画像)

この記事では主に、クーポンの背景画像などでよく使われる CSS 円形ホローイングについて紹介し、皆さ...

Node.js管理ツールnvmの詳細なインストール手順

いいえnvmはnodejsの複数のバージョンを管理する役割を担っています。インストール: https...

Ubuntu で .sh ファイルを実行するいくつかの方法の違いについて簡単に説明します。

序文特に bash 環境では、スクリプトの実行方法によって結果が異なります。スクリプトを実行する方法...

js の toString メソッドの 3 つの機能

目次1. toStringメソッドの3つの機能2. オブジェクトを表す文字列を返す3. カスタム t...

Mybatis mysqlの削除操作では、最初のデータメソッドのみを削除できます。

バグ図のように、削除文とパラメータをデータベースにコピーして実行し、2つのデータを削除しようとしたの...

IIS 7.5では、HTMLはSHTMLのようなinclude関数(モジュールマッピングの追加)をサポートします。

最初はたくさんのエラーを見つけましたが、実際には非常に簡単です。shtm の元の設定を参照するだけで...

Centos 7.4 でリモート アクセス制御を実装する方法

1. SSHリモート管理SSH はセキュア チャネル プロトコルであり、主にリモート ログイン、リモ...

jsはCanvasを使用して複数の画像を1つの実装コードにマージします

解決 関数 mergeImgs(リスト) { const imgDom = document.cre...

Dockerを使用してgitlabコミュニティの中国語版を構築する詳細なプロセスを教えます

1. Docker Composeを使用して起動を構成するDocker Compose を知らない場...

「さらに表示」ボタンによる複数行テキストの切り捨てに関する考察

最近、たまたまこの小さな要件に遭遇しました。昔、JS を使用してこれを処理したことを覚えていますが、...

CSS が初期読み込み時の白い画面の時間に与える影響

外部 CSS ファイルを使用したレンダリング パイプライン上図では、HTML データの要求から DO...

Kylin V10 への zabbix-agent のインストール手順

1. インストールパッケージをダウンロードするダウンロードアドレス: https://sourcef...

vue 動的コンポーネント

目次1. コンポーネント2. キープアライブ2.1 問題点2.2 キープアライブを使って解決する2....

エージェントを介したzabbix監視プロセスとポートの詳細なプロセス

環境の紹介オペレーティングシステム: Centos 7.4 Zabbix バージョン: zabbix...