如何为对象数组中的每个唯一键创建对应新数组

问题描述 #

现有如下结构的对象数组：

originalArray = [
    { "16": { "id": 23, "data": "11",}, "17": { "id": 28, "data": "25",}, "header": "Row 2","id": 6},
    { "16": { "id": 23, "data": "AA",}, "17": { "id": 28, "data": "!!",}, "header": "Row 2","id": 6},
    // 更多对象...
]

每个数组元素是一个对象，除了header和id两个键外，其余键的格式为"number": {"id": x, "data": "something"}，且所有对象的键保持一致。

需要为每个非header、id的键创建一个新数组，新数组以gridData_为前缀、原键名为后缀，数组元素是原数组所有对象中对应键的data值，例如：

gridData_16 = ["11", "AA", ...]
gridData_17 = ["25", "!!", ...]

解决方案 #

可以通过一个对象统一管理所有目标数组，遍历原数组时逐个填充对应数据，代码实现如下：

createArrays() {
  // 用对象存储所有gridData数组，避免零散变量混乱
  const gridDataMap = {};

  this.originalArray.forEach(row => {
    Object.entries(row).forEach(([key, value]) => {
      // 跳过不需要处理的header和id键
      if (key === 'header' || key === 'id') return;

      // 生成目标数组的名称
      const arrayKey = `gridData_${key}`;
      // 如果数组未初始化，先创建空数组
      if (!gridDataMap[arrayKey]) {
        gridDataMap[arrayKey] = [];
      }
      // 将当前行的data值推入对应数组
      gridDataMap[arrayKey].push(value.data);
    });
  });

  // 把所有生成的数组挂载到this上，方便后续调用
  Object.assign(this, gridDataMap);
}

逻辑说明 #

1. 用gridDataMap作为容器，统一管理所有新生成的数组，避免创建大量零散变量；
2. 遍历原数组的每一行，再遍历行内的键值对，跳过header和id；
3. 对每个有效键，先检查对应的目标数组是否存在，不存在则初始化空数组；
4. 将当前行对应键的data值推入目标数组；
5. 最后通过Object.assign把所有数组挂载到this上，之后就可以通过this.gridData_16、this.gridData_17直接访问目标数组。

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