javascript - 如何在不复制内容的情况下遍历已经在 map 函数中的数组
问题描述
我有以下代码和以下数组。我想遍历它们并提取一些数据,然后将它们放入最终数组中。我能够做到这一点,但内容是重复的。我尝试阅读有关 reduce 的内容,但不太了解它,并且不确定它是否是正确的解决方案。我还设置了一个 jsfiddle
https://jsfiddle.net/anders_kitson/Lcqn6fgd/
var lineItems = [{
id: 'li_1HyhAZHk5l44uIELgsMWqHqB',
object: 'item',
amount_subtotal: 7500,
amount_total: 7500,
currency: 'cad',
description: 'The Spencer',
price: [Object],
quantity: 1
},
{
id: 'li_1HyhAZHk5l44uIELeNUsiZPu',
object: 'item',
amount_subtotal: 7500,
amount_total: 7500,
currency: 'cad',
description: 'The Gertie',
price: [Object],
quantity: 1
}
]
var arr = [{
id: 'prod_IS1wY1JvSv2CJg',
object: 'product',
active: true,
attributes: [],
created: 1606248785,
description: 'Shelf Set',
images: [
'https://files.stripe.com/links/fl_test_raNEqk9ZhzX3WdQsnvXX4gFq'
],
livemode: false,
metadata: {},
name: 'The Spencer',
statement_descriptor: null,
type: 'service',
unit_label: null,
updated: 1606248785
},
{
id: 'prod_IS299dMnC13Ezo',
object: 'product',
active: true,
attributes: [],
created: 1606249543,
description: 'Shelf Set',
images: [
'https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe'
],
livemode: false,
metadata: {},
name: 'The Gertie',
statement_descriptor: null,
type: 'service',
unit_label: null,
updated: 1606249543
}
];
let productArr = [];
arr.map((item) => {
lineItems.map((line) => {
productArr.push({
image: item.images[0],
name: item.name,
price: line.amount_total,
});
});
});
console.log(productArr);
这是我得到的输出,你可以看到数组重复了这些值,我知道我已经这样编码了,我只是不知道如何修复它。
[{
image: "https://files.stripe.com/links/fl_test_raNEqk9ZhzX3WdQsnvXX4gFq",
name: "The Spencer",
price: 7500
}, {
image: "https://files.stripe.com/links/fl_test_raNEqk9ZhzX3WdQsnvXX4gFq",
name: "The Spencer",
price: 7500
}, {
image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
name: "The Gertie",
price: 7500
}, {
image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
name: "The Gertie",
price: 7500
}]
更清楚地说,这是我想要的输出
[{
image: "https://files.stripe.com/links/fl_test_raNEqk9ZhzX3WdQsnvXX4gFq",
name: "The Spencer",
price: 7500
}, {
image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
name: "The Gertie",
price: 7500
},
]
我已经尝试了以下评论中的建议
let b
arr.map((item) => {
b = lineItems.map((line) => {
return {
image: item.images[0],
name: item.name,
price: line.amount_total,
};
});
});
但它两次返回相同的
[{
image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
name: "The Gertie",
price: 7500
}, {
image: "https://files.stripe.com/links/fl_test_QPbrP76uNn4QadgcUwUnkmbe",
name: "The Gertie",
price: 7500
}]
解决方案
虽然没有直接在您的问题中表达,但您似乎正在寻找加入 javascript。我看到的与两者相关的唯一内容是产品中的“名称”和订单项中的“描述”。所以做一个循环加入。
以下是使用您的示例的一些示例代码,但仅精简到相关的内容:
var lineItems = [
{ amount_total: 7500, description: 'The Spencer' },
{ amount_total: 7500, description: 'The Gertie' }
]
var arr = [
{ images: ['Spencer Image 1'], name: 'The Spencer' },
{ images: ['Gertie Image 1'], name: 'The Gertie' }
]
let joined = arr
.flatMap(a => lineItems.map(li => ({a, li})))
.filter(obj => obj.a.name == obj.li.description)
.map(obj => ({
image: obj.a.images[0],
name: obj.a.name,
price: obj.li.amount_total
}));
console.log(joined);
作为循环连接,它可能没有那么有效。做一个哈希连接有点复杂。您可以查看我正在开发的项目 fluent-data的源代码,或者如果您可以按照文档操作,直接使用它甚至可能对您有用。
推荐阅读
- vim - 尽可能快地使 w0rp 异步 Lint 引擎“ALE”?
- powerapps - PowerApps interate through list updates
- javascript - React 组件设置状态未按预期工作
- python - 将 JSON 元素分隔到 pandas 数据框的列中
- image - 在二值化图像中分离交叉段
- android - 无法打开/qemu.conf,错误:2
- variables - 如何气流变量的值包含外来字符?
- python - 按分隔符拆分列并删除扩展列
- vsphere - cloud-init 用户数据传递到的 linux 文件位置是什么?
- python - Python3.7 转换逗号分隔的日期时间