JavaScriptフィルターの実装

PHPz
リリース: 2023-05-16 11:53:07
オリジナル
657 人が閲覧しました

JavaScript には多くの組み込み関数があり、filter() もその 1 つです。その機能は、基準を満たす要素を配列からフィルターで除外し、新しい配列を返すことです。

filter() の構文は次のとおりです。

array.filter(function(currentValue, index, arr), thisValue)
ログイン後にコピー

パラメータの説明:

  • currentValue: 配列内で処理されている現在の要素
  • index: 配列内の現在の要素の添字
  • arr: 処理される配列
  • thisValue (オプション): オブジェクトが関数として実行されるときに、この値を this として使用します (その
##filter() メソッドは関数をパラメータとして受け取ります。この関数は、現在の要素、現在の要素のインデックス、配列全体の 3 つのパラメータを受け取ります。この関数は、現在の要素が条件を満たしているかどうかを示すブール値を返す必要があります。 true が返された場合、要素は新しい配列に保持されます。それ以外の場合、要素はフィルターで除外されます。

1 から 10 までの整数を格納する配列があると仮定して、例を見てみましょう。

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
ログイン後にコピー

次に、5 以上のすべての要素をフィルタリングして除外します。これは、filter() メソッドを通じて実現できます。

const result = numbers.filter(function(number) {
  return number >= 5;
});

console.log(result); // 输出 [5, 6, 7, 8, 9, 10]
ログイン後にコピー

上記のコードでは、filter() 関数は、戻り値が true または false である関数を受け取ります。この関数では、現在の要素が 5 以上の場合に true が返されます。それ以外の場合、現在の要素が 5 未満の場合は false が返されます。最後に、基準を満たす要素、つまり 5 以上の要素が保持され、新しい配列の形式で返されます。

関数の定義に加えて、アロー関数の省略形を使用することもできます。

const result = numbers.filter(number => number >= 5);

console.log(result); // 输出 [5, 6, 7, 8, 9, 10]
ログイン後にコピー

filter() メソッドは、配列内のオブジェクトに対しても使用できます。複数の人物に関する情報を格納する配列があるとします。

const people = [
  { name: 'Lucas', age: 25 },
  { name: 'Emma', age: 21 },
  { name: 'Tom', age: 30 },
  { name: 'Jane', age: 18 },
];
ログイン後にコピー

次に、25 歳以上の人々を除外したいと思います。これは、filter() メソッドを通じて実現できます:

const result = people.filter(function(person) {
  return person.age >= 25;
});

console.log(result); // 输出 [{ name: 'Lucas', age: 25 }, { name: 'Tom', age: 30 }]
ログイン後にコピー

同様に、アロー関数の省略形も使用できます:

const result = people.filter(person => person.age >= 25);

console.log(result); // 输出 [{ name: 'Lucas', age: 25 }, { name: 'Tom', age: 30 }]
ログイン後にコピー
実際の開発では、filter() メソッドはフィルター処理によく使用されます。検索、フィルタリング、分類、その他のシナリオなどの条件を満たすデータ。シンプルで使いやすく、配列要素を素早くフィルタリングできるため、開発においては欠かせない手法の一つと言えます。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート