能否强制为空白Date对象赋值以解决待办列表日期排序空项置顶问题

原代码问题排查 #

• 错误1：直接将Date对象与time字符串相加，导致aDate/bDate最终变为字符串而非可比较的时间类型，空值场景下直接生成Invalid Date触发报错
• 错误2：空值判断逻辑失效：Invalid Date的类型是对象，永远不会等于null，因此你写的兜底日期赋值逻辑完全不会执行
• 错误3：仅处理了a的空值，未处理b的空值，也没有兼容升序/降序两种排序方向空值始终沉底的需求

修复方案 #

方案1：优化比较逻辑，空值直接优先沉底（推荐，无边界问题） #

不需要依赖兜底日期，直接在比较时优先判断空值，确保空日期条目不管排序方向如何都排在最后：

// 日期降序排序逻辑（你当前的dateDown逻辑）
const dateDown = document.querySelector(".dateDown")
dateDown.addEventListener("click", () => {
    let arrayList = JSON.parse(localStorage.getItem("theList")) || [];
    arrayList.sort(function (a, b) {
        // 先判断是否为空日期
        const aIsEmpty = !a.date;
        const bIsEmpty = !b.date;
        // 空的永远排后面：a空b非空，a往后排返回1；b空a非空，b往后排返回-1
        if (aIsEmpty && !bIsEmpty) return 1;
        if (!aIsEmpty && bIsEmpty) return -1;
        // 都空或者都非空的情况：都空则顺序不变，都非空则按时间比较
        if (aIsEmpty && bIsEmpty) return 0;
        // 非空场景拼接日期时间转时间戳比较
        const aTimeStamp = new Date(`${a.date} ${a.time}`).getTime();
        const bTimeStamp = new Date(`${b.date} ${b.time}`).getTime();
        // 降序：大的在前
        return bTimeStamp - aTimeStamp;
    })
    // 排序后需自行补充更新localStorage、重新渲染列表的逻辑
    localStorage.setItem("theList", JSON.stringify(arrayList));
    // renderList() 调用你自己的渲染方法
})

// 如果是日期升序排序，仅需修改最后返回值即可，空值逻辑完全不用改
// return aTimeStamp - bTimeStamp;

方案2：修复原兜底日期逻辑 #

如果你还是想用固定兜底日期的方式，修改空值判断和日期拼接逻辑即可：

arrayList.sort(function (a, b) {
    // 空值直接用兜底日期，再拼接时间
    const aFullDate = a.date ? `${a.date} ${a.time}` : '2100-11-30T00:00:00';
    const bFullDate = b.date ? `${b.date} ${b.time}` : '2100-11-30T00:00:00';
    const aTimeStamp = new Date(aFullDate).getTime();
    const bTimeStamp = new Date(bFullDate).getTime();
    // 降序返回
    return bTimeStamp - aTimeStamp;
})

注意该方案存在边界问题：如果你的待办条目有2100年之后的日期，会和空值条目混排，更推荐使用方案1。

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