JavaScript вложенная карта ()

Question

У меня есть массив:

const array = [
  {name: "abc", numbers:[1,2]},
  {name: "def", numbers:[3,4]}
];

Я хочу использовать .map() для возврата нового массива, например:

[
  {name:"abc", number:1},
  {name:"abc", number:2},
  {name:"def", number:3},
  {name:"def", number:4}
]

Что мне делать?

Answer 1

Было бы более производительно использовать forEach вместо map.

Как показывает хороший ответ @ MohammadUsman, вывод map должен быть сглажен, прежде чем вы сможете получить желаемый результат . С помощью forEach (который ничего не возвращает) вы можете просто напрямую добавить в выходной массив:

const data = [
  { name: "abc", numbers: [1,2] },
  { name: "def", numbers: [3,4] }
];

var result = [];
              
data.forEach(
  ({ numbers, ...rest }) => numbers.forEach(
    n => result.push(Object.assign({number: n}, rest )))
);

console.log(result);

Answer 2

Вы можете напрямую взять Array#flatMap с внутренним отображением новых объектов и получить массив объектов.

const
    array = [{ name: "abc", numbers:[1, 2] }, { name: "def", numbers:[3, 4] }],
    result = array.flatMap(({ name, numbers }) => numbers.map(number => ({ name, number })));

console.log(result);

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

Answer 3

Вы можете перебирать входной массив, используя .map(), и использовать Object.assign() для создания нового объекта и, наконец, сгладить массив, используя .flat(), чтобы получить желаемый результат.

const data = [
  { name: "abc", numbers: [1,2] },
  { name: "def", numbers: [3,4] }
];
              
const result = data.map(
  ({ numbers, ...rest }) => numbers.map(n => Object.assign({number: n}, rest ))
).flat();

console.log(result);

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

Answer 4

Вот простое решение, если вы готовы использовать jquery ...

const array = [
               {name: "abc", numbers:[1,2]},
               {name: "def", numbers:[3,4]}
              ];

var newArray = [];
$.each(array, function(k,v){
  var strName = v.name;
    $.each(v.numbers, function(key,value){
        newArray.push({name: strName, number: value});
  });
});


console.log(newArray);

Answer 5

Вы можете использовать .reduce, если flatmap недоступен. В ваших случаях это быстрее. Итерация будет только один раз для каждого элемента.

const array = [
  { name: "abc", numbers: [1, 2] },
  { name: "def", numbers: [3, 4] },
];
const results = array.reduce((r, item) => {
  r = r.concat(item.numbers.map((number) => ({ name: item.name, number })));
  return r;
}, []);
console.log(results)