将深度嵌套关联数据结构转换为带路径的扁平数组

我帮你搞定这个嵌套结构扁平化的需求啦，咱们一步步来：

输入数据 #

字典 objectSchemasList

var objectSchemasList = {
  1: [
    { name: 'list_field1_1', uuid: 'uuid1', fieldObjectSchemaId: 2 },
    { name: 'list_field1_2', uuid: 'uuid2', fieldObjectSchemaId: null },
  ],
  2: [
    { name: 'list_field2_1', uuid: 'uuid3', fieldObjectSchemaId: null },
    { name: 'list_field2_2', uuid: 'uuid4', fieldObjectSchemaId: null },
  ],
  3: [
    { name: 'list_field3_1', uuid: 'uuid5', fieldObjectSchemaId: 1 },
    { name: 'list_field3_2', uuid: 'uuid6', fieldObjectSchemaId: null },
  ],
}

数组 objectSchemaFields

const objectSchemaFields = [
  { name: 'field_1', uuid: '_uuid1', fieldObjectSchemaId: null },
  { name: 'field_2', uuid: '_uuid2', fieldObjectSchemaId: null },
  { name: 'field_3', uuid: '_uuid3', fieldObjectSchemaId: 1 },
];

需求说明 #

要把上面这个支持无限层级嵌套的字段结构，转换成只包含path、name、uuid的扁平数组，其中path是父级到子级名称用点拼接的完整路径。

解决方案代码 #

用递归的方式处理无限嵌套最直观，直接上代码：

function flattenFields(fields, parentPath = '') {
  let result = [];
  
  for (const field of fields) {
    // 拼接当前字段的完整路径
    const currentPath = parentPath ? `${parentPath}.${field.name}` : field.name;
    // 把当前字段加入结果数组
    result.push({
      path: currentPath,
      name: field.name,
      uuid: field.uuid
    });
    
    // 如果当前字段有嵌套的子schema，递归处理子字段
    if (field.fieldObjectSchemaId !== null) {
      const childFields = objectSchemasList[field.fieldObjectSchemaId] || [];
      result = result.concat(flattenFields(childFields, currentPath));
    }
  }
  
  return result;
}

// 调用函数传入根字段数组
const result = flattenFields(objectSchemaFields);
console.log(result);

代码逻辑解释 #

1. 递归函数设计：flattenFields接收字段数组和父路径参数，返回扁平化后的结果数组。
2. 路径生成：有父路径就用父路径加当前字段名拼接，没有的话直接用字段名作为初始路径。
3. 嵌套处理：检查当前字段的fieldObjectSchemaId，如果不为空，就从objectSchemasList里取出对应的子字段数组，递归调用函数并把结果合并到总数组中。
4. 边界防护：如果找不到对应ID的子字段数组，默认用空数组，避免报错。

验证结果 #

运行代码后得到的结果和你预期的完全一致：

[
  { path: 'field_1', name: 'field_1', uuid: '_uuid1' },
  { path: 'field_2', name: 'field_2', uuid: '_uuid2' },
  { path: 'field_3', name: 'field_3', uuid: '_uuid3' },
  { path: 'field_3.list_field1_1', name: 'list_field1_1', uuid: 'uuid1' },
  { path: 'field_3.list_field1_1.list_field2_1', name: 'list_field2_1', uuid: 'uuid3' },
  { path: 'field_3.list_field1_1.list_field2_2', name: 'list_field2_2', uuid: 'uuid4' },
  { path: 'field_3.list_field1_2', name: 'list_field1_2', uuid: 'uuid2' }
]

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