组合两个对象数组以获得所有可能的结果[重复]答案

【问题标题】：Combine two arrays of objects to get all possible outcomes [duplicate]组合两个对象数组以获得所有可能的结果[重复]
【发布时间】：2019-12-22 00:28:52
【问题描述】：

我有两个对象数组：

    const osCapabilities = [{
      os: 'Windows',
      os_version: '10',
    }, {
      os: 'OS X',
      os_version: 'Mojave',
    }];

    const browserCapabilities = [{
      browser: 'chrome'
    }, {
      browser: 'firefox'
    }, {
      browser: 'internet explorer'
    }, {
      browser: 'safari'
    }];

我正在尝试找出组合它们的最佳方法，以便获得以下结果。

    const capabilities = [{
      browser: 'chrome',
      os: 'Windows',
      os_version: '10',
    }, {
      browser: 'chrome',
      os: 'OS X',
      os_version: 'Mojave',
    }, {
      browser: 'firefox',
      os: 'Windows',
      os_version: '10',
    }, {
      browser: 'firefox',
      os: 'OS X',
      os_version: 'Mojave',
    } ...
    ]

我不知道该怎么做。任何帮助是极大的赞赏。谢谢！v

【问题讨论】：

一个简单的嵌套 forEach 循环应该可以解决问题，无需尝试使用数组函数使其复杂化。只需遍历每个操作系统，并为每个操作系统遍历所有浏览器并构建组合对象以推送到结果数组中。
难道不能只写一个嵌套循环来构造你需要的对象，然后将它们添加到一个新数组中吗？（我相信你也可以使用 reduce 来做到这一点，但这需要我多花点心思，而且我不相信它在任何意义上会更好。）
@RobinZigmond 它可以用reduce来完成，但是是的，让它复杂化是没有意义的。做一个嵌套循环会更具可读性和直观性。
你可以用Array.prototype.map()来做，见下面我的回答。

标签： javascript typescript ecmascript-6 ecmascript-2016

【解决方案1】：

您可以使用Array.prototype.map 和Array.prototype.flatMap() 来做到这一点

var merged = browserCapabilities.flatMap(browser => {
    return osCapabilities.map(os => {
        return {...browser, ...os}
    })
})

首先，您映射出browserCapabilities。在 map 函数中，您还可以映射 osCapabilities 并返回包含每个浏览器的操作系统信息的对象数组。

您可以通过将浏览器对象与 os 对象分散到一个新对象中来组合它们。见spread syntax

然后，如果您仅使用 .map()，flatMap 会将原本是二维数组的内容展平，并将它们展平为一维数组。

【讨论】：

是的，这似乎工作得很好。如此简单，现在我看到了。