在 JavaScript 中乘以/克隆多次对象和数组答案

【问题标题】：Multiply/Clone multiple times objects inside and array in JavaScript在 JavaScript 中乘以/克隆多次对象和数组
【发布时间】：2021-09-30 18:29:52
【问题描述】：

具有这种格式的对象数组：

const data = [
{country_id: 1, country: "Greece", value: 3},
{country_id: 2, country: "Cyprus", value: 2},
{country_id: 3, country: "Turkey", value: 4}
]

如何使用 JavaScript 乘法/克隆每个对象以获取以下对象数组？我想将每个对象乘以value 中指定的次数并得到一个新数组。

const new_data = [
{id: 1, country_id: 1, country: "Greece", value: 3},
{id: 2, country_id: 1, country: "Greece", value: 3},
{id: 3, country_id: 1, country: "Greece", value: 3},
{id: 4, country_id: 2, country: "Cyprus", value: 2},
{id: 5, country_id: 2, country: "Cyprus", value: 2},
{id: 6, country_id: 3, country: "Turkey", value: 4},
{id: 7, country_id: 3, country: "Turkey", value: 4},
{id: 8, country_id: 3, country: "Turkey", value: 4},
{id: 9, country_id: 3, country: "Turkey", value: 4}
]

到目前为止，我最好的尝试是使用 Object.assign，但不幸的是，地图返回的数组与 data 中的数组相同：

const new_data = data.map((d, i) => {
    for (var i = 0; i < d.mult; ++i) {
      Object.assign({}, d[i]);
    }
    return d;
 })

【问题讨论】：

Object.assign({}, d[i], {id: i}) ...我认为这也应该分配一个新的id

标签： javascript arrays javascript-objects clone

【解决方案1】：

您可以这样做，只需用value 元素填充一个数组，并将其映射到原始元素的克隆：

const data = [
{country_id: 1, country: "Greece", value: 3},
{country_id: 2, country: "Cyprus", value: 2},
{country_id: 3, country: "Turkey", value: 4}
]

console.log(
    data.flatMap((el) => new Array(el.value).fill(null).map(e => ({...el}))))

【讨论】：

我喜欢这种方法，但答案可以使用一些支持文本来解释它是如何工作的。

【解决方案2】：

您可以使用Array.from() 和reduce 来实现。试试这个-

在这里您可以使用Array.from({length: X}) 创建一个临时数组。这里{length: X} 对象表示from 方法创建一个长度为X 的数组。

之后，Array.from() 方法的回调函数每次迭代都会返回当前项。就是这样。

const data = [
  {country_id: 1, country: "Greece", value: 3},
  {country_id: 2, country: "Cyprus", value: 2},
  {country_id: 3, country: "Turkey", value: 4}
];

const res = data.reduce((acc, curr) => {
  const tmp = Array.from({length: curr.value}, () => curr);
  acc.push(...tmp);
  return acc;
}, []);

console.log(JSON.stringify(res));

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

【讨论】：

【解决方案3】：

最简单的方法是创建一个新数组，遍历旧数组并将重复项（使用新的id 字段）添加到结果数组：

const data = [
    { country_id: 1, country: "Greece", value: 3 },
    { country_id: 2, country: "Cyprus", value: 2 },
    { country_id: 3, country: "Turkey", value: 4 }
]

const result = [];

let id = 0;
for (const row of data) {
    for (let i = 0; i < row.value; i++) {
        const newRow = {
            ...row, // copy old data
            id: ++id, // but set this field and increase `id`
        };
        result.push(newRow);
    }
}

console.log(result);

如果您想使用.map 之类的内容，您需要使用.flatMap 或.map，后跟.flat()。您的（平面）地图将返回一个包含 value 新行的数组。不过，您仍然需要修复 country_id。

【讨论】：