ホームページ > 記事 > ウェブフロントエンド > 複数の条件に基づいてオブジェクトの JavaScript 配列をフィルタリングする方法
オブジェクトの配列とフィルター オブジェクトが与えられた場合、目的はフィルターとフィルターで指定された複数の条件に基づいて配列を単純化します。ただし、フィルターに複数のプロパティが含まれている場合、特定の問題が発生します。
次のコード セグメントを考えてみましょう:
<code class="js">function filterUsers(users, filter) { var result = []; for (var prop in filter) { if (filter.hasOwnProperty(prop)) { // Iterate over the array for (var i = 0; i < filter.length; i++) { if (users[i][prop] === filter[prop]) { result.push(users[i]); } } } } return result; }
提案された解決策では、問題が発生します。フィルターに複数のプロパティが含まれている場合。具体的には、2 回目の反復中、users[i][prop] と filter[prop] の間の比較が正しくありません。これを修正するには、コードを次のように変更します。
<code class="js">function filterUsers(users, filter) { var result = []; for (var prop in filter) { if (filter.hasOwnProperty(prop)) { // Apply filter on the array users = users.filter((user) => user[prop] === filter[prop]); } } return result; }</code>
このバージョンでは、配列の組み込みフィルター メソッドを利用してフィルター条件を動的に適用します。これにより、指定されたすべての条件を満たすオブジェクトのみが結果に含まれるようになります。
更新されたソリューションでは、フィルタリング プロセスが期待どおりに機能します。
<code class="js">var users = [{ name: 'John', email: 'john@example.com', age: 25, address: 'USA' }, { name: 'Tom', email: 'tom@example.com', age: 35, address: 'England' }, { name: 'Mark', email: 'mark@example.com', age: 28, address: 'England' }]; var filter = { address: 'England', name: 'Mark' }; var filteredUsers = filterUsers(users, filter); console.log(filteredUsers); // Output: [{ name: 'Mark', email: 'mark@example.com', age: 28, address: 'England' }]</code>
このソリューションは、複数のフィルター条件が正しく適用されなかった問題に対処し、結果として得られるフィルター処理された配列が指定された基準を正確に反映するようにします。
以上が複数の条件に基づいてオブジェクトの JavaScript 配列をフィルタリングする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。