如何使用JavaScript对ul列表排序 实现Firebase得分板按数值分数排序

• 核心逻辑：将Firebase返回的对象数据转换为包含用户名、分数的数组，再按分数字段排序
• 修正DOM创建错误：列表条目应该用li元素，而非重复创建ul元素
• 排序前统一将分数转为数值类型，避免字符串排序出现的"100"<"2"这类逻辑错误

修改后的JS代码 #

const scorelist = document.querySelector("#scorelist")

function gotData(data) {
    var scores = data.val();
    var keys = Object.keys(scores);

    // 转换为可排序的数组
    const scoreArr = keys.map(username => {
        return {
            name: username,
            // 统一转成数值，避免Firebase中存的是字符串导致排序错误
            score: Number(scores[username].score)
        }
    })

    // 按分数排序，b.score - a.score是高分在前（降序），要升序改成a.score - b.score即可
    scoreArr.sort((a, b) => b.score - a.score)

    // 遍历排好序的数组渲染列表
    scoreArr.forEach(item => {
        // 修正：列表项用li元素，不需要无效的第二个参数
        const newListItem = document.createElement("li");
        newListItem.textContent = `${item.name} - ${item.score}`;
        scorelist.appendChild(newListItem);
    })
}

function errData(err) {
    console.log('Error!');
    console.log(err)
}

修正后的HTML代码 #

（删除了p标签包裹ul的不规范写法）

<div>
   <ul id="scorelist">
   </ul>
</div>

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