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

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]);

您必须根据您的具体情况进行调整(同样，因为您提供的示例输入与您编写的代码不同)，但这是一般情况下执行此操作的一种模式。