JavaScript 中将单行扁平化对象数组拆分为多行独立对象

本教程详细介绍了如何在 JavaScript 中，将一个包含单个扁平化对象的数组，根据其键名的前缀（如"0key1"、"1key1"）拆分成多个独立的、结构清晰的对象数组。文章通过示例代码演示了如何遍历原始对象的键，动态创建并填充新对象，从而实现数据的重塑，提升数据可读性和处理效率。

在数据处理和前端开发中，我们有时会遇到一种特殊的数据结构：一个数组中只包含一个对象，而这个对象内部的属性键名却通过某种前缀（例如数字索引）来区分不同的逻辑实体。这种扁平化的结构虽然紧凑，但在需要对每个逻辑实体独立操作时，会显得不够直观和便捷。本教程旨在提供一种高效的 JavaScript 方法，将这种单行扁平化的对象数组重塑为多行独立的、结构清晰的对象数组。

场景描述与问题分析

假设我们有一个 JavaScript 数组，其中只有一个对象。这个对象的键名按照 NkeyX 的模式命名，其中 N 是一个数字索引，表示逻辑上的分组，而 keyX 是该分组下的具体属性。

原始数据结构示例：

立即学习“Java免费学习笔记（深入）”；

行者AI

行者AI绘图创作，唤醒新的灵感，创造更多可能

100

查看详情

const originalData = [{
  "0key1": "a33",
  "0key2": "Aab",
  "0key3": "i",
  "1key1": "e78",
  "1key2": "Vib",
  "1key3": "j",
  "2key1": "c99",
  "2key2": "Aig",
  "2key3": "k"
}];

在这个例子中，0key1、0key2、0key3 属于第一个逻辑实体，1key1、1key2、1key3 属于第二个，以此类推。我们的目标是将这些逻辑实体分离出来。

期望的输出结构：

[
  {"0key1":"a33","0key2":"Aab","0key3":"i"},
  {"1key1":"e78","1key2":"Vib","1key3":"j"},
  {"2key1":"c99","2key2":"Aig","2key3":"k"}
]

解决方案：基于键名前缀的动态分组

解决此问题的核心思路是遍历原始对象的每一个键，提取出用于分组的前缀，然后根据这个前缀动态地构建新的对象。

核心逻辑步骤：

1. 访问内部对象： 由于输入是一个包含单个对象的数组，我们首先需要访问到这个唯一的内部对象。
2. 遍历所有键： 使用 Object.keys() 获取该对象的所有属性键名，并进行遍历。
3. 提取分组标识： 对于每个键名，提取其第一个字符（即数字前缀），作为该属性所属分组的唯一标识。
4. 动态构建新对象： 使用一个临时对象（例如 splitObjects）来存储不同分组的新对象。如果某个分组标识第一次出现，就在 splitObjects 中为其创建一个新的空对象；否则，直接向已存在的对象中添加属性。
5. 收集结果： 遍历结束后，splitObjects 将包含所有按分组构建好的对象。最后，使用 Object.values() 将这些对象转换成一个数组，即为我们期望的输出。

示例代码：

/**
 * 将包含扁平化对象的数组拆分为多个独立对象的数组。
 * 假设输入数组只包含一个对象，且该对象的键名以数字前缀分组。
 *
 * @param {Array<Object>} input 包含单个扁平化对象的数组。
 * @returns {Array<Object>} 拆分后的独立对象数组。
 */
function splitArrayOfFlattenedObject(input) {
  // 检查输入是否有效，确保是包含单个对象的数组
  if (!Array.isArray(input) || input.length !== 1 || typeof input[0] !== 'object' || input[0] === null) {
    console.warn("输入格式不符合预期，请提供一个包含单个对象的数组。");
    return [];
  }

  const sourceObject = input[0]; // 获取数组中唯一的源对象
  const splitObjects = {}; // 用于存储按前缀分组的新对象

  // 遍历源对象的所有键
  Object.keys(sourceObject).forEach((key) => {
    // 提取键名的第一个字符作为分组标识
    const groupIdentifier = key.charAt(0); // 或者 key.substring(0, 1)

    // 如果该分组标识还未在 splitObjects 中创建对应的对象，则初始化一个空对象
    if (!splitObjects[groupIdentifier]) {
      splitObjects[groupIdentifier] = {};
    }
    // 将当前键值对添加到对应的分组对象中
    splitObjects[groupIdentifier][key] = sourceObject[key];
  });

  // 返回 splitObjects 中所有值的数组，即为最终结果
  return Object.values(splitObjects);
}

// 原始数据
const originalData = [{
  "0key1": "a33",
  "0key2": "Aab",
  "0key3": "i",
  "1key1": "e78",
  "1key2": "Vib",
  "1key3": "j",
  "2key1": "c99",
  "2key2": "Aig",
  "2key3": "k"
}];

const result = splitArrayOfFlattenedObject(originalData);
console.log('拆分后的结果:', result);

/*
输出结果:
[
  { '0key1': 'a33', '0key2': 'Aab', '0key3': 'i' },
  { '1key1': 'e78', '1key2': 'Vib', '1key3': 'j' },
  { '2key1': 'c99', '2key2': 'Aig', '2key3': 'k' }
]
*/

代码解析：

1. function splitArrayOfFlattenedObject(input): 定义一个函数，接收一个数组作为输入。
2. 输入校验: 增加了基本的输入校验，确保 input 是一个包含单个对象的数组，提高了函数的健壮性。
3. const sourceObject = input[0];: 从输入数组中取出唯一的扁平化对象。
4. const splitObjects = {};: 初始化一个空对象 splitObjects。这个对象将用作一个临时的哈希表，其键是分组标识符（如 "0", "1", "2"），其值是对应分组的新对象。
5. Object.keys(sourceObject).forEach((key) => { ... });: 遍历 sourceObject 的所有属性键。
6. const groupIdentifier = key.charAt(0);: 使用 charAt(0) 方法获取当前键名的第一个字符。这是我们定义的分组标识符。
7. if (!splitObjects[groupIdentifier]) { splitObjects[groupIdentifier] = {}; }: 这是一个关键步骤。它检查 splitObjects 中是否已经存在以 groupIdentifier 为键的对象。如果不存在，则创建一个新的空对象并赋值给 splitObjects[groupIdentifier]。这确保了每个分组标识符都对应一个独立的对象。
8. splitObjects[groupIdentifier][key] = sourceObject[key];: 将原始对象中的当前键值对，添加到 splitObjects 中对应 groupIdentifier 的新对象里。
9. return Object.values(splitObjects);: 最后，使用 Object.values() 方法将 splitObjects 对象中的所有值（即我们按分组创建的独立对象）提取出来，并作为一个新数组返回。

注意事项与扩展

• 键名命名约定： 此解决方案高度依赖于键名具有一致的分组前缀（例如，总是第一个字符）。如果键名约定不同（例如，前缀长度不固定，或分组标识符在键名的其他位置），则需要调整 groupIdentifier 的提取逻辑。
• 性能： 对于中等规模的数据，此方法效率较高。它只需要遍历一次原始对象的键。
• 通用性： 这种模式可以推广到其他需要根据键名模式进行数据重组的场景。例如，如果键名是 group1_itemA、group1_itemB、group2_itemC，则可以使用正则表达式或 split('_') 来提取分组标识符。
• 输入校验： 在实际应用中，对输入数据进行更严格的校验是良好的实践，以防止因数据格式不匹配而导致的错误。

总结

通过本教程介绍的方法，我们可以有效地将 JavaScript 中扁平化的单对象数组重塑为结构更清晰、更易于处理的多对象数组。这种基于键名前缀的动态分组策略，不仅解决了特定的数据重组问题，也为处理类似的数据转换任务提供了通用的思路和实现范例。理解并掌握这种数据转换技巧，将有助于提升您在 JavaScript 数据处理方面的能力。

以上就是JavaScript 中将单行扁平化对象数组拆分为多行独立对象的详细内容，更多请关注php中文网其它相关文章！