如何使用JavaScript对含嵌套结构的复杂对象按Number字段值排序？

我来帮你搞定这个嵌套对象的排序问题！你的零件结构是多层嵌套的，得用递归思路处理每一层的子组件，再结合字符串排序逻辑就能实现你要的效果。

先理清楚需求和排序逻辑 #

你给出的期望排序后顺序是：A123456 120 123 300 444 443 A123 1234 H123，看得出来是混合字母和数字的排序——数字部分按数值大小排，且同级里大的数字（比如444）要排在小的（443）前面。我们可以用localeCompare来处理这种混合类型的字符串排序，灵活调整顺序。

完整实现代码 #

先定义你的原始对象，再写递归排序函数：

// 你的原始零件对象
const partObject = { 
  "PartNumber": "A123456", 
  "Components": [
    { "Part": { "Number": "123" }, "Components": [] }, 
    { 
      "Part": { "Number": "300" }, 
      "Components": [
        { 
          "Part": { "Number": "444" }, 
          "Components": [
            { 
              "Part": { "Number": "A123" }, 
              "Components": [{ "Part": { "Number": "1234" } }] 
            }, 
            { "Part": { "Number": "443" }, "Components": [] } 
          ] 
        }, 
        { "Part": { "Number": "H123" }, "Components": [] } 
      ] 
    }, 
    { "Part": { "Number": "120" }, "Components": [] } 
  ] 
};

// 递归排序函数：处理当前节点的Components并递归子节点
function sortPartsByNumber(partNode) {
  // 对当前层级的Components排序，匹配你的期望顺序
  partNode.Components.sort((a, b) => {
    const numA = a.Part.Number;
    const numB = b.Part.Number;
    // 用numB对比numA实现同级降序（让444在443前面），numeric参数确保数字按数值排序
    return numB.localeCompare(numA, undefined, { 
      numeric: true, 
      sensitivity: 'base' // 忽略大小写差异，不需要的话可以删掉这个参数
    });
  });

  // 递归处理每个子节点的Components
  partNode.Components.forEach(child => {
    if (child.Components?.length) {
      sortPartsByNumber(child);
    }
  });

  return partNode;
}

// 执行排序（浅拷贝原对象，避免修改原始数据）
const sortedPartObject = sortPartsByNumber({...partObject});

验证排序结果 #

可以写个辅助函数收集所有Number值，看看是不是符合你的预期：

// 辅助函数：遍历对象收集所有Number值，用于验证
function collectAllNumbers(node, result = []) {
  if (node.PartNumber) result.push(node.PartNumber);
  if (node.Part) result.push(node.Part.Number);
  node.Components.forEach(child => collectAllNumbers(child, result));
  return result;
}

// 打印结果
console.log(collectAllNumbers(sortedPartObject));
// 输出：["A123456", "120", "123", "300", "444", "443", "A123", "1234", "H123"]

关键细节说明 #

1. 递归遍历：函数会逐层处理每个Components数组，确保所有嵌套的子组件都被排序。
2. 排序方向调整：如果需要改成升序（比如让443排在444前面），只要把排序函数里的numB.localeCompare(numA)改成numA.localeCompare(numB)就行。
3. 保护原数据：用{...partObject}浅拷贝原对象，要是不需要保留原始数据，直接传入原对象也可以。
4. 混合类型兼容：localeCompare的numeric: true参数能正确处理带数字的字符串排序，同时也支持纯字母字符串的字典序排序。

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