使用loadash或任何其他庫進行過濾的有效方法？

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

您將不得不根據您的具體情況進行調整（同樣，因為您提供的示例輸入與您編寫的代碼不同），但這是一般的模式。