JavaScript点击按钮按价格排序商品数组功能失效问题排查

核心问题点 #

• 排序函数未返回排序后的数组
  你编写的两个排序函数仅将排序结果赋值给了未声明的全局变量arr，没有return任何值，因此调用ordmenorPrecio(productdata)这类方法时返回的是undefined，传给渲染函数mostrarProductos的参数为空，自然无法正常渲染。
• 商品数据productdata作用域错误
  productdata是异步请求getJSONData的回调内部局部变量，你在回调外部绑定点击事件时直接访问productdata，会报变量未定义的错误，即使请求完成后也无法访问到这个局部变量。
• 可选优化：Array.sort是原地排序方法，会直接修改原数组，建议先对原数组做浅拷贝再排序，避免污染原始数据，影响后续其他依赖原数据的逻辑。

修复后的代码 #

1. 排序函数修复 #

// 升序排序（价格从低到高）
function ordmayorPrecio(arrprod) {
    // 先浅拷贝原数组再排序，避免修改原数据
    return [...arrprod].sort(function (a,b){
        let precioa = parseInt(a.cost)
        let preciob = parseInt(b.cost)
        return precioa - preciob;
    })
}

// 降序排序（价格从高到低）
function ordmenorPrecio(arrprod) {
    return [...arrprod].sort(function (a,b){
        let precioa = parseInt(a.cost)
        let preciob = parseInt(b.cost)
        return preciob - precioa;
    })
}

如果商品价格存在小数，可以把parseInt替换为parseFloat兼容小数场景。

2. 事件绑定逻辑修复 #

document.addEventListener("DOMContentLoaded", function (e) {
    // 在当前作用域声明变量存储商品数据，供点击事件访问
    let productdata = [];
    getJSONData(PRODUCTS_URL)
    .then((result) => result.data)
    .then((data) => {
        // 把请求返回的数据赋值给上层作用域的变量
        productdata = data;
        // 首次渲染商品列表
        mostrarProductos(productdata);
    });

    document.getElementById("sortDescPrice").addEventListener("click", function(){
        // 增加数据加载完成判断，避免请求未完成时报错
        if(productdata.length) {
            mostrarProductos(ordmenorPrecio(productdata));
        }
    });

    document.getElementById("sortAscPrice").addEventListener("click",function(){
        if(productdata.length) {
            mostrarProductos(ordmayorPrecio(productdata));
        }
    })
});

商品渲染函数mostrarProductos逻辑无问题，无需修改。

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