Question

每当选中复选框时，我都会过滤数组。共有7个复选框，每个复选框与一个对象相关联。

这是我的代码，

 if (this.deliveryConcession[0].checked) {
            this.allItems = this.allItems.filter(fil => fil.deliveryconcession.readytoship === this.deliveryConcession[0].checked);
        }
        if (this.deliveryConcession[1].checked) {
            this.allItems = this.allItems.filter(fil => fil.deliveryconcession.instantdownload === this.deliveryConcession[1].checked);
        }
        if (this.deliveryConcession[2].checked) {
            this.allItems = this.allItems.filter(fil => fil.deliveryconcession.unespecifiedshipment === this.deliveryConcession[2].checked);
        }
        if (this.seatConcession[0].checked) {
            this.allItems = this.allItems.filter(fil => fil.seatingConcession.parking === this.seatConcession[0].checked);
        }
        if (this.seatConcession[1].checked) {
            this.allItems = this.allItems.filter(fil => fil.seatingConcession.restrictedview === this.seatConcession[1].checked);
        }
        if (this.seatConcession[2].checked) {
            this.allItems = this.allItems.filter(fil => fil.seatingConcession.wheelchair === this.seatConcession[2].checked);
        }
        if (this.seatConcession[3].checked) {
            this.allItems = this.allItems.filter(fil => fil.seatingConcession.alcoholFree === this.seatConcession[3].checked);
        }

这是我的过滤器对象，

  seatConcession = [
        { id: 1, name: 'Parking pass included', checked: false },
        { id: 2, name: 'Unrestricted view', checked: false },
        { id: 3, name: 'Wheel chair accessible', checked: false },
        { id: 4, name: 'Without age restrictions', checked: false }
    ];
    deliveryConcession = [
        { id: 1, name: 'Ready to ship(paper)', checked: false },
        { id: 2, name: 'Instant download(e-ticket)', checked: false },
        { id: 3, name: 'Unspecified shipment(paper)', checked: false }
    ];

如何使用简单的loadash过滤器或其他方式改进上述内容？

Answer 1

let keys = [
  ["readytoship", "deliveryConcession"],
  ["instantdownload", "deliveryConcession"],
  /* and so on, make sure to order */
];

this.allItems.filter(item => {
  return keys.every((arr, i) => {
    let [k, attr] = arr;
    return item[attr][k] === this[attr][i].checked;
  });
});

您需要适当地订购密钥数组。但现在它是一个双线。除了let和箭头函数之外，这都是有效的ES 5，不需要lodash。

修改

由于你还没有真正发布相关代码，所以在黑暗中这仍然是一种刺痛，但是你的样本输入是

seatConcession = [
        { id: 1, name: 'Parking pass included', checked: false },
        { id: 2, name: 'Unrestricted view', checked: false },
        { id: 3, name: 'Wheel chair accessible', checked: false },
        { id: 4, name: 'Without age restrictions', checked: false }
];
deliveryConcession = [
        { id: 1, name: 'Ready to ship(paper)', checked: false },
        { id: 2, name: 'Instant download(e-ticket)', checked: false },
        { id: 3, name: 'Unspecified shipment(paper)', checked: false }
];

假设您有一个列表，其中选中的复选框的排序方式与对象的顺序相同

let checked = [true, false, true, true, false /* etc */];

你想做这样的事情：

let filtered = seatConcessions
  .concat(deliveryConcession)
  .filter((obj, i) => checked[i]);

您必须根据具体情况进行调整（同样，因为您提供的示例输入与您编写的代码不同），但这是一般性的模式。

使用loadash或任何其他库进行过滤的有效方法？

1 个答案:

修改