javascript - 合并(更新)数组中的相同对象
问题描述
目前我正在实现一个项目列表和一个购物车的原型。这两个组件都是“独立”组件,并通过 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);
}
解决方案
我希望您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;
}
推荐阅读
- sql - 从表中检索 COUNT(*) 不一致
- riscv - 在 RISC-V 中访问硬件性能计数器
- javascript - PHP SQL 帖子部分
- node.js - mongo db atlas 中的连接是什么?
- android - (Android) 意外匹配 Pattern.compile("\\w+") 与 unicode 字母
- terraform - Terraform 如何向使用 cloudwatch 配置的 SQS 发送消息
- reactjs - React native:如何从不同的屏幕运行课程
- python - 使用滑动窗口将链接分成块
- sql - MS Access 查询中计算字段的奇怪行为
- git - “可以从指定的提交访问其提交的标签”是什么意思?