javascript，将对象数组垂直转换为arrays数组

Question

我有一个 CSV 文件，我已使用d3.csv成功读取该文件。 结果是一个 JSON 文件，其中每一行由一个数组元素组成，每个数组元素是一个 object，键/值对与列标题匹配。

我需要这种“垂直”格式，作为 arrays 的数组，其中每个内部数组由每个 object 的值组成。

这是一个在 Node 中运行的示例：

> a = new Array();
[]
> a.push({"b":2, "c": 4, "d":6, "e": 8});
1
> a.push({"b":3, "c": 6, "d":9, "e": 12});
2
> a.push({"b":4, "c": 8, "d":12, "e": 16});
3
> a.push({"b":5, "c": 10, "d":15, "e": 20});
4
> a
[
  { b: 2, c: 4, d: 6, e: 8 },
  { b: 3, c: 6, d: 9, e: 12 },
  { b: 4, c: 8, d: 12, e: 16 },
  { b: 5, c: 10, d: 15, e: 20 }
]
> x = [[2,3,4,5],[4,6,8,10],[6,9,12,15],[8,12,16,20]]
[ [ 2, 3, 4, 5 ], [ 4, 6, 8, 10 ], [ 6, 9, 12, 15 ], [ 8, 12, 16, 20 ] ]
> x
[ 
  [ 2, 3, 4, 5 ], 
  [ 4, 6, 8, 10 ], 
  [ 6, 9, 12, 15 ], 
  [ 8, 12, 16, 20 ] 
]
>

这里， [a]代表我想要的 object 数组，而[x]代表我想要的 arrays 数组。

我的数据文件很宽，有很多列。 我尝试了几种玩具解决方案，我可以遍历数组 select 每个元素，然后遍历每个元素和 select 每个键，获取值并将其推送到新数组。 然而，这是令人讨厌的并且很容易被打破。 肯定有更好的方法。

如果我有一个列表列表，我可以翻转行和列。 不幸的是，我有一个 object 的列表，用D3.csv()读入。

我的主要语言是（注意，是）Perl，Perl-ish 解决方案对我来说很自然。 我当前的应用程序在浏览器中运行客户端，我需要 JavaScript 中的客户端解决方案。

Answer 1

您可以通过多种方式实现这一点，但由于看起来源数组中的所有对象都具有相同的属性，因此最直接的可能是嵌套的map()调用。 外部map()在数组第一个元素的Object.keys()上调用，内部map()使用源数组中每个 object 上的每个迭代键。

 const a = [{ b: 2, c: 4, d: 6, e: 8 }, { b: 3, c: 6, d: 9, e: 12 }, { b: 4, c: 8, d: 12, e: 16 }, { b: 5, c: 10, d: 15, e: 20 }]; const result = Object.keys(a[0]).map(key => a.map(o => o[key])); console.log(result);

---

如果对象具有不同的属性，您可以使用reduce()调用来累积相似属性的所有值。

 const a = [{ b: 2, c: 4, d: 6, e: 8 }, { b: 3, c: 6, d: 9, e: 12 }, { b: 4, c: 8, d: 12, e: 16 }, { b: 5, c: 10, d: 15, e: 20 }]; const result = Object.values( a.reduce((acc, obj) => { Object.keys(obj).forEach(key => (acc[key]??= []).push(obj[key])); return acc; }, {})); console.log(result);

Answer 2

我喜欢@pilchard 的d3不可知论答案； 但如果您对d3驱动的答案感兴趣，您可以在 arrays 数组上使用d3.transpose ，并通过预处理步骤使用Object.values删除对象的键：

 const a = [ { b: 2, c: 4, d: 6, e: 8 }, { b: 3, c: 6, d: 9, e: 12 }, { b: 4, c: 8, d: 12, e: 16 }, { b: 5, c: 10, d: 15, e: 20 } ] const x = d3.transpose(a.map(o => Object.values(o))); console.log(x);

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.5.0/d3.min.js"></script>