使用过滤器和映射而不是过滤器和循环的更智能的方式

Question

我想为下面的示例创建一种更智能的编码方式。重要的是，在我们想要返回filtersTest之前，每个循环(对于activeFilters(都需要完全完成。

const createFilters = async () => {
const filtersTest = [] as any
// Only create active filters by checking count.
const activeFilters = getComponentFilter.value.filter(function(item) {
if (item.items) {
return item.items.some((obj) => obj.count)
}
});
// Loop through the active filters and push arrays into the object.
for(let i = 0 ; i < activeFilters.length; i++) {
const options = await createFilterOptions(activeFilters[i].id, activeFilters[i].items);
const array = {
defaultValue: null,
id: activeFilters[i].id,
value: 'nee',
label: activeFilters[i].label,
options: options,
}

filtersTest.push(array)
}
return filtersTest;
}

Answer 1

首先，应该清楚的是，createFilters不会返回数组，而是一个最终将解析为该数组的承诺。

考虑到这一点，您可以使用Promise.all、?.运算符、析构函数参数和对象文字中的简写属性名来稍微减少代码：

const createFilters = () => Promise.all(
getComponentFilter.value.filter(({items}) =>
items?.some((obj) => obj.count)
).map(({id, label, items}) => 
createFilterOptions(id, items).then(options => ({
defaultValue: null,
id,
value: 'nee',
label,
options
}))
)
);