Mam obiekt zawierający następujące informacje:

assets = [
  { id: 1, type: 'image', url: 'image.jpg' },
  { id: 2, type: 'video', url: 'video.mp4' },
]

Chciałbym filtrować na podstawie wyboru obrazu, wideo lub wszystkich.

Nie mogę myśleć o czystym sposobie, aby filtrować użycie dla wszystkich przypadków.

currentOption = 'image'
assets.filter(asset => asset.type === currentOption)

Będzie to działać na obraz lub wideo, ale nie wszystkie.

Mógłbym sprawdzić funkcję filtra:

const currentOption = 'all'
const filterFunc = asset => {
  if (currentOption == 'all') return true
  return asset.type === currentOption
}
assets.filter(filterFunc)

Ale czy nie byłoby lepiej zwarcie filtru, aby nie iterować każdy przedmiot?

Edytuj: Aby odpowiedzieć na pytania, dlaczego nie pomiń filtrowania wszystkich razem. Próbowałem utrzymać frameworkę IT Agnostic. Ale to jest realizowane za reagowanie. Więc musiałbym coś zrobić:

<div>
{currentOption === 'all' ?
  assets.map(asset => 
   <img src={asset.url} />
  )
  :
  assets.filter(asset => asset.type === currentOption).map(asset =>
   <img src={asset.url} />
  )
}
</div>

Plus nie zawiera nawet kodu, aby wyświetlić wideo. Zasadniczo próbowałem zmniejszyć powielanie w kodzie widoku.

9
dardub 27 czerwiec 2017, 23:16

4 odpowiedzi

Najlepsza odpowiedź

Możesz użyć operatora Terrary, aby zdecydować, czy zastosować filtr:

currentOption === 'all' ? assets : assets.filter(asset => asset.type === currentOption)

Mapowanie do obrazów, które dodano do końca pytania, można było napisać tak:

(currentOption === 'all' ? assets : assets.filter(asset => asset.type === currentOption))
    .map( asset => <img src={asset.url} /> )
6
trincot 28 czerwiec 2017, 11:19

Możesz zrobić coś takiego:

let currentOption = null; //or 'image', or 'video'
const new_assets = 
  assets.filter(asset => !currentOption || asset.type === currentOption)

Ustaw Currentoption do NULL, jeśli nie chcesz filtrowania, lub jeśli jest to ustawione na wszystko, należy rozważyć porównanie. Ale jak wspomniano wcześniej, filtr () będzie iterować przez całą tablicę. Będzie to bardziej mądry, aby sprawdzić w obecności programu Currentoption, jeśli jest "wszystko", możesz po prostu skopiować tablicę.

-4
Christian Benseler 27 czerwiec 2017, 20:20

To może zadziałać dla Ciebie:

assets.map(
    filter(
        asset {
            return !currentOption ? asset : asset.type === currentOption
    }
)

Możesz przejść krok dalej i zadeklarować "wszystkie" opcję, jeśli uważasz, że byłoby bardziej wyraźne.

Mam nadzieję, że to pomoże!

0
Théo T. Carranza 10 listopad 2019, 22:09

Pójdę z tym, co zasugerowałeś, mniej więcej:

assets.filter(asset => currentOption === "all" || asset.type === currentOption);

Należy pamiętać, że filtr () idziemy na wszystkich elementach.

4
alonkol 27 czerwiec 2017, 20:21