如何将对象属性内的数组展开转换为指定结构对象数组

转换逻辑说明 #

提取原对象每个属性数组相同索引位的元素，按原属性名组装为独立对象，所有对象按索引顺序组成最终结果数组。

代码实现 #

通用兼容写法（逻辑直观易调试） #

// 原始数据
const data = {
  sp: [ 'A', 'B', 'C' ],
  jh: [ '1', '0', 'AB' ],
  oa: [ 27493, 9837, 3781 ]
}

function transToObjArr(source) {
  // 获取所有属性名
  const keys = Object.keys(source)
  // 取首个属性的数组长度为遍历基准（默认所有数组等长）
  const arrLen = source[keys[0]].length
  const res = []
  // 按索引遍历
  for (let idx = 0; idx < arrLen; idx++) {
    const curItem = {}
    // 给当前索引的对象赋值每个属性
    keys.forEach(key => {
      curItem[key] = source[key][idx]
    })
    res.push(curItem)
  }
  return res
}

const new_data = transToObjArr(data)

运行后new_data的结构和预期完全一致：

[
  {sp: 'A', jh: '1', oa: 27493},
  {sp: 'B', jh: '0', oa: 9837},
  {sp: 'C', jh: 'AB', oa: 3781}
]

简洁写法（ES6+ 实现） #

适合现代浏览器/Node.js环境，代码更凝练：

const new_data = Array.from({length: data.sp.length}, (_, i) => 
  Object.fromEntries(Object.entries(data).map(([k, arr]) => [k, arr[i]]))
)

注意事项 #

• 以上实现默认原对象所有属性值为等长数组，如果存在数组长度不一致的场景，建议先加长度校验逻辑，避免生成的对象出现属性值为undefined的异常情况
• 简洁写法依赖Array.from、Object.entries、Object.fromEntries等ES6+特性，如需兼容IE等低版本环境，建议使用通用兼容写法。

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