如何将对象数组中逗号分隔的键值拆分为独立键值对？

问题描述 #

给定一个对象数组，其中部分键和对应的值都采用逗号分隔的形式，需要将这类键值对拆分为独立的键值，同时保留其他原有键值。示例输入输出如下：

输入数据 #

var data = [{
  "id":1,
  "x, y, z" :"1,2,3"
}, {
  "id":2,
  "x, y, z" :"10,12,153"
}, {
  "id":3,
  "x, y, z" :"9,8,5"
}, {
  "id":4,
  "x, y, z" :"14,87,13"
}]

期望输出 #

[{
  "id":1,
  "x":1,
  "y":2,
  "z":3
},{
  "id":2,
  "x":10,
  "y":12,
  "z":153
},{
  "id":3,
  "x":9,
  "y":8,
  "z":5
},{
  "id":4,
  "x":14,
  "y":87,
  "z":13
}]

原代码问题分析 #

你之前的代码存在几个关键问题：

• 使用Object.keys(item)[index]是错误的：这里的index是数组的索引（0-3），而不是对象键的索引，导致每次循环取的键都不对。
• 没有处理逗号分隔的值：只处理了键的拆分，但没有把对应的值也拆分并赋值。
• 直接修改原对象：会污染原始数据，应该创建新对象返回。

通用解决方案 #

下面是一个通用函数，可以处理任意逗号分隔的键（比如a,b,c这类格式），同时保留其他键值：

const transformData = (data: any[]) => {
  return data.map(item => {
    // 创建新对象，避免修改原数据
    const newItem: any = {};
    // 遍历当前对象的所有键值对
    Object.entries(item).forEach(([key, value]) => {
      // 判断键是否包含逗号
      if (key.includes(',')) {
        // 拆分键并去除空格
        const keys = key.split(',').map(k => k.trim());
        // 拆分值并转换为数字（如果需要字符串可以去掉Number转换）
        const values = value.split(',').map(v => Number(v.trim()));
        // 遍历拆分后的键值，赋值到新对象
        keys.forEach((k, idx) => {
          newItem[k] = values[idx];
        });
      } else {
        // 非逗号分隔的键直接保留
        newItem[key] = value;
      }
    });
    return newItem;
  });
};

// 使用示例
const outputArray = transformData(data);
console.log(outputArray);

代码说明 #

• 通用性：不管键是x,y,z还是a,b,c，只要是逗号分隔的格式都能处理。
• 数据不污染：通过创建新对象newItem来存储转换后的数据，不会修改原始的data数组。
• 值类型处理：这里将值转换为数字，如果你的值是字符串类型，可以去掉Number()转换，直接保留v.trim()。
• 空格处理：拆分后调用trim()去除键和值前后的空格，兼容带空格的逗号分隔格式（比如x, y, z）。

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