JavaScript中如何将扁平化对象拆分为结构化对象数组

在前端开发过程中，我们经常会遇到接口返回扁平化对象的情况，比如返回的数据是{name_1: '张三', age_1: 18, name_2: '李四', age_2: 20}这种格式，而页面渲染需要的是[{name: '张三', age: 18}, {name: '李四', age: 20}]这样的结构化对象数组，这时候就需要掌握将扁平化对象拆分为结构化对象数组的方法。

基础实现思路

拆分的核心逻辑是先识别扁平化对象中键名的规律，通常这类对象的键名会带有数字后缀用来区分不同的数据项，我们可以先提取出所有的后缀标识，再按照标识分组组装成对应的对象，最后组成数组。

步骤拆解

• 第一步：获取扁平化对象的所有键名，遍历键名提取出公共前缀和数字后缀
• 第二步：对数字后缀去重，得到所有数据项的标识集合
• 第三步：遍历每个标识，从原对象中匹配对应前缀的键值，组装成单个对象
• 第四步：将所有组装好的单个对象放入数组，得到最终的结构化对象数组

常规实现方案

我们可以通过循环遍历的方式实现拆分，以下是针对键名带下划线加数字后缀的扁平化对象的处理示例：

// 待拆分的扁平化对象
const flatObj = {
  name_1: '张三',
  age_1: 18,
  name_2: '李四',
  age_2: 20,
  name_3: '王五',
  age_3: 22
};

// 拆分函数
function splitFlatObjToArray(obj) {
  const result = [];
  // 存储所有出现的数字后缀
  const suffixes = new Set();
  // 存储前缀和对应键名的映射
  const prefixMap = {};

  // 遍历对象所有键名
  for (const key in obj) {
    // 匹配键名中的前缀和数字后缀，假设格式是 前缀_数字
    const match = key.match(/^(.+)_(d+)$/);
    if (match) {
      const prefix = match[1];
      const suffix = match[2];
      suffixes.add(suffix);
      if (!prefixMap[prefix]) {
        prefixMap[prefix] = {};
      }
      prefixMap[prefix][suffix] = obj[key];
    }
  }

  // 按照后缀组装对象
  suffixes.forEach(suffix => {
    const item = {};
    for (const prefix in prefixMap) {
      if (prefixMap[prefix][suffix] !== undefined) {
        item[prefix] = prefixMap[prefix][suffix];
      }
    }
    result.push(item);
  });

  return result;
}

const structuredArray = splitFlatObjToArray(flatObj);
console.log(structuredArray);
// 输出：[{name: '张三', age: 18}, {name: '李四', age: 20}, {name: '王五', age: 22}]

使用Object.entries优化实现

借助Object.entries方法可以直接获取对象的键值对数组，简化遍历逻辑，以下是优化后的实现：

const flatObj = {
  user_name_1: '张三',
  user_age_1: 18,
  user_name_2: '李四',
  user_age_2: 20
};

function splitObjToArray(obj) {
  const tempMap = {};
  Object.entries(obj).forEach(([key, value]) => {
    const match = key.match(/^(.+)_(d+)$/);
    if (match) {
      const prefix = match[1];
      const suffix = match[2];
      if (!tempMap[suffix]) {
        tempMap[suffix] = {};
      }
      tempMap[suffix][prefix] = value;
    }
  });
  return Object.values(tempMap);
}

const res = splitObjToArray(flatObj);
console.log(res);
// 输出：[{user_name: '张三', user_age: 18}, {user_name: '李四', user_age: 20}]

注意事项

实际开发中扁平化对象的键名格式可能不统一，比如有的用点分隔，有的没有固定后缀，这时候需要调整正则匹配的规则，确保能正确提取出数据项的标识。如果原对象中存在不符合拆分规则的键名，建议在遍历时增加过滤逻辑，避免将这些无效键值加入最终的结构化数组中。

另外如果扁平化对象的数据量较大，需要注意遍历的性能，尽量减少不必要的循环操作，比如提前缓存需要的前缀集合，避免重复遍历键名。

JavaScript扁平化对象结构化对象数组对象拆分修改时间：2026-07-03 19:51:23