JavaScript对象数组排序在浏览器与IDE输出不一致的解决方法

问题背景 #

我使用JavaScript基于created（创建时间）和finished（是否完成）属性对任务对象数组进行排序，代码如下：

let tasks = [];

let task1 = {
    "id" : 1,
    "job" : "t1",
    "created" : 100,
    "end" : 0,
    "finished" : 1,
}

let task2 = {
    "id" : 2,
    "job" : "t2",
    "created" : 101,
    "end" : 105,
    "finished" : 1,
}

let task3 = {
    "id" : 3,
    "job" : "t3",
    "created" : 102,
    "end" : 0,
    "finished" : 0,
}

// 注意：此处变量名拼写错误，应为task4
let taks4 = {
    "id" : 4,
    "job" : "t4",
    "created" : 103,
    "end" : 104,
    "finished" : 1,
}

let task5 = {
    "id" : 5,
    "job" : "t5",
    "created" : 104,
    "end" : 0,
    "finished" :0,
}

function compare(a,b){
    if (a.finished < b.finished){
        return -1;
    }
    else if (a.finished === b.finished){
        if(a.finished === 0){
            return a.created - b.created
        }
        else if(a.finished === 1){
            return b.end - a.end
        }
    }
    return 0;
}
tasks.push(task1);
tasks.push(task2);
tasks.push(task3);
tasks.push(taks4);
tasks.push(task5);

console.log(tasks)

console.log("sort here")
tasks.sort(compare);
console.log(tasks)

tasks[1].created=106;
tasks[3].end=108;

console.log("sort here")
tasks.sort(compare);
console.log(tasks)

这段代码在IDE中运行时输出符合预期：

[
  { id: 1, job: 't1', created: 100, end: 0, finished: 1 },
  { id: 2, job: 't2', created: 101, end: 105, finished: 1 },
  { id: 3, job: 't3', created: 102, end: 0, finished: 0 },
  { id: 4, job: 't4', created: 103, end: 104, finished: 1 },
  { id: 5, job: 't5', created: 104, end: 0, finished: 0 }
]
sort here
[
  { id: 3, job: 't3', created: 102, end: 0, finished: 0 },
  { id: 5, job: 't5', created: 104, end: 0, finished: 0 },
  { id: 2, job: 't2', created: 101, end: 105, finished: 1 },
  { id: 4, job: 't4', created: 103, end: 104, finished: 1 },
  { id: 1, job: 't1', created: 100, end: 0, finished: 1 }
]
sort here
[
  { id: 3, job: 't3', created: 102, end: 0, finished: 0 },
  { id: 5, job: 't5', created: 106, end: 0, finished: 0 },
  { id: 4, job: 't4', created: 103, end: 108, finished: 1 },
  { id: 2, job: 't2', created: 101, end: 105, finished: 1 },
  { id: 1, job: 't1', created: 100, end: 0, finished: 1 }
]

但将脚本嵌入HTML文件后，浏览器控制台的输出结果与IDE不一致，多款浏览器测试结果均相同。需要修正排序逻辑以适配网页环境。

问题分析 #

你的compare函数存在逻辑缺陷：当a.finished > b.finished时（例如a是已完成任务，b是未完成任务），函数返回0。这会让Array.sort()认为两个元素的相对顺序可以任意调整，而不同环境（IDE/浏览器）的排序算法实现细节不同（如排序稳定性、具体排序策略），最终导致排序结果出现差异。

修正方案 #

修改compare函数，当a.finished > b.finished时返回1，明确告知排序算法a应该排在b之后：

function compare(a,b){
    if (a.finished < b.finished){
        // 未完成任务优先排在已完成任务前面
        return -1;
    }
    else if (a.finished === b.finished){
        if(a.finished === 0){
            // 未完成任务按创建时间升序排列
            return a.created - b.created;
        }
        else if(a.finished === 1){
            // 已完成任务按结束时间降序排列
            return b.end - a.end;
        }
    }
    // 已完成任务排在未完成任务后面
    return 1;
}

同时修正代码中的变量名拼写错误：将taks4改为task4，避免潜在的逻辑错误。

原理说明 #

JavaScript的Array.sort()要求比较函数返回值遵循以下规则：

• 返回负数：a排在b的前面
• 返回0：a和b的相对顺序保持不变（部分旧环境可能不保证稳定排序）
• 返回正数：a排在b的后面

修正后的函数严格遵循这一规则，确保在任何JavaScript环境下排序逻辑的一致性。

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