如何用原生JavaScript将时序事件对象重排为对应值数组的数组？

首先咱们先明确需求：
输入的时序事件对象：

const input = { 
  time: [1522513800000, 1522515600000, 1522517400000, 1522519200000], 
  event: ['foo', 'bar', 'some', 'thing'], 
  notes: ['', 'not foo', 'sum', ''] 
};

目标输出格式：

[[1522513800000, 'foo', ''], [1522515600000, 'bar', 'not foo'], [1522517400000, 'some', 'sum'], [1522519200000, 'thing', '']]

方法一：用Array.map快速实现（最简洁） #

因为所有属性对应的数组长度一致，咱们可以取任意一个数组（比如time数组）来遍历，在每个索引位置把对应属性的元素组合成新数组：

const input = { 
  time: [1522513800000, 1522515600000, 1522517400000, 1522519200000], 
  event: ['foo', 'bar', 'some', 'thing'], 
  notes: ['', 'not foo', 'sum', ''] 
};

const result = input.time.map((_, index) => [
  input.time[index],
  input.event[index],
  input.notes[index]
]);

console.log(result);

这个写法简洁直观，完全用原生JS API，可读性拉满，适合属性固定的场景。

方法二：通用型实现（适配任意数量属性） #

如果后续可能给对象加更多属性数组，不想每次改代码，可以用更灵活的写法：先提取所有属性的数组集合，再按索引合并元素：

const input = { 
  time: [1522513800000, 1522515600000, 1522517400000, 1522519200000], 
  event: ['foo', 'bar', 'some', 'thing'], 
  notes: ['', 'not foo', 'sum', ''] 
};

// 提取所有属性对应的数组
const valueArrays = Object.values(input);
// 以第一个数组的长度作为遍历基准
const itemCount = valueArrays[0].length;

const result = Array.from({ length: itemCount }, (_, index) => 
  valueArrays.map(arr => arr[index])
);

console.log(result);

这种写法的优势是扩展性极强，不管后续加多少个属性数组，代码都不需要改动，自动适配新属性。

注意事项 #

• 要确保所有属性对应的数组长度一致，否则短数组的对应索引位置会返回undefined；
• 两种方法都是纯原生实现，兼容性覆盖所有现代浏览器及IE9+（如果要兼容IE8，需要给Array.map和Object.values加polyfill，但现在基本不用考虑IE8了）。

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