如何在JavaScript中递归排序带层级子节点的数组？现有递归排序方案失效问题排查与修复

你的递归排序思路方向是对的，但代码里存在几个关键逻辑错误，导致子节点没有被正确排序：

核心问题点 #

• 重复排序当前层级数组：在sortingData的循环里，你每次迭代都调用sorting(data, label, sort)，反复对同一个数组排序，完全多余还会打乱逻辑，每个层级只需要排序一次。
• 遍历与赋值逻辑不匹配：你循环遍历的是原数组的索引，但sort是原地修改数组的操作，排序后元素位置已经改变，这会导致你处理子节点时对应到错误的元素上。
• 排序比较函数有缺陷：原比较逻辑没有处理值相等的情况（应该返回0），而且对字符串类型的name字段，直接用>比较无法正确处理本地化排序，比如特殊字符、多语言场景。

修复后的完整代码 #

// 优化排序比较函数，适配数字和字符串类型
const sorting = (array, label, sortedBy) => {
  // 复制原数组避免原地修改（可选，若不需要保留原数据可去掉此步）
  const copiedArray = [...array];
  return copiedArray.sort((a, b) => {
    const valA = a[label];
    const valB = b[label];
    
    if (typeof valA === 'number' && typeof valB === 'number') {
      // 数字类型直接相减，升序返回 valA - valB，降序反之
      return sortedBy === 'asc' ? valA - valB : valB - valA;
    } else {
      // 字符串用localeCompare处理本地化排序
      const compareResult = String(valA).localeCompare(String(valB));
      return sortedBy === 'asc' ? compareResult : -compareResult;
    }
  });
};

const sortingData = (data, label, sort) => {
  // 先完成当前层级的排序
  const sortedArray = sorting(data, label, sort);
  
  // 遍历排序后的每个元素，递归处理子节点
  sortedArray.forEach(item => {
    if (item.children && item.children.length > 0) {
      item.children = sortingData(item.children, label, sort);
    }
  });
  
  return sortedArray;
};

// 示例数据
const DATA = [ { id: 123, name: "kevin", children: [ { id: 345, name: "luke", children: [ { id: 67895, name: "jane", children: [{ id: 556, name: "che", children: [] }] }, { id: 89760, name: "kendrick", children: [ { id: 4627, name: "auro", children: [] }, { id: 777, name: "civil", children: [] }, { id: 37654, name: "hobbit", children: [] } ] } ] }, { id: 123215, name: "ron", children: [] } ] }, { id: 7642, name: "dobby", children: [] }, { id: 2589, name: "porter", children: [] } ];

// 测试按id升序排序
const sortedData = sortingData(DATA, "id", "asc");
console.log(sortedData);

修改说明 #

1. 避免原地污染原数据：在sorting里通过[...array]复制数组，确保原数据不会被改动，若业务不需要保留原数据，可去掉复制步骤直接排序原数组。
2. 正确的递归流程：先完成当前层级的排序，再遍历排序后的元素递归处理子节点，确保每一层级的节点都被正确排序。
3. 健壮的比较逻辑：区分数字和字符串类型，数字用减法更高效准确，字符串用localeCompare支持多语言场景，同时处理了值相等的边界情况。

这样修改后，无论是顶层数组还是所有嵌套的子节点，都会按照你指定的字段和排序规则完成正确排序，完全符合预期结果。

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