合并（更新）数组中的相同对象

Question

目前我正在实现一个项目列表和一个购物车的原型。这两个组件都是“独立”组件，并通过 vuex-store 连接。 项目列表有不同的元素，我可以将它们添加到我的购物车中以不同的数量。通过添加一个项目，该项目将作为一个带有一些信息（id、名称、数量等）的对象推送到一个名为“products”的数组中。该对象将在购物车内呈现。 现在的主要问题是，如果我在购物车中添加一个数量为“1”的元素，一切正常，但如果我现在想添加数量为“4”的相同元素，这将是“正确”添加到购物车，但因为它与之前的元素相同，我只想更新数量，因此当然是第一个元素的价格。因此，当我将一个元素添加到我的购物车中时，必须进行检查，以确保如果存在相同的元素（可能基于 id），它将合并相同的对象。我希望我的问题很清楚：D

我将元素添加到数组的函数如下：

addToBasket(key) {
          if (this.products[key].qty >= 1) {
            this.$store.commit('addProduct', {
              id: this.products[key].product_id,
              title: this.products[key].title,
              price: {
                value: this.products[key].price.value,
                currency: this.products[key].price.currency,
              },
              qty: this.products[key].qty
            });
          }
        }

来自商店的相应突变是这样的：

addProduct(state, payload) {
    state.products.push(payload);
}

Answer 1

我希望您将数据存储在key: value 对中，在这种情况下，键是项目名称，值是数量。

在推送新条目之前，请检查包含存储数据的变量是否已经存在您的案例“状态”中的键。如果仅存在更新值（“有效负载”）。否则同时推送状态和有效负载。

if ("key" in myObj)
{
    //Code to update payload
}
else
{
    //Code to insert key and value pair
}

More info

或者试试这个方法

function keyExists(key, search) {
        if (!search || (search.constructor !== Array && search.constructor !== Object)) {
            return false;
        }
        for (var i = 0; i < search.length; i++) {
            if (search[i] === key) {
                return true;
            }
        }
        return key in search;
    }

// How to use it:
// Searching for keys in Arrays
console.log(keyExists('apple', ['apple', 'banana', 'orange'])); // true
console.log(keyExists('fruit', ['apple', 'banana', 'orange'])); // false

// Searching for keys in Objects
console.log(keyExists('age', {'name': 'Bill', 'age': 29 })); // true
console.log(keyExists('title', {'name': 'Jason', 'age': 29 })); // false

优化的检查方式

yourObjName.hasOwnProperty(key) : 
{
//Code to add payload alone 
}
? 
{
//Code to push state and payload;
}