序文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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: 高速でクールな揺れアニメーション効果を実現するCSS
>>: DockerにMinIOをインストールするための詳細な手順
今では多くの人がウェブサイト作成に参加していますが、ウェブサイトはどのように作成すればよいのでしょう...
目次テーブルを作成するときにNOT NULL制約を設定するテーブルを変更するときに非NULL制約を追...
日常業務において、フォームの検証は非常に一般的な設計要件です。ログイン ボックスや登録ボックス、アン...
Apache では構成ファイルで Web ページまたは Web サイトの書き換えを簡単に設定できる...
目次序文:ウォーターフォールレイアウトとは何ですか?達成方法: 1. 画像を取得する2. 画像の帯域...
mysql の権限とインデックスmysql の最高権限ユーザーは root です。 CREATE U...
[ Tomcat8 の Linux インストール ] Tomcat をアンインストールする - まず...
ノードにおけるhttpの役割は何ですか? httpモジュールの役割は、サーバーの作成と記述を支援する...
1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...
目次Vue の keep-alive 組み込みコンポーネントの使用でもこのアルゴリズムが使用されます...
MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...
実際には、対応する記述方法は多数ありますが、最も一般的なのは object + embedded で...
この記事では、VMware Workstation 14 Proのインストールとアクティベーションに...
大学院入試に備えて、C/C++ を使って基本的なデータ構造とアルゴリズムを実装する予定です。アルゴリ...
いわゆる 3 列適応レイアウトとは、両側の幅が固定され、中央のブロックの幅が適応されることを意味しま...