如何使用筛选器设置筛选数组

Question

我被Array、对象和过滤器卡住了。我有以下代码，我想用我的过滤器设置过滤(数组)列表。然后用它做点什么。我用React作为框架。但我认为这是纯Javascript。

我的方向对吗？

filterSettings = { flagA: false, flagB: true, FlagC: true};
list = [
{flag: a, txt: 'some text1'},
{flag: a, txt: 'some text2'},
{flag: b, txt: 'some text3'},
{flag: b, txt: 'some text4'},
{flag: c, txt: 'some text5'},
{flag: c, txt: 'some text6'},
] 
list.filter(
// if(filtersettings.a === true) show flags with a 
//else{hide flags with a}
// if(filtersettings.b === true) show flags with b 
//else{hide flags with b}
///...ect
).map((item)=>{
console.log(item);
});

Answer 1

如果使filterSettings键与标志值相对应，则可以使用filterSettings值(这是一个布尔值)作为过滤器的测试：

let filterSettings = { a: false, b: true, c: true};
let list = [
{flag: 'a', txt: 'some text1'},
{flag: 'a', txt: 'some text2'},
{flag: 'b', txt: 'some text3'},
{flag: 'b', txt: 'some text4'},
{flag: 'c', txt: 'some text5'},
{flag: 'c', txt: 'some text6'},
] 
let filtered = list.filter( item => filterSettings[item.flag]) // filterSettings[item.flag] will be a boolean
console.log(filtered)

Answer 2

创建3个变量a、b、c来处理这三种情况，然后使用filter()

var a,b,c;
var new_list = list.filter((item)=>{
if(filterSettings.flagA==true && item.flag=="a")
{
return a.push(item);
}
else if(filterSettings.flagB==true && item.flag="b")
{
return b.push(item);
}
else(filterSettings.flagC==true && item.flag=="c")
{
return c.push(item);
}
}

要获得最终结果，请使用.length属性检查哪一个大于0

if (a.length>0){
console.log(a)
}
else if (b.length>0){
console.log(a)
}
else(c.length>0){
console.log(a)
}

Answer 3

您可以使用函数Array.prototype.filter来过滤特定对象，使用函数Array.prototype.forEach来循环过滤后的数组。

我假设您不知道函数Array.prototype.map及其用途，因为您使用的方法将返回一个具有未定义值的数组

const filterSettings = { a: false, b: true, c: true},
list = [    {flag: 'a', txt: 'some text1'},    {flag: 'a', txt: 'some text2'},    {flag: 'b', txt: 'some text3'},    {flag: 'b', txt: 'some text4'},    {flag: 'c', txt: 'some text5'},    {flag: 'c', txt: 'some text6'}],
handler = ({flag}) => filterSettings[flag];
list.filter(handler).forEach(item=> console.log(item))

.as-console-wrapper { max-height: 100% !important; top: 0; }