JavaScript中基于键前缀拆分扁平化对象的指南

本教程详细介绍了如何在javascript中将一个包含多个以数字前缀命名的键值对的扁平化对象，转换成一个由多个独立对象组成的数组。通过遍历原始对象的键，提取键前缀进行分组，并最终将分组结果转换为目标数组，实现数据结构的重塑，提高数据的可读性和可操作性。

在JavaScript开发中，我们有时会遇到需要重塑数据结构的情况。例如，当一个对象的所有属性都扁平化地存储在一个单一对象中，且这些属性的键名遵循特定的命名模式（如带有数字前缀），我们可能需要将其拆分成一个包含多个独立对象的数组，每个对象代表一组相关的属性。本教程将详细讲解如何实现这一转换。

问题场景与目标

假设我们有一个数组，其中只包含一个对象。这个对象的键名以数字开头，后跟实际的键名，例如 "0key1", "0key2", "1key1", "1key2" 等。

原始数据结构示例：

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

我们的目标是将上述单一对象拆分成一个数组，其中每个元素都是一个独立的对象，包含原始数据中相同数字前缀的键值对。

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

期望的目标数据结构：

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

解决方案概述

实现这一转换的核心思路是：

1. 遍历原始对象的所有键。
2. 对于每个键，提取其开头的数字前缀。
3. 使用一个中间对象来暂存结果，以数字前缀作为键，值为一个新的对象，用于收集所有具有相同前缀的键值对。
4. 最终，将中间对象的所有值（即那些按前缀分组后的新对象）提取出来，形成一个数组。

详细实现步骤

我们将创建一个名为 splitArray 的函数来封装这个逻辑。

微信 WeLM

WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

下载

1. 定义函数与处理输入

首先，定义一个函数 splitArray，它接收一个数组作为输入。由于我们的原始数据是一个包含单一对象的数组，我们将直接操作 input[0]。

function splitArray(input) {
  // 用于暂存按前缀分组后的对象
  const splitObjects = {};

  // 获取原始数组中的第一个对象
  const sourceObject = input[0];

  // ... 后续逻辑
}

2. 遍历对象键并分组

使用 Object.keys() 方法获取 sourceObject 的所有键，然后使用 forEach() 方法遍历这些键。

  Object.keys(sourceObject).forEach((key) => {
    // 提取键的第一个字符作为前缀
    const firstChar = key.substr(0, 1);

    // 如果 splitObjects 中还没有这个前缀对应的子对象，则初始化它
    splitObjects[firstChar] = splitObjects[firstChar] || {};

    // 将当前键值对添加到对应的子对象中
    splitObjects[firstChar][key] = sourceObject[key];
  });

代码解释：

• key.substr(0, 1): 从当前键名中截取第一个字符。例如，对于键 "0key1"，firstChar 将是 "0"。
• splitObjects[firstChar] = splitObjects[firstChar] || {};: 这是一个常见的JavaScript模式，用于确保 splitObjects[firstChar] 是一个对象。如果 splitObjects[firstChar] 尚未定义（即 undefined），它会被初始化为一个空对象 {}。否则，它将保持其现有值。
• splitObjects[firstChar][key] = sourceObject[key];: 将原始对象中当前键 key 及其对应的值 sourceObject[key] 添加到 splitObjects 中以 firstChar 为键的子对象里。

3. 提取结果

在遍历完成后，splitObjects 将是一个类似这样的结构：

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

我们需要的是一个数组，其中包含这些子对象。可以使用 Object.values() 方法来获取 splitObjects 的所有值，这些值正是我们期望的独立对象。

  return Object.values(splitObjects);

完整代码示例

将上述步骤整合，得到完整的 splitArray 函数：

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

/**
 * 将包含数字前缀键的扁平化对象拆分为多个独立对象组成的数组。
 *
 * @param {Array