如何在不复制内容的情况下循环遍历已经在 map 函数中的数组

Question

我有以下代码和以下数组。我想遍历它们并提取一些数据，然后将它们放入最终数组中。我能够做到这一点，但内容是重复的。我尝试阅读有关 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,
    };
  });
});

但是returns两次都是一样的

[{
  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
}]

Answer 1

虽然您的问题中没有直接表达，但您似乎希望加入 javascript。我看到的唯一与两者相关的是产品中的 'name' 和订单项中的 'description'。所以做一个循环连接。

下面是一些使用您的示例的示例代码，但只精简了相关内容：

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，或者如果你能按照文档直接使用它甚至可能对你有用。

Answer 2

您可以使用单个映射调用并通过索引引用您的第二个 lineItems 数组，前提是您知道这两个数组的长度和顺序相同

const output = arr.map((o, i) => ({
  name: o.name, 
  image: o.images[0], 
  price: lineItems[i].amount_total}
));

或使用 find() 检索相关对象。

const outputUsingFind = arr.map(o => {
    const lineItem = lineItems.find(item => item.description === o.name);
    // ** add lineItem valid check here **
    return {
      name: o.name, 
      image: o.images[0], 
      price: lineItem.amount_total};
  });

var lineItems = [{amount_subtotal: 7500,amount_total: 700,description: 'The Spencer',},{amount_subtotal: 7500,amount_total: 500,description: 'The Gertie',}];
var arr = [{images: ['spencer image'],name: 'The Spencer',},{images: ['gertie image'],name: 'The Gertie'}];

// since your arrays are ordered the same you can access the second object using 
// the index passed from map.
const output = arr.map((o, i) => ({
  name: o.name, 
  image: o.images[0], 
  price: lineItems[i].amount_total}
));
console.log(output);

// if the two arrays are not in the same order you can use find() to retrieve 
// the second object by property (you'll need to check 
const outputUsingFind = arr.map(o => {
    const lineItem = lineItems.find(item => item.description === o.name);
    // ** add lineItem valid check here **
    return {
      name: o.name, 
      image: o.images[0], 
      price: lineItem.amount_total};
  });
console.log(outputUsingFind);

.as-console-wrapper { max-height: 100% !important; top: 0; }

如何在不复制内容的情况下循环遍历已经在 map 函数中的数组

How to loop over a an array that is already inside a map function without duplicating the contents

javascript

reduce

array.prototype.map