Композиция функций JavaScript из 3-х функций
Я использую Vue и пытаюсь отфильтровать массив результатов с помощью композиции функции JS.
Мои вычисленные значения Vue похожи, но не могут получить filteredByAll
принять третий вариант getByThing
, Прямо сейчас filterByAll просто фильтрует поиск по категориям и ключевым словам.
computed: {
filteredByAll() {
return getByCategory(getByKeyword(this.list, this.keyword), this.category)
},
filteredByKeyword() {
return getByKeyword(this.list, this.keyword)
},
filteredByCategory() {
return getByCategory(this.list, this.category)
},
filteredByThing() {
return getByThing(this.list, this.thing)
}
}
Мои стандартные функции JS
function getByKeyword(list, keyword) {
const search = keyword.trim()
if (!search.length) return list
return list.filter(item => item.name.indexOf(search) > -1)
}
function getByCategory(list, category) {
if (!category) return list
return list.filter(item => item.category === category)
}
function getByThing(list, thing) {
if (!thing) return list
return list.filter(item => item.thing === thing)
}
Я пытаюсь обернуть голову вокруг функциональных вещей, но пытаюсь понять, что я прочитал.
2 ответа
Решение
Это должно сделать это:
filteredByAll() {
return getByThing(getByCategory(getByKeyword(this.list, this.keyword), this.category), this.thing)
},
Когда мы переписываем функции в версию с карри и последний аргумент является списком, мы можем составить их следующим образом:
const trippleFilter = (keyword, category, thing) => pipe (
getByKeyword (keyword),
getByCategory (category),
getByThing (thing)
)
Рабочий код
const pipe = (...fns) => fns.reduce((f, g) => (...args) => g(f(...args)))
const getByKeyword = keyword => list => {
const search = keyword.trim()
return !search.length
? list
: list.filter(item => item.name.indexOf(search) > -1)
}
const getByCategory = category => list =>
!category
? list
: list.filter(item => item.category === category)
const getByThing = thing => list =>
!thing
? list
: list.filter(item => item.thing === thing)
const trippleFilter = (keyword, category, thing) => pipe (
getByKeyword (keyword),
getByCategory (category),
getByThing (thing)
)
const x = [
{
name: 'pizza',
category: 'fastfood',
thing: 'pizza salami'
},
{
name: 'burger',
category: 'fastfood',
thing: 'hamburger'
}
]
console.log(trippleFilter ('pizza', 'fastfood', 'pizza salami') (x))