bugfix> javascript > 投稿

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値を破棄して、コードのサイズを減らすことができる他の方法はありますか?

回答 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))
    }
    
    

あなたの答え