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 をよろしくお願いいたします。

以下もご興味があるかもしれません: