如何返回一個數組中的數據被另一個數組過濾后的列表

Question

我從兩個不同的API接收兩個數組。 其中一個具有“項目”的完整列表，另一個是其中一些“項目”的列表。 在現實生活中，它可能就像“我已經從所有我需要打包的物品中打包的物品”。 因此，我需要返回打包物品的列表以及所有剩余物品的列表（完整列表減去已經打包的列表）。

const packedItems = [
  {
  "id": 03,
  "name": "Car",
    "color": {
      "inside": "grey",
      "outside": "blue"
    }
  },{
  "id": 07,
  "name": "Bike",
    "color": {
      "inside": null,
      "outside": "blue"
    }
  },
]

const allItems = [
  {
  "id": 01,
  "name": "Skateboard",
    "color": {
      "inside": "grey",
      "outside": "brown"
    }
  },{
  "id": 02,
  "name": "TV",
    "color": {
      "inside": "multiclolor",
      "outside": "black"
    }
  },{
  "id": 03,
  "name": "Car",
    "color": {
      "inside": "grey",
      "outside": "blue"
    }
  },{
  "id": 04,
  "name": "Pan",
    "color": {
      "inside": "grey",
      "outside": "black"
    }
  },{
  "id": 05,
  "name": "T-shirt",
    "color": {
      "inside": null,
      "outside": "white"
    }
  },{
  "id": 06,
  "name": "Helmet",
    "color": {
      "inside": "black",
      "outside": "black"
    }
  },{
  "id": 07,
  "name": "Bike",
    "color": {
      "inside": null,
      "outside": "blue"
    }
  },{
  "id": 08,
  "name": "Dryer",
    "color": {
      "inside": "white",
      "outside": "white"
    }
  },
]

預期有兩個HTML UL：一個帶有已經打包的項目，另一個帶有需要打包的剩余項目。

Answer 1

我會將您的打包物品列表轉換為簡單的ID列表。 然后，您可以相當簡單地過濾allItems列表。

const packedItemIds = packedItems.map(item => item.id);
const remainingItems = allItems.filter(item => {
  return !packedItemIds.some(id => id === item.id);
});

Answer 2

因此，您要根據ID是否包含在打包項目列表中，將數組分為兩組。 我建議編寫一個函數，該函數根據任意謂詞對數組進行分區，並將確定要測試的元素在特定列表中是否具有id的謂詞傳遞給它。 它可能看起來像這樣：

 const partition = (fn, xs) => xs .reduce ( ([yes, no], x) => fn (x) ? [ [...yes, x], no ] : [ yes, [...no, x] ], [ [], [] ] ) const hasId = (xs) => ({id}) => xs .some ( ({id: pid}) => id === pid ) const partitionItems = (yes) => (maybe) => partition (hasId (yes), maybe) const allItems = [{"color": {"inside": "grey", "outside": "brown"}, "id": 1, "name": "Skateboard"}, {"color": {"inside": "multiclolor", "outside": "black"}, "id": 2, "name": "TV"}, {"color": {"inside": "grey", "outside": "blue"}, "id": 3, "name": "Car"}, {"color": {"inside": "grey", "outside": "black"}, "id": 4, "name": "Pan"}, {"color": {"inside": null, "outside": "white"}, "id": 5, "name": "T-shirt"}, {"color": {"inside": "black", "outside": "black"}, "id": 6, "name": "Helmet"}, {"color": {"inside": null, "outside": "blue"}, "id": 7, "name": "Bike"}, {"color": {"inside": "white", "outside": "white"}, "id": 8, "name": "Dryer"}] const packedItems = [{"color": {"inside": "grey", "outside": "blue"}, "id": 3, "name": "Car"}, {"color": {"inside": null, "outside": "blue"}, "id": 7, "name": "Bike"}] console .log ( partitionItems (packedItems) (allItems) ) 

這里的partition是一個明顯可重用的函數， hasId也可能可重用。

每個函數都很簡單，並且每個函數僅執行一項工作。