如何根據兩個過濾器過濾對象數組？

Question

所以，我有這個對象數組：

const myArr = [{
  name: 'A',
  type: 1,
  subtype: 1
},
{
  name: 'B',
  type: 1,
  subtype: 2
},
{
  name: 'C',
  type: 2,
  subtype: 3
},
{
  name: 'D',
  type: 3,
  subtype: 1,
}];

然后我有兩個變量，每個變量都有一個 ID。 這些是typeId和subtypeId 。 這些可以是與上面數組中的類型和子類型匹配的數值，也可以是-1 ，表示“全部”。

因此，我將展示一些情況以及過濾器應返回的內容：

type: 1 | subtype: 1 --> A
type: -1 | subtype: -1 --> ABCD
type: 1 | subtype: -1 --> AB
type: 2 | subtype: 3 --> C
type: 2 | subtype: 2 --> nothing
type: 3 | subtype: 1 --> D

你明白了。

const filteredData = data.filter(item => {
    const { typeId, subtypeId } = getCurrentFilterIds();

    if(typeId === -1) return true;
    if(typeId !== -1){
      if(subtypeId === -1) return item.type === typeId;
      if(subtypeId !== -1) return item.type === typeId && item.subtype === subtypeId;
    }
  });

我想出了這個 function 但也許有更好的方法？

Answer 1

如評論中所述，您不想為列表中的每個項目調用 getCurrentFilterIds() 。 所以這應該移到過濾器 function 之外。

你的 ifs 有點多余和不必要。 您可以改用 if-else。 但在這種情況下，由於如果第一個語句為真，您將返回一個值，因此也不需要 else 語句。 所以你可以簡單地做：

const { typeId, subtypeId } = getCurrentFilterIds();
const filteredData = data.filter(item => {
    if (typeId === -1) return true;
    if (subtypeId === -1) return item.type === typeId;
    return item.type === typeId && item.subtype === subtypeId;
});

您甚至可以更進一步 go 並在一行中返回結果並擺脫所有 ifs。

const { typeId, subtypeId } = getCurrentFilterIds();
const filteredData = data.filter(item => {
    return (typeId === -1) || ((item.type === typeId) && (subtypeId === -1 || item.subtype === subtypeId));
});

Answer 2

您可以直接將條件作為表達式而不是使用if語句。

 const filter = (array, typeId, subtypeId) => array.filter(o => typeId === -1 || o.type === typeId && (subtypeId === -1 || o.subtype === subtypeId) ), data = [{ name: 'A', type: 1, subtype: 1 }, { name: 'B', type: 1, subtype: 2 }, { name: 'C', type: 2, subtype: 3 }, { name: 'D', type: 3, subtype: 1 }]; console.log(filter(data, 1, 1)); // A console.log(filter(data, -1, -1)); // AB C D console.log(filter(data, 1, -1)); // AB console.log(filter(data, 2, 3)); // C console.log(filter(data, 2, 2)); // [] console.log(filter(data, 3, 1)); // D

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

Answer 3

對屬性的檢查與對給定x的type或subtype的檢查相同：

• 如果x為 -1，則任何屬性值都可以
• 否則屬性值必須等於x

因此，我們可以將其形式化：

const propCheck = (k, x) => o => x === -1 ? true : o[k] === x;
//                 ^  ^     ^  
//                 1  2     3

// 1: property name e.g. 'type' or 'subtype'
// 2: x e.g. -1 or 2
// 3: the object to read the property from

我們可以編寫一個 function and它接受兩個函數，然后是一個值，將兩個函數應用於它，如果兩者都這樣做，則返回 true：

const and = (f, g) => x => f(x) && g(x);

獲取您的typeId和subtypeId並將它們傳遞給相應的propCheck調用。 例如

myArr.filter(and(propCheck('type', 2), propCheck('subtype', 3)));
//=> [{name: "C", type: 2, subtype: 3}]

myArr.filter(and(propCheck('type', 2), propCheck('subtype', 2)));
//=> []

myArr.filter(and(propCheck('type', 1), propCheck('subtype', -1)));
//=> [ {name: "A", type: 1, subtype: 1}
//=> , {name: "B", type: 1, subtype: 2}]