He estado tratando de ordenar una matriz con 2000 elementos en ReactJS usando JavaScript. La matriz se ve así:
data = [ { index: 0, id: "404449", product_name: "ette", brand_name: "Dyrberg/Kern", base_price: "55.000", actual_price: "55.000", filename: "http://images.booztx.com/dyrbergkern/400x523/329679_ette_sg_crystal.jpg", }, { index: 1, id: "414661", product_name: "braided mobile chain", brand_name: "Octopus", base_price: "44.900", actual_price: "44.900", filename: "http://images.booztx.com/octopus/400x523/SC09-750MU.jpg", }, ]Intenté ordenarlo por base_price con Array.sort() de JavaScript, así:
data.sort((a, b) => { return parseFloat(a.base_price) - parseFloat(b.base_price); });pero dado que la matriz es muy larga, tiene 2000 elementos, lleva mucho tiempo clasificarlos. Se tarda unos 4 minutos. ¿Alguien tiene alguna solución?
Como se menciona en los comentarios, lo que estás describiendo en realidad no debería tomar mucho tiempo. Aquí hay un ejemplo, y en mi máquina veo menos de 10 milisegundos de tiempo de ejecución para una matriz de 2000 elementos:
const createFakeProduct = () => { const priceNumber = Math.random() * 100; const priceString = priceNumber.toFixed(3); return { index: 0, id: "12345", product_name: "hello world", brand_name: "foo", base_price: priceString, actual_price: priceString, filename: "abc123.jpg", } } const data = []; const len = 2000; for (let i = 0; i < len; i++) { data.push(createFakeProduct()); } const before = Date.now(); data.sort((a, b) => { return parseFloat(a.base_price) - parseFloat(b.base_price); }); console.log(`elapsed: ${Date.now() - before} milliseconds`);Debe haber algo adicional además de lo que ha compartido que lo está ralentizando.
Resulta que el problema estaba usando las importaciones incorrectamente. Importé los datos como una constante, pero array.sort( ) intentaba cambiarlos. Usé una variable local para el resultado de la sort y eso solucionó el problema.
import { data } from "assets/data/productList"; export const sortItems = (sortMode) => { const SoretdData = data.sort((a, b) => { if (sortMode === SortModes[1].type) { return parseFloat(a.base_price) - parseFloat(b.base_price); } else { return parseFloat(b.base_price) - parseFloat(a.base_price); } }); return SoretdData; };