本教程旨在解决javascript中将包含多组键值对的单一扁平化对象，根据键名前缀拆分为多个独立对象的数组问题。通过遍历原始对象的键，识别前缀并动态构建新对象，最终将单个复杂对象重构为一组清晰、独立的结构化对象，提升数据可读性和可维护性。
在前端开发中，我们经常需要对数据结构进行转换，以适应不同的业务逻辑或展示需求。一个常见的挑战是将一个包含多组相关数据的“扁平化”对象，拆分成一个由多个独立、结构化对象组成的数组。这种场景通常出现在数据源将所有相关信息合并到一个单一记录中，而我们需要将其解耦为更易于管理和操作的独立实体时。
问题描述
假设我们接收到一个javaScript数组，其中只包含一个对象。这个对象的键名通过数字前缀（例如 “0key1”, “1key1”, “2key1″）来区分不同的逻辑组，但所有键值对都“挤”在了一个对象内部，如下所示：
const originalData = [{ "0key1": "a33", "0key2": "Aab", "0key3": "i", "1key1": "e78", "1key2": "Vib", "1key3": "j", "2key1": "c99", "2key2": "aig", "2key3": "k" }];
我们的目标是将这个单一的扁平化对象转换成一个数组，其中每个元素都是一个独立的javascript对象。每个新对象应包含一组以相同数字前缀开头的键值对，从而形成更清晰、更易于处理的结构。期望的输出格式如下：
[ {"0key1":"a33","0key2":"Aab","0key3":"i"}, {"1key1":"e78","1key2":"Vib","1key3":"j"}, {"2key1":"c99","2key2":"Aig","2key3":"k"} ]
解决方案
要实现这种数据结构的转换，我们可以采用一种迭代和重构的策略。核心思路是遍历原始对象的每一个键，提取其数字前缀，然后根据这个前缀将对应的键值对分配到一个新的、独立的子对象中。最终，我们将这些按前缀分组的子对象集合转换为一个数组。
立即学习“Java免费学习笔记（深入）”；
实现步骤
- 校验输入： 首先，对输入数据进行基本的校验，确保它是一个包含至少一个对象的数组，并且该对象非空。
- 获取原始对象： 从输入的数组中提取出唯一的那个扁平化对象。
- 初始化中间存储： 创建一个空对象 groupedObjects，用于临时存储按前缀分组的子对象。这个对象的键将是原始键的前缀（例如 ‘0’, ‘1’, ‘2’），值将是对应的子对象。
- 遍历键并分组：
- 生成最终数组： 遍历完成后，groupedObjects 将包含所有按前缀分组的子对象。使用 Object.values() 方法，将这些子对象提取出来，形成最终的目标数组。
示例代码
以下是实现上述逻辑的JavaScript函数：
/** * 将包含扁平化键值对的单一对象拆分为多个结构化对象数组。 * * @param {Array<Object>} input 包含一个扁平化对象的数组。 * 例如: [{"0key1": "a", "1key1": "b"}] * @returns {Array<Object>} 拆分后的结构化对象数组。 * 例如: [{"0key1": "a"}, {"1key1": "b"}] */ function splitFlatObjectIntoStructuredArray(input) { // 1. 校验输入是否有效 if (!Array.isArray(input) || input.length === 0 || typeof input[0] !== 'object' || input[0] === NULL) { console.warn("输入格式不正确，期望一个包含单个对象的数组。"); return []; } // 2. 获取数组中的唯一对象 const originalObject = input[0]; // 3. 初始化用于按前缀分组的中间对象 const groupedObjects = {}; // 4. 遍历原始对象的所有键并进行分组 Object.keys(originalObject).forEach((key) => { const prefix = key.substr(0, 1); // 提取键的前缀（例如 '0', '1', '2'） // 如果该前缀对应的子对象尚未创建，则初始化它 // 使用逻辑或 (||) 运算符提供默认值，简洁高效 groupedObjects[prefix] = groupedObjects[prefix] || {}; // 将当前键值对添加到对应的子对象中 groupedObjects[prefix][key] = originalObject[key]; }); // 5. 将按前缀分组的中间对象的值（即那些子对象）转换为数组 return Object.values(groupedObjects); } // 原始数据示例 const originalInput = [{ "0key1": "a33", "0key2": "Aab", "0key3": "i", "1key1": "e78", "1key2": "Vib", "1key3": "j", "2key1": "c99", "2key2": "Aig", "2key3": "k" }]; // 调用函数进行转换 const transformedArray = splitFlatObjectIntoStructuredArray(originalInput); console.log('转换后的数组:', transformedArray); /* 预期的控制台输出: [ {"0key1":"a33","0key2":"Aab","0key3":"i"}, {"1key1":"e78","1key2":"Vib","1key3":"j"}, {"2key1":"c99","2key2":"Aig","2key3":"k"} ] */
代码解析
- input[0]: 我们假设输入数组只有一个元素，因此直接通过索引 0 访问它来获取需要处理的扁平化对象。
- Object.keys(originalObject).forEach((key) => {…}): 这是一个标准的JavaScript模式，用于遍历一个对象的所有可枚举字符串属性（即键）。forEach 方法对每个键执行提供的回调函数。
- key.substr(0, 1): 这个方法用于从当前键的起始位置（索引 0）提取一个字符。它假设键的前缀始终是一个字符。如果键名规则是多字符前缀（例如 “item0key1″），你需要相应地调整此处的逻辑，例如使用正则表达式或 `key.split(‘‘)[0]` 等方法来提取前缀。
- groupedObjects[prefix] = groupedObjects[prefix] || {};: 这是一个非常实用的JavaScript短路求值技巧，用于确保 groupedObjects[prefix] 存在。如果 groupedObjects[prefix] 当前是 undefined 或 null（表示这是第一次遇到这个前缀），它将被初始化为一个新的空对象 {}；否则，它将保持其现有值。这避免了在每次添加属性之前进行显式的 if (groupedObjects[prefix] === undefined) 检查，使代码更简洁。
- groupedObjects[prefix][key] = originalObject[key];: 将原始对象中的当前键值对复制到 groupedObjects 中对应前缀的子对象里。
- Object.values(groupedObjects): 这是最后一步，也是关键一步。当 forEach 循环完成后，groupedObjects 对象将包含所有按前缀分组的子对象作为其值。Object.values() 方法将这些值提取出来，并返回一个新数组，这正是我们期望的输出格式。
注意事项与拓展
- 键名前缀的灵活性： 本教程假设键名前缀是一个字符（在本例中是数字）。如果你的键名前缀是多字符（例如 “group_0key1″），你需要调整提取前缀的逻辑。例如，可以使用 `key.split(‘‘)[0]` 或更复杂的正则表达式来匹配和提取。
- 输入数据结构的适配： 当前代码假设输入是一个包含单个对象的数组。如果你的输入直接就是一个对象，或者是一个包含多个扁平化对象的数组，你需要相应地调整函数签名和内部对 input[0] 的访问方式。
- 健壮性考虑： 在生产环境中，为了提高代码的健壮性，你可能需要添加更多的输入校验，例如检查 input 是否为 null 或 undefined，或者 input[0] 是否确实是一个非空的JavaScript对象。
- 性能： 对于大多数常见的用例，这种方法是高效的。它的时间复杂度是线性的（O(N)，其中 N 是原始对象中键的数量），因为我们只需要遍历一次对象的键。
总结
通过上述方法，我们成功地将一个包含扁平化键值对的单一JavaScript对象，根据键名前缀有效地拆分成了多个结构清晰、独立的子对象数组。这种数据重构技巧在处理来自后端接口的复杂数据、进行数据清洗或需要对数据进行进一步加工时非常有用。掌握这种能力能够帮助开发者更灵活、高效地处理各种数据转换需求，从而提高代码的可读性、可维护性和整体开发效率。