排序 function 未按预期工作

Question

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

这就像

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")
    }
  };

Answer 1

使用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
    }
}

现在在排序方法中使用这个 function

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

Answer 2

在对string值数组进行排序时，您可以为array.sort()使用自定义compareFn参数。

在下面的代码示例中，我给出了一个使用string.localeCompare()的返回值和自定义选项的示例（在Intl.Collator()构造函数的参考页中有详细说明）。

TS游乐场

function intuitiveSort (a: string, b: string): number {
  // leaving this `undefined` uses the default locale
  const locale: Parameters<string['localeCompare']>[1] = undefined;

  const options: Parameters<string['localeCompare']>[2] = {
    numeric: true,
    sensitivity: 'base',
  };

  return a.localeCompare(b, locale, options);
}

let arr: string[] = ['Apple', 'Banana', 'Dog', 'ant', 'candy'];
arr.sort(intuitiveSort);
console.log(arr); // ["ant", "Apple", "Banana", "candy", "Dog"]

arr = ['112', '12', '141', '21', '32', '345', '35'];
arr.sort(intuitiveSort);
console.log(arr); // ["12", "21", "32", "35", "112", "141", "345"]

从上面的 TS Playground 链接编译的 JS：

 "use strict"; function intuitiveSort(a, b) { // leaving this `undefined` uses the default locale const locale = undefined; const options = { numeric: true, sensitivity: 'base', }; return a.localeCompare(b, locale, options); } let arr = ['Apple', 'Banana', 'Dog', 'ant', 'candy']; arr.sort(intuitiveSort); console.log(arr); // ["ant", "Apple", "Banana", "candy", "Dog"] arr = ['112', '12', '141', '21', '32', '345', '35']; arr.sort(intuitiveSort); console.log(arr); // ["12", "21", "32", "35", "112", "141", "345"]