JS如何按字母序排序对象数组且将含url属性的对象前置

问题分析 #

1. 你当前的排序逻辑存在两个核心问题：
   • 逻辑判断只覆盖了b有url的场景，没有考虑a有url、两者都有/都没有url的边界情况
   • 1 || (a.name < b.name) 这段逻辑永远返回1，name的排序规则完全没有生效
2. 你打印的myData是嵌套数组结构，需要先扁平化处理为一维数组，才能对所有对象统一排序

正确实现代码 #

var myData = props?.data || []
// 先把嵌套数组拍平为一维数组，如果本身就是一维数组flat()也不会有副作用
myData = myData.flat()

if(myData.length > 0){
  // 自定义排序规则
  myData.sort(function(a, b){
    // 第一层判断：有url的排前面
    const aHasUrl = !!a.url
    const bHasUrl = !!b.url
    if (aHasUrl && !bHasUrl) return -1
    if (!aHasUrl && bHasUrl) return 1
    // 第二层判断：都有/都没有url时，按name字母升序排序
    return a.name.localeCompare(b.name)
  })
}

console.log(myData) // 输出排序后的结果

逻辑说明 #

• flat() 方法会将嵌套的数组结构拍平为一维数组，兼容一维/二维数组场景
• 第一层判断先处理url优先级：只要有url的对象就排在无url对象前面，两者都有/都没有url时进入下一层排序
• 字符串排序使用localeCompare方法，是JS内置的按自然语言字母顺序排序的API，比手动比较大小更稳妥，自动处理大小写、特殊字符等场景

注意：Array.sort()是原地排序方法，会直接修改原数组。如果需要保留原数组的内容，可以在排序前先做浅拷贝：

myData = [...myData.flat()].sort(/* 排序逻辑同上 */)

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