if条件内のnull値を破棄する最良の方法は何ですか？JavaScript

bugfix> javascript > 投稿 2020-11-25 12:36

React.jsアプリのフィルター機能をコーディングしているときに、以下の問題に直面しました。

3つの異なるタイプのフィルター（日付、キャンパス、都市）があるため、ユーザーが入力したフィルターのみに基づいてオブジェクトの配列をユーザーに返す必要があります（1つ、2つ、または3つのみ）。。この問題を解決するために、私はこの解決策を思いつきました：

   // Example of user input, something how my state variables should look
    const date = null
    const campus = "Example 1"
    const city = "City 1"
    //
    const array = [ { date: "2020-11-23", campus: "Example 1", city: "City 1" }, 
                    { date: "2020-11-24", campus: "Example 2", city: "City 2" }, ]
    const filteredArray = array.filter(e => {
        if (date && campus && city)
            return e.date === date && e.campus === campus && e.city === city;
        if (date && campus)
            return e.date === date && e.campus === campus;
        if (campus && city)
            return e.campus === campus && e.city === city;
        if (date && city)
            return e.date === date && e.city === city;
        if (date)
            return e.date === date;
        if (campus)
            return e.campus === campus;
        if (city) 
            return e.city === city;
    });

さて、フィルタリングされたオブジェクトを返すときにnull値を破棄して、コードのサイズを減らすことができる他の方法はありますか？

javascript

arrays

reactjs

回答 2 件

それらを1つのステートメントに組み合わせることができます。

const filteredArray = array.filter(e => 
    (!date || date === e.date) && (!campus || campus === e.campus) && (!city || city === e.city)
);

また、すべてのプロパティを再度書き換えることなく、すべての条件を動的にチェックするオブジェクトを作成できます。

const conditions = {
    date: null,   // you can also remove this line
    campus: 'Example 1',
    city: 'City 1'
};
const array = [
    { date: '2020-11-23', campus: 'Example 1', city: 'City 1' },
    { date: '2020-11-24', campus: 'Example 2', city: 'City 2' }
];
const filteredArray = array.filter(e => Object.entries(conditions).every(([key, value]) => !value || e[key] === value));
console.log(filteredArray);

これを行うためのより良い方法は、フィルターを個別におよび直列に実行することです。

何かのようなもの：

function filter(array, date, campus, city) {
      let filteredByDate = filterBy(array, date, 'date')
      let filteredByCampus = filterBy(filteredByDate, campus, 'campus')
      let filteredByCity = filterBy(filteredByCampus, city, 'city')
    
      return filteredByCity
    }

その場合、個々のフィルターは次のようになります。

function filterBy(array, data, prop) {
  if(!date) return array
  else return array.filter(e => (e[prop] === data))
}

bugfix

if条件内のnull値を破棄する最良の方法は何ですか？JavaScript

javascript

arrays

reactjs

関連記事