JavaScript对象数组按order键升序排序，子数组未排序问题

原代码仅实现了顶层数组按order字段排序，但没处理每个对象里的subMenu子数组排序。要实现嵌套排序，只需要在排序完顶层数组后，遍历每个元素，递归处理subMenu即可。

修改后的代码 #

var sort = function(prop, arr) {
  prop = prop.split('.');
  var len = prop.length;
  // 先排序当前层级的数组
  arr.sort(function(a, b) {
    var i = 0;
    let valA = a;
    let valB = b;
    while (i < len) {
      valA = valA[prop[i]];
      valB = valB[prop[i]];
      i++;
    }
    return valA < valB ? -1 : valA > valB ? 1 : 0;
  });
  // 遍历元素，递归处理嵌套的subMenu数组
  arr.forEach(item => {
    if (item.subMenu && Array.isArray(item.subMenu)) {
      sort(prop, item.subMenu);
    }
  });
  return arr;
};

var MainObj = [
  {
    "title": "Merchant2",
    "order": 2,
    "subMenu": [
      {"subMenu1": "Initiate2", "order": 2},
      {"subMenu2": "Initiate1", "order": 1}
    ]
  },
  {
    "title": "Merchant1",
    "order": 1,
    "subMenu": [
      {"subMenu1": "Initiate2", "order": 2},
      {"subMenu2": "Initiate1", "order": 1}
    ]
  }
];

console.log(sort('order', MainObj));

正确输出结果 #

[
  {
    "title": "Merchant1",
    "order": 1,
    "subMenu": [
      {"subMenu2": "Initiate1", "order": 1},
      {"subMenu1": "Initiate2", "order": 2}
    ]
  },
  {
    "title": "Merchant2",
    "order": 2,
    "subMenu": [
      {"subMenu2": "Initiate1", "order": 1},
      {"subMenu1": "Initiate2", "order": 2}
    ]
  }
]

说明 #

• 原代码排序时直接修改了a、b变量，这里改用valA、valB承接属性值，避免污染原始对象引用，代码更规范。
• 新增的forEach遍历逻辑会自动检查每个元素是否包含subMenu数组，若存在则递归调用排序函数，实现嵌套层级的排序。
• 你提供的期望输出存在笔误（重复的subMenu1键、错误的title值），上面的输出是符合排序逻辑的正确结果。

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