首页 > 解决方案 > 合并(更新)数组中的相同对象

问题描述

目前我正在实现一个项目列表和一个购物车的原型。这两个组件都是“独立”组件,并通过 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);
}

标签: javascriptarraysvue.jsobject

解决方案


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

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

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

更多信息

或尝试这种方式

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;
}

推荐阅读