如何在 JavaScript 中實現一個函數來消除對象數組中的冗余對象？

Question

因此，我正在嘗試實現一個函數，該函數允許我在具有 3 個屬性的 JS 對象內存儲本地沙發的詳細信息：

• 一個 ID （通過一個函數被產品的 URL 覆蓋）

• 顏色（通過事件監聽器恢復）

• 數量（以與顏色相同的方式恢復）

我已經有了允許我使用數組在本地存儲對象的功能：

function addedToCart(productObject) {
  let listOfProducts = getProducts();
  listOfProducts.push(productObject);
  registerProducts(listOfProducts);
}


function getProducts() {
  let listOfProducts = localStorage.getItem("listOfProducts");
  if (listOfProducts == null) {
    return [];
  } else {
    return JSON.parse(listOfProducts);
  }
}

function registerProducts(listOfProducts) {
  localStorage.setItem("listOfProducts", JSON.stringify(listOfProducts));
}

最后，我有 3 個事件監聽器：

1. 在用戶選擇選項時進行監聽並獲取顏色的值
2. 監聽<input type="number"/>的變化，獲取數量的值
3. 當用戶點擊“添加到購物車”按鈕時收聽

這是我在 JS 中的代碼

class classProductCartDetails {
  constructor(id, color, quantity) {
    this.id = id;
    this.color = color;
    this.quantity = quantity;
  }
}

let quantityProduct = document.getElementById("quantity");
let valid = true;

let colorValue = 0;
let quantityValue = 0;


itemColors.addEventListener("change", function (event) {
  colorValue = event.target.value;
  console.log(colorValue);
});



quantityProduct.addEventListener("input", function (event) {
  quantityValue = event.target.value;
  console.log(quantityValue);
});






addToCartButton.addEventListener("click", function () {
  if (quantityValue > 0 && quantityValue <= 100 && colorValue != 0) {
    let objectProduct = new classProductCartDetails(
      productId,
      colorValue,
      quantityValue
    );

    console.table(objectProduct);

    alert("Your product has been added to the cart!");
    addedToCart(objectProduct);
  }
  if(colorValue == 0 && quantityValue <= 0){
alert("WARNING! You must add the details of the product");
  }
else if (colorValue == 0) {
    alert("WARNING! You must add a color");
}
 else if (quantityValue <= 0) {
    alert("WARNING! The quantity inputted is invalid");
  }
  
});

問題？ 如果我只是在“添加到購物車”按鈕上單擊兩次，或者如果我更改沙發的數量然后單擊按鈕，它將向數組中添加一個冗余的新對象實例！

[{id: "107fb5b75607497b96722bda5b504926", color: "White", quantity: "1"},…]
0: {id: "107fb5b75607497b96722bda5b504926", color: "White", quantity: "1"}
1: {id: "107fb5b75607497b96722bda5b504926", color: "Blue", quantity: "1"}
2: {id: "107fb5b75607497b96722bda5b504926", color: "Blue", quantity: "1"}
3: {id: "107fb5b75607497b96722bda5b504926", color: "Blue", quantity: "2"}

如您所見，我們有 3 次相同的對象，2 次相同，1 次具有不同的數量。

我想實現一個函數，允許我單獨檢查一個對象的 ID、顏色和數量與數組中另一個對象的 ID、顏色和數量。

有了這些條件：

• 如果 ID、Color 和 Quantity 相同 → 刪除有問題的冗余對象

• 如果只有 ID 和 Color 相同，但數量是
  不同→將非冗余的數量值替換為冗余對象上的最新值並刪除冗余對象

例如，第一個對象具有第二個對象的屬性，然后是第三個對象……然后是第二個對象與第一個對象，第二個對象與第三個對象……依此類推，直到數組的最后一個對象。

英語不是我的母語，所以你可能不明白我的意思，但不用擔心，所以這里是這張照片的視覺表示： Also TD:DR

圖中的話：

-沒有冗余

-檢測到冗余：

1. 刪除了索引為 2 和 3 的對象

2. 將索引為 1 的對象的數量從 1 更改為 2

這將是本地存儲上 JSON 的結果：

[{id: "107fb5b75607497b96722bda5b504926", color: "White", quantity: "1"},…]
0: {id: "107fb5b75607497b96722bda5b504926", color: "White", quantity: "1"}
1: {id: "107fb5b75607497b96722bda5b504926", color: "Blue", quantity: "2"}

我已經看過一些關於如何刪除數組中冗余對象的帖子，但它們是靜態數組

是否可以實現這樣的功能（通過遞歸或迭代）？ 是不是太牽強了？ 有沒有更簡單的方法來擺脫數組中的冗余對象？

任何幫助，將不勝感激

順便說一句，如果您對我的代碼有任何建議或對我的代碼有任何疑問，請不要猶豫！

Answer 1

你可以做

function addedToCart(productObject) {
  let listOfProducts = getProducts();
  listOfProducts = listOfProducts.filter(({productId, colorValue})=> {
    return !(productId == productObject.productId && colorValue == productObject.colorValue);
  })
  listOfProducts.push(productObject);
  registerProducts(listOfProducts);
}

這樣，如果 productId 和 colorValue 相同，則從列表中刪除前一個條目。 它將被新的 productObject 替換。 數量是否相同並不重要：在所有情況下，您都希望從 productObject 中獲取數量。

Answer 2

所以我實際上找到了一個解決方案：

  let verifyProducts = (objectToVerify, arrayOfObjects) => {
    let verifyProduct = arrayOfObjects.find((object) => { 
    const {id, color} = objectToVerify;

   object.id === id && object.color === color
    }); 
  
    if(verifyProduct){
      verifyProduct.quantity = Number(objectToVerify.quantity);
    }else{
      arrayOfObjects.push(objectToVerify);
    }
  }

Answer 3

給你...將你的數組傳遞給函數，函數將返回一個刪除了冗余對象的數組。

我們基本上從索引 0 開始遍歷數組（所以最舊的條目在前）。

對於我們檢查的每個索引，我們當前對象的 id 和顏色的組合是否存在於數組中更遠的位置（如果為 true，則意味着以下兩種情況之一：

• 它存在一個對象，具有相同的 id、顏色和數量
• 或存在具有相同 id 和顏色但數量不同的對象

由於我們只比較比我們當前對象“新”的對象，這兩種情況都意味着我們當前索引處的對象是多余的......所以我們只是刪除它。

在我們的循環之后，我們通過刪除所有那些現在未定義的索引來整理我們的數組

如果您要從一開始就實現該代碼並在每次添加新對象時都使用它，那么您只需檢查最后一個對象即可

 const arr = [{id : 1, color : "black", quantity: 1}, {id : 1, color : "black", quantity: 1}, {id : 1, color : "black", quantity: 2}, {id : 2, color : "black", quantity: 1}]; function getRidOfRedundant(arr) { let newArr = [...arr] //creating shallow copy of arr let compare = newArr.map(x => x.id + x.color); for (let i = 0; i < compare.length; i++) { if(compare.includes(compare[i], i + 1)) { delete (newArr[i]) } } return newArr.filter(x => x !== undefined) } console.log(getRidOfRedundant(arr))

也有可能直接干預對象的創建。 在構造函數中有一個條件，當 id 和 color 相同時替換數組中的對象（我在這里使用類的靜態屬性，因為在構造函數中使用“外部”變量/對象可能有點粗略） - 不知道這將如何與您的 localStorage 內容交互/工作

你也可以從構造函數中獲取邏輯內容並創建一個函數，它基本上做同樣的事情（找到現在冗余對象的索引並用新創建的對象覆蓋它）

 class Product { static memory = []; static objects = [] constructor(id, color, quantity) { this.id = id; this.color = color; this.quantity = quantity; if (Product.memory.includes(id + color)) { Product.objects[Product.memory.indexOf(id + color)] = this; } else { Product.memory.push(id + color); Product.objects.push(this); } } } new Product(id, color, quantity)