如何理解这段将二维数组首行作为表头的JS map-reduce代码运行逻辑？

这段代码的功能是把二维数组的首行作为键名，将后续每一行数据转换为键名: 对应值格式的对象，最终返回所有对象组成的数组。我们逐段拆解逻辑：

1. 函数参数解构 #

const fn = ([keys, ...values]) => 

这里用了数组解构赋值，直接对传入的二维数组做拆分：

• 把二维数组的第一个元素（也就是首行表头）赋值给keys变量，对应示例里的值就是 ['combi', 'DQ#', 'sd', 'Level 3', 'Level 6', 'Level 7']
• 剩余的所有行数据都被收纳到values数组中，对应示例里的值就是剩下的两行数据组成的数组。

2. 遍历每行数据做转换 #

values.map(vs =>

map方法会遍历values里的每一行数据，每一行的内容赋值给参数vs，每一行vs都会被处理为一个独立对象，最终map会返回所有对象组成的数组。

3. 单条数据转对象的核心逻辑 #

vs.reduce((acc, v, i) => (acc[keys[i]] = v, acc), {})

这里用reduce方法把数组格式的单行数据vs转换成对象：

• 最后传入的{}是reduce的初始值，也就是累计对象acc最开始是个空对象
• 回调的三个参数：acc是正在拼接的累计对象，v是当前遍历到的vs里的元素值，i是当前元素的索引
• 回调里用了逗号运算符，会先执行前面的赋值逻辑acc[keys[i]] = v：取和当前索引i对应的表头keys[i]作为对象的键，把当前值v作为键对应的值赋值给acc；逗号运算符最后会返回后面的acc，作为下一轮迭代的累计对象
• 遍历完一整行vs的所有元素后，reduce就会返回一个键值完全和表头对应的完整对象

最终输出结果 #

你给出的示例执行后，result的输出为：

[
  {
    combi: 'DQn DQDC Simple',
    'DQ#': 'DQn',
    sd: 'DQDC',
    'Level 3': 'Simple',
    'Level 6': 'Simple_A7',
    'Level 7': 0.262
  },
  {
    combi: 'DQn DQDC Simple1',
    'DQ#': 'DQn',
    sd: 'DQDC',
    'Level 3': 'Simple1',
    'Level 6': 'Simple_A7',
    'Level 7': 0.264
  }
]

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