Объединить несколько динамических массивов в один массив объектов

Question

Извините за запутанный заголовок, у меня проблема с 3 динамическими массивами (могут быть пустыми):

const titles = ["Title 1", "Title 2", "Title 3"]
const subtitles = ["Subtitle 1", "Subtitle 2"]
const contents = ["Content 1"]

, и мне нужно изменить их на:

const newArr = [
    { title: "Title 1", subtitle: "Subtitle 1", content: "Content 1" },
    { title: "Title 2", subtitle: "Subtitle 2" },
    { title: "Title 3" }
]

Моя попытка решить эту проблему:

const newState = []

titles.map((titleItem, index) => { newState[index] = { title: titleItem } });
subtitles.map((subtitleItem, index) => { newState[index] = { subtitle: subtitleItem } });
contents.map((contentItem, index) => { newState[index] = { content: contentItem } });

но, к сожалению, это перезаписывает newState для каждой карты.

Answer 1

Может быть решена таким образом, для не критичного к производительности кода, я считаю использование карт чище.

let titles = ["Title 1", "Title 2", "Title 3"]
let subtitles = ["Subtitle 1", "Subtitle 2"]
let contents = ["Content 1"]

const maxLength = Math.max(titles.length, subtitles.length, contents.length);

const resultWithUndefined = Array(maxLength).fill(null)
  .map((_,i) => [titles[i], subtitles[i], contents[i]])
  .map(([title, subtitle, content]) => ({title, subtitle, content}));

console.log(resultWithUndefined)

const resultClean = Array(maxLength).fill(null)
  .map((_,i) => [titles[i], subtitles[i], contents[i]])
  .map(([title, subtitle, content]) => 
    Object.assign({},
      typeof title === "undefined" ? {} : {title},
      typeof subtitle === "undefined" ? {} : {subtitle},
      typeof content === "undefined" ? {} : {content},
    ));
    
console.log(resultClean)

Answer 2

Если вы хотите сохранить входные данные как объект, где имена свойств соответствуют именам переменных, то вот один из способов сделать это:

function zip(arg) {
    return Object.entries(arg).reduce( (acc, [k, arr]) => {
        arr.forEach( (v, i) => (acc[i] = acc[i] || {})[k] = v );
        return acc;
    }, []);
}

const result = zip({ 
    title: ["Title 1", "Title 2", "Title 3"],
    subtitle: ["Subtitle 1", "Subtitle 2"],
    content: ["Content 1"]
});

console.log(result);

Это позволяет использовать другие конфигурации, в которых у вас будет более 3 массивов для объединения с потенциально разными именами.