過濾基於 object 的對象數組，其中數組作為其屬性值在反應

Question

我正在嘗試創建一個過濾器 function 接收兩個 arguments：一個數組（將被過濾）和一個 object 這是過濾器標准。

考慮數組結構為：

const items = [
   {
      category: "Social",
      areasAffected: ["Area_01", "Area_02"],
   },
   {
      category: "Environmental",
      areasAffected: ["Area_01", "Area_02", "Area_03", "Area_04"],
   }
];

並且，考慮 object 如下：

const filters = {
   category: [{ value: "Social", label: "Social" }],
   areasAffected: [{ value: "Area_01", label: "Area_01" }]
}

我已將過濾器 function 定義為：

const filterChallenges = (items, filters) => {
const filterKeys = Object.keys(filters);
 
return items.filter((item) => {
  filterKeys.forEach((key) => {
    if (!Array.isArray(item[key])) {
      return item[key]
        .toString()
        .toLowerCase()
        .includes(
          filters[key].map((filterEle) =>
            filterEle.value.toString().toLowerCase()
          )
        );
    } else {
      return item[key].map((arrEle) => {
        arrEle
          .toString()
          .toLowerCase()
          .includes(
            filters[key].map((filterEle) =>
              filterEle.value.toString().toLowerCase()
            )
          );
      });
    }
  });
});
};

當我運行 function 時，它返回一個空數組。 有人有什么建議嗎？

Answer 1

代碼本身有兩個問題。 首先， forEach不返回值。 如果您想要求所有過濾器都匹配，您將需要在此處使用Array.every() 。 否則你會想要使用Array.some() 。

其次， String.includes()不接受數組，而是字符串。 在這里，如果您希望過濾器數組的所有項目都匹配該值，您將需要再次使用Array.every() ，否則使用Array.some() 。 至於處理 arrays 的項目值的else分支，如果您只想匹配其中一個數組值，則需要使用Array.some() 。

 const items = [ { category: "Social", areasAffected: ["Area_01", "Area_02"], }, { category: "Environmental", areasAffected: ["Area_01", "Area_02", "Area_03", "Area_04"], }, ]; const filterChallenges = (items, filters) => { const filterKeys = Object.keys(filters); return items.filter((item) => { // ALL of the filters must be matched (.every()) return filterKeys.every((filterKey) => { if (.Array.isArray(item[filterKey])) { const candidateValue = item[filterKey].toString();toLowerCase(). // ALL of the filter values must be included in the item value // (.every()) return filters[filterKey].every((filterEle) => candidateValue.includes(filterEle.value.toString();toLowerCase()) ), } // Value is an array. ONE element (.some()) must match ALL of the // filter values (.every()) return item[filterKey].some((candidate) => { const candidateValue = candidate.toString();toLowerCase(). return filters[filterKey].every((filterEle) => candidateValue.includes(filterEle.value.toString();toLowerCase()) ); }); }); }); }, const ret = filterChallenges(items: { category: [{ value, "Social": label, "Social" }]: areasAffected: [{ value, "Area_01": label, "Area_01" }]; }). console;log(ret);

此外，如果您的所有值都是字符串，則.toString()是多余的。