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でファイルをバックアップするときは、バックアップファイルにバックアップの日付を追加します

推薦する

JavaScript演算子の使用に関するヒントをいくつか共有します

目次1. オプションの連鎖演算子 [? .】 2. 論理的な空の代入 (?? =) 3. 論理和代入...

insert と select を組み合わせて、「データベース内のフィールドの最大値 + 1 を挿入する」メソッドを実装する

この記事はmysqlデータベースです質問 1 表 1 のデータを表 2 にインポートします。表 1 ...

Nginx リクエスト制限の設定方法

Nginx は、多くの優れた機能を備えた強力で高性能な Web およびリバース プロキシ サーバーで...

Dockerカスタムネットワークコンテナ相互接続

目次序文-リンクカスタムネットワーク質問する序文前回は、 -Linkパラメータを使用してコンテナ間の...

生年月日を年齢に変換し、グループ化して人数を数えるMySQLの例

データベースのクエリ `学生`から*を選択 クエリ結果id名前誕生日1張三1970-10-01 2李...

Web ページのデザインを学ぶときに習得すべきコードは何ですか?

この記事では、Web ページ制作を学ぶ過程で習得すべきテクニックの一部を詳しく紹介します。これらの内...

Vue フロントエンドと Django バックエンドを使用して、一定期間内のデータをクエリする方法

序文開発プロセスでは、すべてのデータではなく特定の期間内のデータをクエリするなど、クエリのフィルタリ...

vmware16 仮想マシンに共有フォルダを設定する方法

1. 仮想マシンに共有フォルダを設定します。 1. 処理する仮想マシンを選択し、右クリックして設定...

APP (IOS、Android) を呼び出すモバイル H5 の記述例

iOS 1. URLスキームこのソリューションは基本的に、WeChat、QQ 組み込みブラウザ、QQ...

nginxリバースプロキシを使用するときに長時間接続を維持する方法

・【シーン説明】 HTTP1.1 以降、HTTP プロトコルは永続的な接続 (長い接続とも呼ばれます...

MySQL サービスとデータベース管理

目次1. サービスの開始と停止の手順1.1 Windows での MySQL 5.7 の公式 MSI...

中央のテキストの両側に水平線を描くためのCSS

1. vertical-align プロパティは次の効果を実現します。 vertical-alig...

Windows Server 2016 標準キー アクティベーション キー シリアル番号

Windows Server 2016 アクティベーション キーを皆さんと共有したいと思います。wi...

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

高同時実行シナリオにおける nginx 最適化の詳細な説明

日常の運用・保守作業では、nginx サービスが頻繁に使用され、nginx の高同時実行性によって生...