Tengo una matriz de objetos, que en realidad se obtienen del backend, ahora estoy mapeando datos y quiero ordenarlos en orden ascendente y descendente al hacer clic en un botón, así que hice una función onSort, pero no funciona como Esperaba, ya que hay un problema con mayúsculas y minúsculas, incluso estando alfabéticamente en el medio, las minúsculas se muestran al final, los números no se ordenan y hay otra columna que muestra la cantidad como '$ 100', pero debido a eso signo de dólar, la función lo toma como una cadena y lo ordena.
esto es como
$110, $12, $24000, $2500, $3
debería ser como
$3, $12, $110, $2500, $24000
para columna con elementos en mayúsculas y minúsculas, en orden ascendente -
Apple Banana, perro, hormiga, caramelo
donde debería ser como -
hormiga, manzana, plátano, caramelo, perro
En el caso de los números es como - 112,12,141,21,32,345,35;
donde debería ser como - 12,21,32,35,112,141,345;
aquí los fragmentos de código que usé,
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") } };Use el método localCompare para verificar la distinción entre mayúsculas y minúsculas. Como desea verificar los números, use el método 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 } }Ahora usa esta función en el método de clasificación
[...tstate.tableItem].sort(compare)Al ordenar una matriz de valores de string , puede usar un argumento compareFn personalizado para array.sort() .
En el ejemplo de código a continuación, doy un ejemplo del uso del valor de retorno de string.localeCompare() con opciones personalizadas (que se detallan en la página de referencia para el constructor Intl.Collator() ).
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"]JS compilado del enlace TS Playground anterior:
"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"]