es6 перебирать массив объектов с вложенными массивами и возвращать один массив?

Question

Учитывая следующий сценарий, как я могу вернуть один массив?

let array = [{
    name: "name01", 
    arr: [
      {name: "inner01"}, 
      {name: "inner02"}, 
      {name: "inner03"}
    ]
  }, {
    name: "name02", 
    arr: [
      {name: "inner04"}, 
      {name: "inner05"}, 
      {name: "inner06"}
    ]
  }
]

let convo = array.map(item => {
  return {
    name: item.name,
    ...item.arr,
  };
});

https://jsfiddle.net/3ng8dc2x/1/

Я бы хотел получить что-то вроде:

[
  {name: "name01"}, 
  {name: "inner01"}, 
  {name: "inner02"}, 
  {name: "inner03"},
  {name: "name02"},
  {name: "inner04"}, 
  {name: "inner05"}, 
  {name: "inner06"}
]

Как всегда ценится любое направление, поэтому заранее благодарим!

Answer 1

Если вы пишете для последних браузеров и последних узлов, flatMap() идеально подходит для этого:

let array = [{
    name: "name01", 
    arr: [
      {name: "inner01"}, 
      {name: "inner02"}, 
      {name: "inner03"}
    ]
  }, {
    name: "name02", 
    arr: [
      {name: "inner04"}, 
      {name: "inner05"}, 
      {name: "inner06"}
    ]
  }
]

let flat = array.flatMap(({name, arr}) => [{name}, ...arr])
console.log(flat)

Answer 2

Массив уменьшить может быть лучше, чем карта.

let array = [{
    name: "name01", 
    arr: [
      {name: "inner01"}, 
      {name: "inner02"}, 
      {name: "inner03"}
    ]
  }, {
    name: "name02", 
    arr: [
      {name: "inner04"}, 
      {name: "inner05"}, 
      {name: "inner06"}
    ]
  }
]

let convo = array.reduce((a, {name, arr}) => a.concat([{name}], arr), []);
console.log(convo)

Answer 3

Методологии функционального программирования с помощью Array.map () / Array.reduce () помогут, как доказывают другие ответы.

Позвольте мне представить альтернативную точку зрения - использовать рекурсию.

const array = [{
    name: "name01", 
    arr: [
      {name: "inner01"}, 
      {name: "inner02"}, 
      {name: "inner03"}
    ]
  }, {
    name: "name02", 
    arr: [
      {name: "inner04"}, 
      {name: "inner05"}, 
      {name: "inner06"}
    ]
  }
]

const flattenToSingleArray = (array, result = []) => {
   for (const {name, arr} of array) {
     result.push({name});
     if (arr) {
       flattenToSingleArray(arr, result);
     }
   }
  return result;
}

console.log(flattenToSingleArray(array));

Как это работает, мы перебираем array, а затем деструктурируем каждый объект (элемент в каждой итерации).Затем мы помещаем свойство name со значением в результат.Мы повторяем это через детей (обозначается arr в каждом объекте).

Answer 4

Одним из возможных решений является объединение Array.reduce () с Object.entries и для каждой записи текущего проверенного object, проверьте тип, чтобы решить, как поместитьэлемент в новом массиве:

let array = [
  {
    name: "name01", 
    surname: "surname01", 
    arr: [{name: "inner01"}, {name: "inner02"}, {name: "inner03"}]
  },
  {
    name: "name02",
    surname: "surname02",  
    arr: [{name: "inner04"}, {name: "inner05"}, {name: "inner06"}]
  }
];

let res = array.reduce((acc, curr) =>
{
    Object.entries(curr).forEach(([k, v]) =>
    {
        if (typeof v === 'string')
            acc.push({[k]: v});
        else if (Array.isArray(v))
            acc.push(...v);
    });

    return acc;
}, []);

console.log(res);

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

Обратите внимание, предыдущее, вероятно, является общим решением, однако, если вы можете доверять структуре ваших объектов, т. Е. Все они имеют nameсвойство с string и array на свойстве arr, тогда код можно упростить:

let array = [
  {
    name: "name01", 
    arr: [{name: "inner01"}, {name: "inner02"}, {name: "inner03"}]
  },
  {
    name: "name02", 
    arr: [{name: "inner04"}, {name: "inner05"}, {name: "inner06"}]
  }
];

let res = array.reduce(
    (acc, {name, arr}) => acc.concat([{name}, ...arr]),
    []
);

console.log(res);

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

Answer 5

Вы можете использовать уменьшить и деструктурирующее назначение

let array = [{name: "name01", arr: [{name: "inner01"}, {name: "inner02"}, {name: "inner03"}]},
{name: "name02", arr: [{name: "inner04"}, {name: "inner05"}, {name: "inner06"}]}]

let op = array.reduce((op,{name,arr}) =>op.concat([{name}],arr),[])

console.log(op)