ホームページ > ウェブフロントエンド > jsチュートリアル > 属性値に基づいて JavaScript 配列内のオブジェクトを効率的に検索するにはどうすればよいですか?

属性値に基づいて JavaScript 配列内のオブジェクトを効率的に検索するにはどうすればよいですか?

Mary-Kate Olsen
リリース: 2024-12-18 21:00:15
オリジナル
490 人が閲覧しました

How Can I Efficiently Find Objects in JavaScript Arrays Based on Attribute Values?

JavaScript での属性値に基づく配列内のオブジェクトの検索

オブジェクトの配列を扱う場合、多くの場合、属性値に基づいて特定の要素を検索する必要があります。これは、非効率なループを避けるために大規模な配列を扱う場合に特に役立ちます。

問題

次のベンダー オブジェクトの配列を考えてみましょう。

vendors = [{
    Name: 'Magenic',
    ID: 'ABC'
  },
  {
    Name: 'Microsoft',
    ID: 'DEF'
  } // and so on...
];
ログイン後にコピー

目標は、次のことを決定することです。 Name 属性が「Magenic」に等しいオブジェクトが明示的な手段に頼らずにこの配列内に存在する場合

解決策

最新の JavaScript には、このタスクを簡単にするいくつかの配列メソッドが用意されています。

いくつかの使用:

if (vendors.some(e => e.Name === 'Magenic')) {
  // We found at least one object that we're looking for!
}
ログイン後にコピー

一部は配列を反復処理し、指定された要素に一致する要素が見つかるとすぐに true を返します。条件.

find を使用すると、

if (vendors.find(e => e.Name === 'Magenic')) {
  // Usually the same result as above, but find returns the found object instead of a boolean
}
ログイン後にコピー

find は一部のものと同様に動作しますが、ブール値を返す代わりに、条件に一致する最初の要素を返します。

オブジェクトの取得Position:

一致する要素の位置を取得するには、findIndex:

const i = vendors.findIndex(e => e.Name === 'Magenic');
if (i > -1) {
  // We know that at least 1 object that matches has been found at the index i
}
ログイン後にコピー

すべての一致するオブジェクトの検索:

if (vendors.filter(e => e.Name === 'Magenic').length > 0) {
  // The same result as above, but filter returns all objects that match
}
ログイン後にコピー

filter は、指定された条件を満たすすべての要素の配列を返します。条件。

古いブラウザとの互換性:

アロー機能をサポートしていないブラウザの場合、標準のフィルタ方法を使用する代替アプローチは次のとおりです。

if (vendors.filter(function(e) { return e.Name === 'Magenic'; }).length > 0) {
  // The same result as above, but filter returns all objects that match and we avoid an arrow function for compatibility
}
ログイン後にコピー

以上が属性値に基づいて JavaScript 配列内のオブジェクトを効率的に検索するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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