JavaScript嵌套对象数组按父子分类名称字母顺序排序问题

问题原因 #

• 现有代码未将子分类排序逻辑与对应父分类绑定，单独排序的formattedSubcategory没有覆盖到每个父分类下的subcategory数组，是部分分类子项排序失效的核心原因
• 子分类排序使用基础字符串比较符</>，未适配大小写、特殊字符、多语言场景的排序规则，也可能导致部分场景排序不符合预期

修复代码 #

// 1. 遍历所有父分类，逐个排序其下的子分类数组
const processedList = formatted.map(parent => {
  // 仅对存在子分类的项做排序，拷贝数组避免直接修改原数据
  const sortedSub = [...(parent.subcategory || [])].sort((a, b) => {
    // 使用localeCompare实现符合自然语言的排序，sensitivity: 'base'可忽略大小写差异
    return a.category_name.localeCompare(b.category_name, undefined, {
      sensitivity: 'base'
    })
  })
  return { ...parent, subcategory: sortedSub }
})

// 2. 对父分类整体按名称排序
return processedList.sort((a, b) => {
  return a.category_name.localeCompare(b.category_name, undefined, {
    sensitivity: 'base'
  })
})

核心优化说明 #

• 遍历每个父分类时单独处理其子分类排序，保证所有父分类的subcategory都被正确排序，不会出现漏排
• 统一使用localeCompare做字符串排序，适配大小写不敏感、特殊字符、多语言的排序需求，避免Button和button类名称排序错位
• 对子分类数组做展开拷贝后再排序，避免直接修改原始数组数据

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