ホームページ >ウェブフロントエンド >フロントエンドQ&A >ES6の検索とフィルタの違いは何ですか
es6 の find と filter の違い: 1. 配列を変更せずに配列内の修飾されたコンテンツを検索する場合、find メソッドによって返される結果はオブジェクトであり、filter メソッドによって返される結果は次のとおりです。配列; 2. テスト関数を満たす値がない場合、find メソッドは unknown を返し、filter メソッドは空の配列を返します。
このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。
1. Find と filter はどちらも元の配列を変更しないメソッドです。どちらも配列内の条件を満たすコンテンツを検索します。配列を変更します。違いは、find はオブジェクトを返し、filter は配列を返すことです。
例は次のとおりです:
const list = [{'name':'1',index:1},{'name':'2'},{'name':'1'}] let list2 = list.find(i=>i.name==='1') let list3 = list.filter(i=>i.name==='1') console.log(list); [ { name: '1', index: 1 }, { name: '2' }, { name: '1' } ] console.log(list2); { name: '1', index: 1 } console.log(list3);[ { name: '1', index: 1 }, { name: '1' } ]
find は、条件を満たす最初の結果のみを検索します。この例では、配列ではなくオブジェクトを直接返します。 、フィルターはすべての結果を配列として返します。
注: find() は、最初の要素を見つけた後は次の要素を走査しません。そのため、配列内に 2 つの同一の要素がある場合、最初の要素のみが検索され、2 番目の要素は検索されません。再び横断することはできません。
2. 要約すると、検索クエリの効率が高いため、配列内のデータが一意である場合は、find
find() ## を使用するのが最適です。
#ES6 find() メソッドは、テスト関数を通過した最初の要素の値を返します。テスト関数を満たす値がない場合は、unknown が返されます。 構文次の構文で使用される矢印関数。find((element) => { /* ... */ } ) find((element, index) => { /* ... */ } ) find((element, index, array) => { /* ... */ } )
filter()
filter() メソッドは、テスト関数に合格するすべての要素を含む新しい配列を作成します。テスト関数を満たす要素がない場合は、空の配列が返されます。 文法filter((element) => { /* ... */ } ) filter((element, index) => { /* ... */ } ) filter((element, index, array) => { /* ... */ } )共通点
高階関数: どちらの関数も高階関数です。
違い
1. テスト関数find()を通じて最初の要素を返します。 filter() は、テスト関数を通過したすべての要素を含む新しい配列を返します。 2. テスト関数を満たす値がない場合、find() は未定義を返します; filter() は空の配列を返します; [関連する推奨事項:JavaScript ビデオ チュートリアル 、Web フロントエンド ]
以上がES6の検索とフィルタの違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。