Question

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

如果过滤器对象具有“ isFiltered”为true，则应进行过滤。
PatternGroupCode“ OTHER”表示它包括除那些之外的所有结构面料标记为“ isFiltered”为假。
相同的“ 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为每个过滤器迭代过滤产品（从整个产品数组作为初始累加器开始，并在应用每个过滤器后返回过滤后的版本）。

此外，由于您愿意修改对象的结构，因此我进行了一些小更改（将产品中的id键中的fabricColor删除，并将其添加到{{ 1}}过滤器对象）只是为了保持一致。

patternGroupCode

Answer 2

我建议简化数据结构，以使用更简化的过滤器和简化的过滤器对象。

function multiFilter(array, filters) {
    return array.filter(o =>
        Object
            .entries(filters)
            .every(([k, v]) => o[k] in v ? v[o[k]] : v.OTHER)
    );
}

var 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 }
    ],
    filters = {
        fabricColor: { BLACK: true, BLUE: false, OTHER: true },
        patternGroupCode: { PLAID: true, SOLID: true, STRIPES: false, PAISLEY: false, OTHER: true }
    },
    filtered = multiFilter(products, filters);

console.log(filtered);

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

Answer 3

假设我们将过滤产品，例如按大小。

结构

<svg display="none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                <defs>
            <symbol id="fab.fa-dev" viewBox="0 0 1024 1024">
            <title>dev</title>
            <path class="path1" d="M120.12 208.29c-3.88-2.9-7.77-4.35-11.65-4.35H91.03v104.47h17.45c3.88 0 7.77-1.45 11.65-4.35 3.88-2.9 5.82-7.25 5.82-13.06v-69.65c-.01-5.8-1.96-10.16-5.83-13.06zM404.1 32H43.9C19.7 32 .06 51.59 0 75.8v360.4C.06 460.41 19.7 480 43.9 480h360.2c24.21 0 43.84-19.59 43.9-43.8V75.8c-.06-24.21-19.7-43.8-43.9-43.8zM154.2 291.19c0 18.81-11.61 47.31-48.36 47.25h-46.4V172.98h47.38c35.44 0 47.36 28.46 47.37 47.28l.01 70.93zm100.68-88.66H201.6v38.42h32.57v29.57H201.6v38.41h53.29v29.57h-62.18c-11.16.29-20.44-8.53-20.72-19.69V193.7c-.27-11.15 8.56-20.41 19.71-20.69h63.19l-.01 29.52zm103.64 115.29c-13.2 30.75-36.85 24.63-47.44 0l-38.53-144.8h32.57l29.71 113.72 29.57-113.72h32.58l-38.46 144.8z"></path>
        </symbol>
        <symbol id="fab.fa-facebook" viewBox="0 0 1024 1024">
            <title>facebook</title>
            <path class="path1" d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"></path>
        </symbol>

                </defs>
</svg> 
			
    <svg class="icon">
        <use xlink:href="#fab.fa-dev"></use>
   	<use xlink:href="#fab.fa-facebook" transform="translate(100,0)"></use>
			
    </svg>

功能

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

如何使用ES2016在不同条件下过滤阵列？

3 个答案: