将含单元素数组的JavaScript对象转为目标结构的最优高效方法

嘿，这个转换需求其实挺常见的，我给你分享几个最优且高效的实现方式，分不同场景给你梳理：

方法一：使用Object.fromEntries() + Object.entries()（ES2019+，简洁首选） #

这种方法是现代JS环境里最推荐的写法，代码简洁直观，而且利用原生高阶函数实现，性能表现也很出色。

代码示例：

const original = { 
  bill: [ { satisfy: 'true', comments: '' } ], 
  permission_title: [ { satisfy: 'false', comments: '5' } ], 
  final_status: [ { satisfy: 'true', comments: '' } ] 
};

const transformed = Object.fromEntries(
  Object.entries(original).map(([key, arr]) => [key, arr[0]])
);

console.log(transformed);

逻辑解释： #

• Object.entries(original)会把原对象转换成键值对数组，格式类似 [['bill', [{...}]], ['permission_title', [{...}]], ...]
• 接着用map遍历每一组键值对，把数组里的第一个元素取出来，替换掉原来的数组值
• 最后Object.fromEntries()把处理后的键值对数组重新转回对象，正好得到你想要的目标结构

方法二：手动遍历（兼容旧环境，性能最优） #

如果需要兼容ES2019之前的旧浏览器/运行环境，手动遍历对象键的方式是最稳妥的，而且因为没有额外的函数调用开销，性能是顶级的。

代码示例：

const original = { 
  bill: [ { satisfy: 'true', comments: '' } ], 
  permission_title: [ { satisfy: 'false', comments: '5' } ], 
  final_status: [ { satisfy: 'true', comments: '' } ] 
};

const transformed = {};
for (const key in original) {
  // 可选：检查是否为对象自身属性，避免遍历原型链上的额外属性
  if (original.hasOwnProperty(key)) {
    transformed[key] = original[key][0];
  }
}

console.log(transformed);

逻辑解释： #

• 先初始化一个空对象transformed用来存放结果
• 用for...in循环遍历原对象的每个键
• 把原对象对应键的数组的第一个元素，直接赋值给新对象的对应键
• 加上hasOwnProperty判断是个好习惯，能防止意外遍历到原型链上的属性

方法三：使用reduce()（函数式风格） #

如果你偏爱函数式编程的写法，reduce也是个不错的选择，代码同样简洁，可读性也很好。

代码示例：

const original = { 
  bill: [ { satisfy: 'true', comments: '' } ], 
  permission_title: [ { satisfy: 'false', comments: '5' } ], 
  final_status: [ { satisfy: 'true', comments: '' } ] 
};

const transformed = Object.entries(original).reduce((acc, [key, arr]) => {
  acc[key] = arr[0];
  return acc;
}, {});

console.log(transformed);

逻辑解释： #

• 先用Object.entries拿到原对象的键值对数组
• 再用reduce把这些键值对累加成目标对象，初始累加器是一个空对象{}
• 每次遍历都把处理后的键值对添加到累加器中，最终得到转换后的对象

额外注意 #

• 以上方法都默认原对象的每个属性值是至少包含一个元素的数组，如果存在空数组的情况，建议加个兜底判断，比如写成arr[0] || {}，避免赋值undefined
• 环境允许的话优先选方法一，代码最简洁；要兼容旧环境就选方法二，性能最优

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