javascript - 排序功能未按预期工作

标签 javascript typescript

我有一个对象数组,它实际上是从后端获取的,现在我正在映射数据并希望在单击按钮时按升序和降序对它进行排序,所以我创建了一个 onSort 函数,但它是没有像我预期的那样工作,因为存在大写和小写问题,即使按字母顺序介于两者之间,小写字母也显示在最后,数字没有排序,还有另一列显示金额,如“100 美元”,但是由于那个美元符号,函数将它作为一个字符串并对其进行排序。

这就像

110 美元、12 美元、24000 美元、2500 美元、3 美元

应该是这样

3 美元、12 美元、110 美元、2500 美元、24000 美元

对于具有大写和小写元素的列,按升序排列 -

苹果 香蕉, 狗, Ant , 糖果

哪里应该是这样的-

Ant 、苹果、香蕉、糖果、狗

如果是数字 - 112,12,141,21,32,345,35;

应该是 - 12,21,32,35,112,141,345;

这里是我使用的代码片段,

const [sort, setSort] = usestate("asc")
const onSort = (obj: string) => {
    
    if (sort === "asc") {
      const tableEl= [...tstate.tableItem].sort((a: any, b: any) => {
        if (a[obj].split('/').reverse().join() > b[obj].split('/').reverse().join()) return 1;
        else if (b[obj].split('/').reverse().join() > a[obj].split('/').reverse().join()) return -1;
        else return 0;
        // return a[obj] > b[obj] ? 1 : -1;
      });
      setTableState({
        ...tstate,
        tableItem: tableEl,
      });
      setSort("dsc")
    }
    if (sort === "dsc") {
      const tableEl= [...tstate.tableItem].sort((a: any, b: any) => {
        if (b[obj].split('/').reverse().join() > a[obj].split('/').reverse().join()) return 1;
        else if (a[obj].split('/').reverse().join() > b[obj].split('/').reverse().join()) return -1;
        else return 0;
        // return b[obj] > a[obj] ? 1 : -1;
      });
      setTableState({
        ...tstate,
        tableItem: tableEl,
      });
      setSort("asc")
    }
  };

最佳答案

使用localCompare检查区分大小写的方法。因为你想检查数字使用 isNaN方法。

function compare(a, b) {
    if ( isNaN(Number(a) || isNaN(Number(b) )) {
        return b.localeCompare(a)
    } else {
        if (Number(a)>Number(b)) return 1
        else if (Number(a)<Number(b)) return -1
        else return 0
    }
}

现在在sort方法中使用这个函数

[...tstate.tableItem].sort(compare)

关于javascript - 排序功能未按预期工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/71923442/

相关文章:

javascript - 在 Angular 2 子模块中强制服务实例化(AngularJS 运行 block 的替代方案)

javascript - 单击 html 链接时禁用 spring boot 请求检查

javascript - 获取多边形内的点并过滤它们

javascript - 在部分功能之后重新渲染

Angular2 HMR(热模块更换)——删除日志

javascript - 防止 Typescript 编译器检查整个类以节省时间?

javascript - 如何仅模糊背景而不模糊 Ionic/CSS 中的内容

javascript - d3js : `xlink:href` is not working

javascript - 如何在 TypeScript 中进行方法重载?

typescript - TypeScript 中的接口(interface) + 新 vs 类 + 构造函数