如何对嵌套JavaScript对象按键排序并扁平化提取指定字段？

原始数据 #

{
  4: {
    1: [
      { order: 1, name: 'Test 4' }
    ]
  },
  0: {
    15: [
      { order: 7, name: 'Test 1' },
      { order: 3, name: 'Test 3' },
    ],
    12: { 
      order: 1, name: 'Test 2'
    }
  }
}

注：原始数据中12对应的对象写法存在语法错误，已修正为合法格式

需求 #

1. 对嵌套结构中所有层级的对象键进行升序排序
2. 对所有包含order属性的数组元素，按order值升序排列
3. 将排序后的结构完全扁平化，最终得到仅包含name字段的对象数组

排序后的中间结果 #

{
  0: {
    12: { 
      order: 1, name: 'Test 2'
    },
    15: [
      { order: 3, name: 'Test 3' },
      { order: 7, name: 'Test 1' },
    ]
  },
  4: {
    1: [
      { order: 1, name: 'Test 4' }
    ]
  }
}

最终扁平化结果 #

[
  { name: 'Test 2' },
  { name: 'Test 3' },
  { name: 'Test 1' },
  { name: 'Test 4' }
]

现有尝试代码 #

你之前的代码仅实现了顶层对象键的排序，未处理嵌套层级、数组排序及扁平化需求：

Object.keys(obj)
  .sort()
  .reduce((acc, key) => { acc[key] = obj[key]; return acc; }, {});

完整解决方案 #

我们可以通过两个递归函数分别处理排序和扁平化，流程如下：

步骤1：递归排序嵌套结构 #

该函数会遍历所有层级，处理对象键排序和数组按order排序：

function sortNestedStructure(item) {
  // 处理数组：按order升序排序，同时递归处理数组内元素
  if (Array.isArray(item)) {
    return item
      .sort((a, b) => a.order - b.order)
      .map(sortNestedStructure);
  }
  // 处理对象：按键（转数字后）升序排序，递归处理每个属性值
  if (typeof item === 'object' && item !== null) {
    return Object.keys(item)
      .sort((a, b) => Number(a) - Number(b))
      .reduce((acc, key) => {
        acc[key] = sortNestedStructure(item[key]);
        return acc;
      }, {});
  }
  // 基础类型直接返回
  return item;
}

步骤2：递归扁平化并提取name #

该函数遍历排序后的结构，收集所有带name字段的对象，仅保留name属性：

function flattenAndExtractName(item) {
  const result = [];
  // 处理数组：遍历每个元素递归收集结果
  if (Array.isArray(item)) {
    item.forEach(el => result.push(...flattenAndExtractName(el)));
  }
  // 处理对象：存在name字段则提取，否则递归处理属性值
  else if (typeof item === 'object' && item !== null) {
    if ('name' in item) {
      result.push({ name: item.name });
    } else {
      Object.values(item).forEach(val => result.push(...flattenAndExtractName(val)));
    }
  }
  return result;
}

完整调用流程 #

// 修正后的原始数据
const originalObj = {
  4: {
    1: [
      { order: 1, name: 'Test 4' }
    ]
  },
  0: {
    15: [
      { order: 7, name: 'Test 1' },
      { order: 3, name: 'Test 3' },
    ],
    12: { 
      order: 1, name: 'Test 2'
    }
  }
};

// 先排序嵌套结构
const sortedObj = sortNestedStructure(originalObj);
// 再扁平化提取name字段
const finalResult = flattenAndExtractName(sortedObj);

console.log(finalResult);
// 输出：
// [ { name: 'Test 2' }, { name: 'Test 3' }, { name: 'Test 1' }, { name: 'Test 4' } ]

代码说明 #

• sortNestedStructure：递归遍历所有层级，确保对象按键升序排列，数组按order值升序排列
• flattenAndExtractName：递归遍历排序后的结构，精准收集带name字段的对象，最终合并为一维数组

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