JavaScript の find() メソッドと filter() メソッドの違いのまとめ

JavaScript の find() メソッドと filter() メソッドの違いのまとめ

序文

JavaScript の ES6 には多くの配列メソッドがあり、それぞれに独自の用途と利点があります。

アプリケーションを開発する際には、ほとんどの場合、配列メソッドを使用して特定の値のリストを取得し、一致する単一または複数の項目を取得します。

これら 2 つの方法の違いを列挙する前に、これらの方法を 1 つずつ理解していきましょう。

JavaScript find() メソッド

ES6 の find() メソッドは、テスト関数に合格した最初の要素の値を返します。テスト関数を満たす値がない場合、 undefined が返されます。

文法

次の構文で使用される矢印関数。

find((要素) => { /* ... */ } )
find((要素, インデックス) => { /* ... */ } )
find((要素、インデックス、配列) => { /* ... */ } )

以下に示すように、name、age、id のプロパティを持つユーザー オブジェクトのリストがあります。

ユーザーに = [{
    id:1,
    名前: 'ジョン'、
    年齢: 22
}, {
    id:2,
    名前: 'トム'、
    年齢: 22
}, {
    id:3,
    名前: 'バラジ'、
    年齢: 24
}];

次のコードでは、find() メソッドを使用して、年齢が 23 を超える最初のユーザーを検索します。

console.log(users.find(user => user.age > 23));
//コンソール
//{ id: 3、名前: 'Balaji'、年齢: 24}

年齢が22歳の最初のユーザーを見つけたい

console.log(users.find(user => user.age === 22));
//コンソール
//{ id: 1、名前: 'ジョン'、年齢: 22}

一致するものが見つからないと仮定すると、undefinedが返されます。

console.log(users.find(user => user.age === 25));
//コンソール
//未定義

JavaScript filter() メソッド

filter() メソッドは、テスト関数に合格したすべての要素を含む新しい配列を作成します。テスト関数を満たす要素がない場合は、空の配列が返されます。

文法

フィルター((要素) => { /* ... */ } )
フィルター((要素, インデックス) => { /* ... */ } )
フィルター((要素, インデックス, 配列) => { /* ... */ } )

フィルターの例と同じユーザー配列とテスト関数を使用します。

次のコードでは、filter() メソッドを使用して、年齢が 23 を超える最初のユーザーを検索します。

console.log(users.filter(user => user.age > 23));
//コンソール
ここで、年齢が22歳のユーザーをフィルタリングします //[{ id: 3, name: 'Balaji', age:24}]

22歳のユーザーをフィルタリングしたい

console.log(users.filter(user => user.age === 22));
//コンソール
//[{ id: 1, 名前: 'ジョン', 年齢:22},{ id: 2, 名前: 'トム', 年齢:22}]

一致するものが見つからないと仮定すると、空の配列が返されます。

console.log(users.filter(user => user.age === 25));
//コンソール
//[]

find() と filter() の相違点と類似点

共通点

高階関数: これらの関数は両方とも高階関数です。

違い

1. テスト関数を渡す

find() は最初の要素を返します。

filter() は、テスト関数に合格したすべての要素を含む新しい配列を返します。

2. テスト関数を満たす値がない場合

find() は undefined を返します。

filter() は空の配列を返します。

コードに直接

arr = [とする
  {
    名前: 'リック',
    年齢: 60
  },

  {
    名前: 'リック',
    年齢: 70
  },

  {
    名前: 'モーティ',
    年齢: 14
  }

]

findResult = arr.find(i => i.name === 'Rick') とします。
filterResult = arr.filter(i => i.name === 'Rick') とします。

コンソールにログ出力します。 
/* 出力結果[
    {
      名前: 「リック」
      年齢: 60
    },

    {
      名前: 「リック」
      年齢: 70
    },

    {
      名前:「モーティ」
      年齢: 14
    }
  ]

*/

console.log(findResult); // {名前: "Rick", 年齢: 60}
console.log(filterResult); // [{name: "Rick", age: 60}, {name: "Rick", age: 70}]

上記のコードの出力によると、find も filter も元の配列を変更しないことがわかります。

要約する

これで、JavaScript の find() メソッドと filter() メソッドの違いに関するこの記事は終了です。js の find() メソッドと filter() メソッドの違いの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • ループなしの JavaScript (map、reduce、filter、find)
  • js配列のfind、some、filter、reduceの違いの詳細な説明

<<:  高速でクールな揺れアニメーション効果を実現するCSS

>>:  DockerにMinIOをインストールするための詳細な手順

推薦する

ウェブサイトデザインの基礎知識:初心者の方はぜひお読みください

今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...

MySQL の null 制約のケースの説明

目次テーブルを作成するときにNOT NULL制約を設定するテーブルを変更するときに非NULL制約を追...

純粋な CSS でフォ​​ーム検証を実装するためのサンプル コード

日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...

IIS 7.5はURL書き換えモジュールを使用してWebページのリダイレクトを実現します。

Apache では構成ファイルで Web ページまたは Web サイトの書き換えを簡単に設定できる...

JS を使用して Web ページのウォーターフォール レイアウトを実装する方法

目次序文:ウォーターフォールレイアウトとは何ですか?達成方法: 1. 画像を取得する2. 画像の帯域...

MySQLの権限とインデックスの詳細な説明

mysql の権限とインデックスmysql の最高権限ユーザーは root です。 CREATE U...

Linux での Tomcat8 のインストールとアンインストールに関する詳細なグラフィック チュートリアル

[ Tomcat8 の Linux インストール ] Tomcat をアンインストールする - まず...

ノードにおけるhttpモジュールの使用と実行プロセス

ノードにおけるhttpの役割は何ですか? httpモジュールの役割は、サーバーの作成と記述を支援する...

FTP環境設定ソリューション(vsftpd)の詳細な説明

1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...

Vue 組み込みコンポーネントのキープアライブでの LRU アルゴリズムの使用

目次Vue の keep-alive 組み込みコンポーネントの使用でもこのアルゴリズムが使用されます...

MySQL の全体的なアーキテクチャの紹介

MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...

ChromeとIEに対応したWMPに埋め込まれたHTMLの詳細な紹介

実際には、対応する記述方法は多数ありますが、最も一般的なのは object + embedded で...

VMware Workstation 14 Pro のインストールとアクティベーションのグラフィック チュートリアル

この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...

VSCode+CMake+Clang+GCC 環境構築チュートリアル (Win10 の場合)

大学院入試に備えて、C/C++ を使って基本的なデータ構造とアルゴリズムを実装する予定です。アルゴリ...

CSS を使用して 3 列のアダプティブ レイアウト (両側は固定幅、中央はアダプティブ) を実現します。

いわゆる 3 列適応レイアウトとは、両側の幅が固定され、中央のブロックの幅が適応されることを意味しま...