如何将 2 个数组加入到对象数组中答案

【问题标题】：How to join 2 arrays into an array of objects如何将 2 个数组加入到对象数组中
【发布时间】：2021-09-25 09:01:43
【问题描述】：

我有一些headers 和peopleData：

const headers = ["name", "age", "nationality"]

const peopleData = [
  ["John", 31, "Spanish"],
  ["Jane", 41, "Italian"],
  ["Johnson", 11, "Thai"],
  ["Rob", 13, "Japanese"],
]

我想结合两者并返回一个对象数组，如下所示：

[{
  name: "John",
  age: 31,
  nationality: "Spanish"
}, {
  name: "Jane",
  age: 41,
  nationality: "Italian"
}, {
  name: "Johnson",
  age: 11,
  nationalityL: "Thai"
}, {
  name: "Rob",
  age: 13,
  nationality: "Japanese"
}]

到目前为止，我想出了这个：

const people = peopleData.map((person, i) => {
  return headers.map((header, index) => {
    return {
      [header]: person[index]
    }
  })
})

此解决方案不起作用，因为它会创建嵌套对象：

[[{
  name: "John"
}, {
  age: 31
}, {
  nationality: "Spanish"
}], [{
  name: "Jane"
}, {
  age: 41
}, {
  nationality: "Italian"
}], [{
  name: "Johnson"
}, {
  age: 11
}, {
  nationality: "Thai"
}], [{
  name: "Rob"
}, {
  age: 13
}, {
  nationality: "Japanese"
}]]

【问题讨论】：

Creating a JavaScript Object from two arrays 中peopleData.length 次的任何答案

标签： javascript arrays

【解决方案1】：

以下示例：

感谢 Andreas 的评论，下面的表现更好

const headers = ["name", "age", "nationality"];

const peopleData = [
  ["John", 31, "Spanish"],
  ["Jane", 41, "Italian"],
  ["Johnson", 11, "Thai"],
  ["Rob", 13, "Japanese"],
];

const o = peopleData.map(a =>
  a.reduce((acc, b, i) => {
    acc[headers[i]] = b;
    return acc;
  }, {})
);

console.log(o);

在一个行中，但性能较差

const headers = ["name", "age", "nationality"];

const peopleData = [
  ["John", 31, "Spanish"],
  ["Jane", 41, "Italian"],
  ["Johnson", 11, "Thai"],
  ["Rob", 13, "Japanese"],
];

const o = peopleData.map(a =>
  a.reduce((acc, b, i) => ({ ...acc, [headers[i]]: b }), {})
);

console.log(o);

【讨论】：

没有必要不断地克隆 acc 只是为了把它变成一个单行。只需附加新属性并返回acc。

【解决方案2】：

您可以将您的内部 .map() 包装在对 Object.fromEntries() 的调用中，这将为您构建一个对象 - 它需要一个 [[key, value],...] 对的数组，因此您可以更改您的内部映射以返回一个 [key, value]对数组而不是像这样的对象：

const headers = ["name", "age", "nationality"];
const peopleData = [ ["John", 31, "Spanish"], ["Jane", 41, "Italian"], ["Johnson", 11, "Thai"], ["Rob", 13, "Japanese"], ];

const res = peopleData.map(person => Object.fromEntries(person.map(
  (val, i) => [headers[i], val]
)));

console.log(res);

或者，您可以坚持返回对象数组的方法，然后使用 Object.assign() 和 spread syntax ... 将数组中的对象合并在一起：

const headers = ["name", "age", "nationality"];
const peopleData = [ ["John", 31, "Spanish"], ["Jane", 41, "Italian"], ["Johnson", 11, "Thai"], ["Rob", 13, "Japanese"], ];

const res = peopleData.map(person => Object.assign(...person.map(
  (val, i) => ({[headers[i]]: val})
)));

console.log(res);

【讨论】：

【解决方案3】：

简单易懂的解决方案！迭代所有peopleData，并使用数组headers将它们放入一个新对象中：

const headers = ["name", "age", "nationality"];
const peopleData = [["John", 31, "Spanish"],["Jane", 41, "Italian"],["Johnson", 11, "Thai"],["Rob", 13, "Japanese"]];

let result = [];

peopleData.forEach((e, i) => {   //iterate data
  result[i] = {};
  result[i][headers[0]] = e[0];
  result[i][headers[1]] = e[1];
  result[i][headers[2]] = e[2];
});

console.log(result);

【讨论】：