JavaScript优雅处理对象数组：删空值与重命名键名

需求说明 #

给定如下对象数组：

const data = {
  ...otherData,
  formGroups: [
    { roldependence: "a", rol2dependence: "", rol3dependence: "b" },
    { roldependence: "", rol2dependence: "1", rol3dependence: "" }
  ]
}

需要完成三项操作：

• 删除空对象
• 删除值为空的键
• 修改键名，移除“dependence”后缀

期望得到的结果：

console.log(data.formGroups)
// [{ rol: "a", rol3: "b" }, { rol2: 1 }] 

原代码的问题 #

原代码存在几个明显的不合理之处：

1. 直接在浅拷贝后的对象上做原地修改，逻辑不够纯粹，可读性差
2. 键名修改和空值删除的顺序错误：修改键名后原键已被删除，后续判断!newElem[key]时会因为原键不存在出现逻辑偏差
3. 空对象过滤的判断不够精准，仅判断键的数量，无法排除所有值全为空的对象

优化后的实现方案 #

我们可以用纯函数的方式实现，全程不修改原始数据，逻辑更清晰简洁：

const transformFormGroups = (groups) => {
  return groups
    // 过滤掉所有值都为空的对象
    .filter(group => Object.values(group).some(val => val !== ''))
    // 逐个转换数组内的对象
    .map(group => {
      return Object.entries(group)
        // 先过滤掉值为空的键值对
        .filter(([_, value]) => value !== '')
        // 重组对象并修改键名
        .reduce((acc, [key, value]) => {
          // 移除键名末尾的"dependence"后缀
          const newKey = key.replace(/dependence$/, '');
          // 把字符串数字转为数值类型（匹配示例期望结果）
          acc[newKey] = isNaN(Number(value)) ? value : Number(value);
          return acc;
        }, {});
    });
};

// 生成新数据
const newData = {
  ...data,
  formGroups: data.formGroups ? transformFormGroups(data.formGroups) : []
};

console.log(newData.formGroups);
// 输出: [{ rol: "a", rol3: "b" }, { rol2: 1 }]

优化点说明 #

• 纯函数设计：transformFormGroups仅返回新的数组和对象，完全不修改原始数据，避免状态污染
• 逻辑顺序合理：先过滤空值键值对，再处理键名修改，步骤清晰无冲突
• 空对象过滤精准：通过some判断是否存在非空值，彻底排除无效对象
• 类型适配处理：自动将字符串格式的数字转为数值类型，完全匹配示例的期望输出
• 链式调用简洁：利用数组方法链式处理，代码结构清晰，易读易维护

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