如何在JavaScript中将两个一维数组合并为二维数组？

一、合并数组的实现方法 #

1. 使用map方法（最简洁） #

利用数组的map方法，遍历x数组的同时通过索引取y数组对应的元素，直接生成目标二维数组：

const x = Array.from({length: 1440}, (_, i) => i); // 生成0到1439的数组
const y = Array.from({length: 1440}, () => Math.floor(Math.random() * 101)); // 生成0-100的随机数数组

const z = x.map((value, index) => [value, y[index]]);

2. 使用forEach循环 #

初始化空数组，通过遍历索引将对应元素组合后推入：

const z = [];
x.forEach((value, index) => {
  z.push([value, y[index]]);
});

3. 传统for循环 #

适合需要更精细控制遍历过程的场景：

const z = [];
for (let i = 0; i < x.length; i++) {
  z.push([x[i], y[i]]);
}

二、D3折线图的其他数据格式选项 #

除了二维数组，D3的折线生成器还支持对象数组格式，这种方式可读性更强，也不需要刻意合并原数组：

1. 转换为对象数组 #

const data = x.map((value, index) => ({
  x: value,
  y: y[index]
}));

使用时只需在折线生成器中指定访问器：

const line = d3.line()
  .x(d => d.x) // 指定x字段
  .y(d => d.y); // 指定y字段

2. 直接基于原数组生成折线 #

甚至可以不转换数组，直接在折线生成器中通过索引关联两个数组：

const line = d3.line()
  .x((_, index) => x[index]) // 通过索引取x数组的值
  .y(d => d); // 直接使用y数组的元素
// 调用时传入y数组即可：line(y)

内容的提问来源于stack exchange，提问作者Dvdscot