组合两个数组以形成一个javascript对象

Question

我有两个数组：

 var columns = ["Date", "Number", "Size", "Location", "Age"];

var rows = [
  ["2001", "5", "Big", "Sydney", "25"],
  ["2005", "2", "Med", "Melbourne", "50"],
  ["2012", "20", "Huge", "Brisbane", "80"]
];

我正在尝试将它们组合成行数组中每个项目的 javascript 对象。之后，我想将每个对象推入一个新数组。

喜欢：

 var newarray = [];

//'thing' should be the same structure for each row item
var thing = {
  "Date": "2001",
  "Number": "5",
  "Size": "Big",
  "Location": "Sydney",
  "Age": "25"
}

newarray.push(thing);

当我知道列名时我可以这样做，但是当列名未知时我需要能够以这种方式存储数据——即基于列数组的索引。

我以前试过这样的：

 for (var y = 0; y < rows.length; y++) {

  for (var i = 0; i < columns.length; i++) {
    thing[columns[i]] = rows[i][i];
  }
  newarray.push(thing)
}

上面的代码只一次又一次地存储第一项（根据 rows.length）。

我不明白如何将列名与行组合起来创建一个对象数组。 “行”包含数组这一事实尤其令人困惑。

原文由 tamarasaurus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在外循环的每次迭代开始时创建一个新的 thing 对象。如果你不这样做，每次你说 thing[columns[i]] 你将覆盖同一个对象的属性，当你将它推入 newarray 你最终会得到什么with 是一个包含 对同一对象 的引用的数组。此外，在循环内确保您获得正确的索引（您当前有 [i][i] 而不是 [y][i] ）：

 var newarray = [],
    thing;

for(var y = 0; y < rows.length; y++){
    thing = {};
    for(var i = 0; i < columns.length; i++){
        thing[columns[i]] = rows[y][i];
    }
    newarray.push(thing)
}

“‘行’包含数组这一事实尤其令人困惑……”

对于您的示例数据 rows.length 将为 3，而 rows[0] 是数组：

 ["2001", "5", "Big", "Sydney", "25"]

rows[0][3] 是“悉尼”。

以此为例，您应该能够看到 rows[y][i] 将为您提供 y 和 i 的每个值。

原文由 nnnnnn 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您也可以以更加以数据为中心的方式执行此操作：

 const columns = ["Date", "Number", "Size", "Location", "Age"]

const rows = [
  ["2001", "5", "Big", "Sydney", "25"],
  ["2005", "2", "Med", "Melbourne", "50"],
  ["2012", "20", "Huge", "Brisbane", "80"]
]

const result = rows.map(row =>
  row.reduce(
    (result, field, index) => ({ ...result, [columns[index]]: field }),
    {}
  )
)

console.log(result)

2022 年更新：使用现在更常见的语法（短函数）

这是原始片段：

 var columns = ["Date", "Number", "Size", "Location", "Age"];

var rows = [
  ["2001", "5", "Big", "Sydney", "25"],
  ["2005", "2", "Med", "Melbourne", "50"],
  ["2012", "20", "Huge", "Brisbane", "80"]
];

var result = rows.map(function(row) {
  return row.reduce(function(result, field, index) {
    result[columns[index]] = field;
    return result;
  }, {});
});

console.log(result)

这样您就不必处理临时数组。

如果您的代码也适用于 旧式浏览器，我建议您查看 lodash 的 使用 map + reduce 。

原文由 Tharabas 发布，翻译遵循 CC BY-SA 4.0 许可协议