javascript - 检查数组以找到相等的 id

Question

我有一个产品列表，例如:

listOfProducts = [{name: "prod1", productId: 1}, {name:"prod2", productId: 2},.....]

如果我选择一个产品，我将填充数组

listSelectedProducts

它将包含所选的产品。

我发了一篇文章来保存我的选择。

现在，如果我返回产品页面，我将得到一个数组:

oldProductsArray

其中包含我保存在数据库中的产品。

listSelectedProducts

与我选择的产品。

现在，如果我删除所选产品以选择另一个产品，我的 oldProductsArray 将选择第一个产品，但 listSelectedProducts 将选择新产品。

所以现在我应该从数据库中删除我不再想要的产品(它位于 oldProductsArray 中)。所以我想比较(我有我的问题)两个数组，如果 oldProductsArray 中的元素不在 listSelectedProducts 中，我将创建一个新数组，其中包含未选择的产品以删除它们。

让我们举个例子:

我在我的产品页面中选择了一个产品。

所以listSelectedProducts = [{name: "prod1", ProductId: 1}]

我会在数据库中发布。

我返回产品页面，这次我有:

listSelectedProducts = [{name: "prod1", productId: 1}]
oldProductsArray = [{name: "prod1", productId: 1}]

我取消选择产品:prod1 并选择产品:prod2

所以我有:

listSelectedProducts = [{name: "prod2", productId: 2}]
oldProductsArray = [{name: "prod1", productId: 1}]

现在我应该检查 oldProductsArray 中的产品是否也在 listSelectedProducts 中，如果是，我可以发布帖子，如果不是(就像在本例中)，我应该从数据库中删除该产品。

所以我有一个功能:

this.checkOldProduct(oldProductsArray, listSelectedProducts)

在此函数中:

checkOldProduct(oldProductsArray, listSelectedProducts){
let arrayProductToDelete = []
// i have tried like this, but it doesn't work properly.
listSelectedProducts.filter(p1 => !oldProducts.some(p2 => { p1.productId === p2.productId, arrayProductToDelete.push(p2) }));
}

我希望我已经表达得很好，无论如何我准备补充说明。谢谢

Answer 1

首先快速考虑一下:

1. 如果这确实是产品列表的所有数据，您可能应该在 API 上使用 PUT 方法，然后简单地替换整个列表，而无需计算差异
2. 如果您仍然需要进行单独的操作来更新产品列表，我想您应该发出 POST 请求来添加新项目，DELETE 请求来删除项目，以及 PATCH 请求更新单个项目(例如相同的 ID，但数量不同？)
3. 从上面的观点来看:你们还有商品的数量吗？

问题具体答案

因此，仅根据您的问题，我认为最简单的方法是找到要删除的项目列表，如下所示:

const removedItems = oldArray.filter((old) => !newArray.find((_new) => old.id === _new.id));

并请求删除它们。

完整差异答案

如果您想计算图表项目的完整差异，以便可以发出多个更新请求，您可以执行以下操作:

function arrayDiff(oldArray, newArray) {
  const addedAndUpdatedItems = newArray.reduce((diff, item, index, array) => {
    const oldItem = oldArray.find((old) => old.id === item.id);
    if(!oldItem) {
      diff.added.push(item);
    } else if(oldItem.quantity !== item.quantity) {
      diff.updated.push(item);
    }
    return diff;
  }, {
    added: [],
    updated: []
  });
  const removedItems = oldArray.filter((old) => !newArray.find((_new) => old.id === _new.id));
  return {
    ...addedAndUpdatedItems,
    removed: removedItems
  }
}

const oldArray = [{ name: "prod1", id: 1, quantity: 1 }, { name: "prod3", id: 3, quantity: 4 }];
const newArray = [{ name: "prod1", id: 1, quantity: 3 }, { name: "prod2", id: 2, quantity: 3 }];

const diff = arrayDiff(oldArray, newArray);

console.log({ diff });

输出为

{
    "added": [
        {
            "name": "prod2",
            "id": 2,
            "quantity": 3
        }
    ],
    "updated": [
        {
            "name": "prod1",
            "id": 1,
            "quantity": 3
        }
    ],
    "removed": [
        {
            "name": "prod3",
            "id": 3,
            "quantity": 4
        }
    ]
}