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

推薦する

ウェブデザイナーもウェブコーディングを学ぶ必要がある

多くの場合、Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼らは...

DIV の一般的なタスク (パート 1) — 一般的なタスク (スクロール バーの表示、div の非表示、イベント バブリングの無効化など)

最も一般的に使用されるレイアウト要素として、DIV は Web 開発において重要な役割を果たします。...

開発効率の向上に役立つ 56 個の実用的な JavaScript ツール関数

目次1. デジタルオペレーション(1)指定された範囲内で乱数を生成する2. 配列操作(1)配列の順序...

Navicateを使用してAlibaba Cloud Server上のMySQLに接続する

1. まず、サーバーの mysql にアクセスして権限を変更します。 GRANT オプション付きで、...

Docker で ElasticSearch をデプロイする方法

1. ElasticSearch とは何ですか? Elasticsearch も Java で開発さ...

MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法

目次MySQL マスター スレーブ データベースが同期されない問題を解決する 2 つの方法1. 非同...

jQueryはスライディングタブを実装する

この記事では、スライドタブを実装するためのjQueryの具体的なコードを参考までに紹介します。具体的...

VMwareワークステーションとデバイス/資格情報の非互換性によって発生する起動エラーについて

VMware Workstationsが仮想マシンエラーを起動する エラー レポートのリンク htt...

JavaScript は単一のリンクリストプロセス分析を実装します

序文:複数の要素を格納するために、配列は最も一般的に使用されるデータ構造ですが、配列には多くの欠点も...

vite+vue3+element-plus プロジェクトをビルドする手順

viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...

1つの記事でJavaScriptのクロージャ関数について学ぶ

目次変数のスコープ閉鎖の概念クロージャの使用クロージャのデメリット最後に、クロージャのメリットとデメ...

1 つの記事で Node.js の非同期プログラミングを学ぶ

目次 はじめに 同期 非同期とブロッキング JavaScript のノンブロッキング コールバック ...

IDEA は MySQL への接続時にエラーを報告します。サーバーが無効なタイムゾーンを返します。タブに移動して serverTimezone プロパティを設定してください。

これからの道は常に困難で、棘だらけです。歯を食いしばって、乗り越えられると信じてください。さあ、さあ...

Ubuntu 18.04にMySQL 5.7をインストールする

この記事は MySQL 公式サイトを参考にしてまとめたものであり、遭遇したいくつかの問題も記録されて...

Docker は固定コンテナ IP アドレスを実現するためにカスタム ネットワークを作成します。

デフォルトのブリッジ ネットワークのため、コンテナーを再起動すると IP アドレスが変更されます。シ...