Javascript - 从两个数组创建嵌套的对象数组答案

【问题标题】：Javascript - Create Nested Array of Objects From Two ArraysJavascript - 从两个数组创建嵌套的对象数组
【发布时间】：2021-01-20 09:13:46
【问题描述】：

尝试从两个数组创建一个对象组合数组：

let versions = [
          {
            version: "1609936394",
          },
          {
            version: "1609936409",
          }
]

和

let devices = [
  {
    download_device: "Box 1",
  },
  {
    download_device: "Box 2",
  },
  {
    download_device: "Box 3",
  },
  {
    download_device: "Box 4",
  }
]

我试图达到的结果（尽管没有成功）是为每个 download_device 和版本号组合设置一个单独的条目，即。

[
    {
        download_device: "Box 1",
        version: "1609936394"
    },
    {
        download_device: "Box 2",
        version: "1609936394"
    },
    {
        download_device: "Box 3",
        version: "1609936394"
    },
    {
        download_device: "Box 4",
        version: "1609936394"
    },
    {
        download_device: "Box 1",
        version: "1609936409"
    }...

任何帮助将不胜感激！

我目前的解决方案（只输出第一个版本号）：

let data = devices.map((d, index) => {
                       versions.map((v, i) => {
                         v.device = devices[index].download_device,
                         d.version = versions[index].version
                         return v;
                       })
                     return d;
                })

【问题讨论】：

There's no such thing as a "JSON Object"（或“JSON 数组”）。这些都是对象数组。
您能否提供您的尝试（即使他们不成功？）
@NickParsons 已将我当前的尝试添加到问题中。

标签： javascript arrays json object

【解决方案1】：

您的方法的主要问题是您尝试访问无效索引。由于您的devices 数组比versions 数组长，您将到达versions 数组中不存在的索引，当您尝试访问不存在的索引上的属性时会导致问题。

相反，您可以映射您的versions 数组，并将每个版本映射到您的设备数组（因为您希望将版本添加到所有设备）。当您映射到您的设备时，您可以从每个设备中获取属性，并使用 spread syntax 将它们传播到一个新对象 (...obj) 中。在这个新对象中，您还可以添加当前的version 属性。由于内部.map() 将返回一个数组，您可以将外部.map() 方法更改为.flatMap()，这会将回调返回的每个数组展平为一个更大的数组结果：

const versions = [ { version: "1609936394", }, { version: "1609936409", } ];
const devices = [ { download_device: "Box 1", }, { download_device: "Box 2", }, { download_device: "Box 3", }, { download_device: "Box 4", } ];

const res = versions.flatMap(({version}) => devices.map(obj => ({...obj, version})));
console.log(res);

【讨论】：

【解决方案2】：

通过首先迭代版本和内部版本在每个条目上迭代您的设备来构建所有组合。

构建一个新的 Object Literal 并将该 Object Literal 推送到结果数组。

let versions = [{
    version: "1609936394",
  },
  {
    version: "1609936409",
  }
]


let devices = [{
    download_device: "Box 1",
  },
  {
    download_device: "Box 2",
  },
  {
    download_device: "Box 3",
  },
  {
    download_device: "Box 4",
  }
]

let res = [];
versions.forEach((x) => {
  devices.forEach((y) => {
    let obj = {
      "version": x.version,
      "download_device": y.download_device
    };
    res.push(obj);
  });
})

console.log(res);

【讨论】：

【解决方案3】：

你有两个对象数组。创建一个数组，其中一个元素的每个元素都包含另一个元素。

不关心属性名称的通用解决方案迭代一个数组并创建另一个数组的副本并组合属性，例如：

let versions = [
  {version: "1609936394"},
  {version: "1609936409"}
];
let devices = [
  {download_device: "Box 1"},
  {download_device: "Box 2"},
  {download_device: "Box 3"},
  {download_device: "Box 4"}
]

// Step by step version
let result1 = versions.reduce((acc, ver) => {
  devices.forEach(device => {
    // Shallow copy device
    let o = {...device};
    // Shallow copy ver onto o
    Object.assign(o, ver);
    // Add to accumulator
    acc.push(o);
  });
  return acc;
}, []);

console.log(result1);

// Concise version
let result2 = versions.reduce((acc, ver) => (
  devices.forEach(device => acc.push({...device, ...ver})
), acc), []);

console.log(result2);

请注意，这些是浅拷贝，不会处理正在组合的对象之间的重复属性。

【讨论】：