Объедините два массива объектов, чтобы получить все возможные результаты

У меня есть два массива объектов:

    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


typescript javascript ecmascript-6 ecmascript-2016
person Ryley Ameden    schedule 15.08.2019    source источник
comment
простой вложенный цикл forEach должен помочь, не нужно пытаться усложнять его функциями массива. Просто просмотрите каждую ОС, и для каждой из них просмотрите все браузеры и создайте комбинированные объекты, чтобы вставить их в массив результатов.   -  person Gibor    schedule 15.08.2019
comment
Разве вы не можете просто написать вложенный цикл для создания нужных вам объектов, а затем добавить их в новый массив? (Я уверен, что вы можете сделать это и с reduce, но это потребует от меня немного больше размышлений, и я не уверен, что это будет лучше в каком-либо смысле.)   -  person Robin Zigmond    schedule 15.08.2019
comment
@RobinZigmond, возможно, это можно было бы сделать с помощью сокращения, но да, нет смысла усложнять это. Выполнение вложенного цикла было бы более читабельным и интуитивно понятным.   -  person Gibor    schedule 15.08.2019
comment
Вы можете сделать это с помощью Array.prototype.map(), см. мой ответ ниже.   -  person Einar Ólafsson    schedule 15.08.2019

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать это с помощью Array.prototype.map и Array.prototype .flatMap()

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

Во-первых, вы составляете карту browserCapabilities. В функции карты вы также отображаете osCapabilities и возвращаете массивы объектов с информацией об ОС для каждого браузера.

Вы объединяете объект браузера с объектом ОС, распространяя их на новый объект. См. синтаксис расширения.

Затем flatMap сгладит то, что в противном случае было бы двумерным массивом, если бы вы использовали только .map(), и сгладит их в одномерный массив.

person Einar Ólafsson    schedule 15.08.2019
comment
Да, вроде работает отлично. Так просто теперь, когда я это вижу. - person Ryley Ameden; 15.08.2019