原生JS实现键值对对象转对象数组的代码优化方案咨询

优化实现方案 #

核心思路 #

• 先过滤原始对象中值为空数组的无效属性
• 计算所有有效属性对应数组的最大长度，作为最终结果数组的长度
• 逐个下标生成结果对象，仅将当前下标存在对应值的属性存入对象

代码实现 #

const originData = {
  sku: ['1', '2', '3', '4'],
  color: [],
  season: ['winter', 'summer'],
}

// 过滤空数组的无效字段
const validFields = Object.entries(originData).filter(([_, value]) => Array.isArray(value) && value.length)
// 取最长数组的长度作为结果数组的长度
const maxLength = Math.max(...validFields.map(([_, arr]) => arr.length))

const result = []
// 遍历每个下标生成对应对象
for (let i = 0; i < maxLength; i++) {
  const item = {}
  for (const [field, arr] of validFields) {
    // 仅当前下标有值时才赋值
    if (arr[i] !== undefined) {
      item[field] = arr[i]
    }
  }
  result.push(item)
}

console.log(result)

输出结果 #

[
  { sku: '1', season: 'winter' },
  { sku: '2', season: 'summer' },
  { sku: '3' },
  { sku: '4' }
]

方案优势 #

用更直白的循环逻辑代替了嵌套的map+reduce组合，没有晦涩的隐式转换和排序逻辑，每一步操作都清晰可读，对不熟悉数组高阶函数的开发者也非常友好，同时兼容多字段、不同长度数组的通用场景。

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