javascript - 如何使用 ES2016 在不同条件下过滤数组？

Question

在下面的代码片段中，我们需要根据不同的 AND 、 OR 条件过滤数组。条件

1. 如果过滤器对象的“isFiltered”为真，它应该进行过滤。
2. PatternGroupCode "OTHER"表示它包括除那些之外的所有 Fabric 织物标记为“isFiltered”错误。
3. 相同的“OTHER”条件适用于 fabricColor。

我可以使用 fabricColor id 进行过滤。但无法使用 patternGroupCode。

// all products
let products = [
  { name: "A", fabricColorGroupCodes:["OTHER"], patternGroupCode: 'PLAID', size: 50 },
  { name: "B", fabricColorGroupCodes:["BLUE"], patternGroupCode: 'WINDOWPANE', size: 60 },
  { name: "C", fabricColorGroupCodes:["OTHER", "BLUE"], patternGroupCode: 'SOLID', size: 100 },
  { name: "D", fabricColorGroupCodes:["OTHER", "BLACK"], patternGroupCode: 'PLAID', size: 70 },
  { name: "E", fabricColorGroupCodes:["BLACK"], patternGroupCode: 'WINDOWPANE', size: 80 },
  { name: "F", fabricColorGroupCodes:["BLACK"], patternGroupCode: 'SOLID', size: 100 },
  { name: "G", fabricColorGroupCodes:["GREEN"], patternGroupCode: 'PLAID', size: 90 },
  { name: "H", fabricColorGroupCodes:["GREEN"], patternGroupCode: 'SOLID', size: 100 },
  { name: "I", fabricColorGroupCodes:["GREEN"], patternGroupCode: 'WINDOWPANE', size: 80 },
 { name: "J", fabricColorGroupCodes:["GREEN"], patternGroupCode: 'PAISLEY', size: 80 }
];

function multiFilter(array, filters) {
  return array.filter(d => ( 
    Object.entries(filters).every(([k ,v]) => (
      Object.values(v).map(m => m.id).includes(d[k].id) 
    )) 
  ));
}

// filter conditions
// here we choose OTHER so it will filter on color BLACK and GREEN and 
// omit the BLUE because isFilter tag is false, same for patternGroupCode.
// so here it filter on SOLID , PLAID and WINDOWPANE and will omit PAISLEY .
let filters = {
  fabricColor: [
    {"id": 'BLACK', "isFiltered": true}, 
    {"id": 'BLUE', "isFiltered": false},
    {"id": 'OTHER', "isFiltered": true}
  ], 
  patternGroupCode: [
    {"patternGroupCode": 'OTHER', "isFiltered": true}, 
    {"patternGroupCode": 'STRIPES', "isFiltered": false}, 
    {"patternGroupCode": 'PLAID', "isFiltered": true}, 
    {"patternGroupCode": 'PAISLEY', "isFiltered": false}, 
    {"patternGroupCode": 'SOLID', "isFiltered": true}
  ]
};

var filtered = multiFilter(products, filters);
console.log(filtered);

Answer 1

您可以使用 reduce 为每个过滤器迭代过滤产品(从整个产品数组作为初始累加器开始，并在应用每个过滤器后返回过滤后的版本)。

此外，由于您对修改对象的结构持开放态度，我继续进行一些小改动(从产品中的 fabricColor 键中删除 id 和将其添加到 patternGroupCode 过滤器对象)只是为了保持一致。

function multiFilter(array, filters) {
  return Object.entries(filters).reduce((acc, [k, kFilters]) => {
    let isFiltered = new Set(kFilters.filter(f => f.isFiltered).map(f => f.id)),
      other = kFilters.some(f => f.id === 'OTHER' && f.isFiltered),
      notFiltered = new Set(kFilters.filter(f => !f.isFiltered).map(f => f.id));
    return acc.filter(p => other ? !notFiltered.has(p[k]) : isFiltered.has(p[k]));
  }, array);
}


let products = [{
    name: "A",
    fabricColor: 'BLUE',
    patternGroupCode: 'PLAID',
    size: 50
  },
  {
    name: "B",
    fabricColor: 'BLUE',
    patternGroupCode: 'WINDOWPANE',
    size: 60
  },
  {
    name: "C",
    fabricColor: 'BLUE',
    patternGroupCode: 'SOLID',
    size: 100
  },
  {
    name: "D",
    fabricColor: 'BLACK',
    patternGroupCode: 'PLAID',
    size: 70
  },
  {
    name: "E",
    fabricColor: 'BLACK',
    patternGroupCode: 'WINDOWPANE',
    size: 80
  },
  {
    name: "F",
    fabricColor: 'BLACK',
    patternGroupCode: 'SOLID',
    size: 100
  },
  {
    name: "G",
    fabricColor: 'GREEN',
    patternGroupCode: 'PLAID',
    size: 90
  },
  {
    name: "H",
    fabricColor: 'GREEN',
    patternGroupCode: 'SOLID',
    size: 100
  },
  {
    name: "I",
    fabricColor: 'GREEN',
    patternGroupCode: 'WINDOWPANE',
    size: 80
  },
  {
    name: "I",
    fabricColor: 'GREEN',
    patternGroupCode: 'PAISLEY',
    size: 80
  }
];

let filters = {
  fabricColor: [{
    "id": 'BLACK',
    "isFiltered": true
  }, {
    "id": 'BLUE',
    "isFiltered": false
  }, {
    "id": 'OTHER',
    "isFiltered": true
  }],
  patternGroupCode: [{
      "id": 'OTHER',
      "isFiltered": true
    },
    {
      "id": 'STRIPES',
      "isFiltered": false
    },
    {
      "id": 'PLAID',
      "isFiltered": true
    },
    {
      "id": 'PAISLEY',
      "isFiltered": false
    },
    {
      "id": 'SOLID',
      "isFiltered": true
    }
  ]
};

var filtered = multiFilter(products, filters);
console.log(filtered);