Ordenant una matriu niuada per país en JavaScript

Mastering Array Ordenació: agrupació de ciutats per país

A JavaScript, treballar amb matrius és habitual, però les coses poden ser complicades quan necessiteu organitzar dades complexes. Per exemple, si teniu una llista de països, ciutats i dates, ordenar i reestructurar aquesta matriu pot ser un repte. Aquí és on la manipulació de matrius intel·ligents és útil.

Imagineu que teniu una matriu que conté noms de països, noms de ciutats i dates corresponents, i voleu ordenar aquesta matriu per país mentre agrupeu les dades de cada ciutat sota el país respectiu. Aquesta és una habilitat útil quan es treballa amb conjunts de dades que s'han d'organitzar per a una presentació clara.

Per aconseguir-ho, JavaScript ofereix diversos mètodes que permeten ordenar i reestructurar les dades fàcilment. Podeu utilitzar funcions com ordenar () i reduir () per agrupar elements de manera eficient, proporcionant una manera clara i concisa de gestionar les matrius de dades.

Aquest tutorial us guiarà a través d'un enfocament senzill per ordenar i agrupar una matriu imbricada per país, que es pot adaptar a diverses interaccions de l'usuari, com ara fer clic a un país o una ciutat o definir un interval de dates. Submergem-nos en els passos!

Ordenació i agrupació eficients de matrius en JavaScript

Els scripts creats anteriorment estan dissenyats per abordar el problema d'ordenar i agrupar una matriu imbricada pel primer element, que en aquest cas és el país. L'objectiu és organitzar una taula de ciutats i dates en els seus respectius països. El procés comença utilitzant el ordenar () mètode per reordenar la matriu. Aquesta funció és crucial per garantir que totes les files associades al mateix país s'enumeren consecutivament. Mitjançant l'apalancament localCompare(), l'script assegura que l'ordenació respecta les regles específiques de la localització, cosa que és especialment important quan es tracta de diversos noms de països o caràcters no ASCII.

Un cop ordenades les dades, el següent pas consisteix a agrupar les ciutats per països. Això s'aconsegueix utilitzant el reduir () funció, un mètode de matriu potent que simplifica l'acumulació de resultats. En aquest cas, el mètode construeix un objecte on cada clau és un país i el valor corresponent és una matriu de les seves ciutats i dates. Aquest pas garanteix que cada país estigui associat a les seves dades rellevants, cosa que facilita la gestió i l'accés per a futures operacions, com ara la representació de taules o gràfics en una interfície frontal.

Després de l'agrupació, el guió utilitza el Object.entrades() mètode per convertir l'objecte resultant de nou en una matriu. Aquesta transformació és necessària perquè els objectes no es manipulen ni es representen tan fàcilment com les matrius en JavaScript. Si tornem a convertir les dades en un format de matriu, podem iterar-hi o passar-les a altres funcions sense problemes. L'ús de matrius és preferit per a moltes tasques en JavaScript a causa de la seva compatibilitat amb la majoria de funcions i la seva facilitat de recórrer.

En els darrers passos, es prova la funcionalitat de l'script. Per a la solució de fons a Node.js, fem servir proves unitàries utilitzant el framework Jest per validar la correcció de les funcions d'ordenació i agrupació. Les proves comproven si les ciutats s'agrupen correctament en els seus respectius països i asseguren que el format de sortida coincideix amb l'estructura esperada. Aquesta atenció a les proves és vital per garantir que la solució funcioni en múltiples entorns, ja sigui en un servidor o en un navegador. Mitjançant la combinació de mètodes de matriu eficients i proves adequades, els scripts proporcionen una solució fiable i escalable al problema d'ordenar i agrupar dades complexes en JavaScript.

// Original array of country, city, and date data
const data = [
  ['Spain', 'Madrid', '10-12-2024'],
  ['Spain', 'Barcelona', '10-15-2024'],
  ['Suisse', 'Berne', '10-18-2024'],
  ['France', 'Paris', '10-22-2024'],
  ['France', 'Lyon', '10-24-2024']
];

// Step 1: Sort the array by country name (first item)
data.sort((a, b) => a[0].localeCompare(b[0]));

// Step 2: Group cities by their respective countries using reduce
const groupedData = data.reduce((result, item) => {
  const [country, city, date] = item;
  if (!result[country]) {
    result[country] = [];
  }
  result[country].push([city, date]);
  return result;
}, {});

// Step 3: Convert the grouped object back into an array format
const orderedArray = Object.entries(groupedData);
console.log(orderedArray);

const data = [
  ['Spain', 'Madrid', '10-12-2024'],
  ['Suisse', 'Berne', '10-18-2024'],
  ['France', 'Paris', '10-22-2024'],
  ['France', 'Lyon', '10-24-2024'],
  ['Spain', 'Barcelona', '10-15-2024']
];

// Step 1: Sort data by country (first column)
const sortedData = data.sort((a, b) => a[0].localeCompare(b[0]));

// Step 2: Group data by country using map and reduce functions
const groupedData = sortedData.reduce((acc, current) => {
  const [country, city, date] = current;
  if (!acc[country]) {
    acc[country] = [];
  }
  acc[country].push([city, date]);
  return acc;
}, {});

// Step 3: Return the formatted array
const resultArray = Object.entries(groupedData);
console.log(resultArray);

const { test, expect } = require('@jest/globals');

test('Should correctly group cities by country', () => {
  const data = [
    ['Spain', 'Madrid', '10-12-2024'],
    ['France', 'Paris', '10-22-2024']
  ];
  const groupedData = sortAndGroup(data);
  expect(groupedData).toEqual([
    ['Spain', [['Madrid', '10-12-2024']]],
    ['France', [['Paris', '10-22-2024']]]
  ]);
});

Tècniques avançades per ordenar matrius en JavaScript

Un altre aspecte important quan es tracta d'ordenar matrius en JavaScript, especialment en aplicacions dinàmiques, és com gestionar els casos en què les dades canvien constantment. Per exemple, quan els usuaris estan interactuant amb un sistema en directe, com ara una plataforma de reserves, on seleccionen països, ciutats i dates, és fonamental que l'ordenació de les dades es faci en temps real. En aquests casos, utilitzant mètodes com impulsat per esdeveniments la programació pot ser beneficiosa. Això garanteix que cada vegada que un usuari selecciona o modifica dades, la matriu s'actualitza i torna a ordenar automàticament.

En sistemes més complexos, l'ús de funcions de devolució de trucada en els algorismes d'ordenació poden ajudar a adaptar la lògica d'ordenació segons les necessitats específiques de l'usuari. Per exemple, és possible que hàgiu d'ordenar no només per país, sinó també per ciutat o data en funció de les preferències de l'usuari. Una funció de devolució de trucada dins de sort() El mètode permet al desenvolupador definir com s'ha de gestionar l'ordenació de manera dinàmica, cosa que millora l'experiència de l'usuari i la flexibilitat del sistema.

Un altre aspecte a tenir en compte és l'ús validació de dades abans d'ordenar la matriu. Aquest pas garanteix que cap dada corrupta o no vàlida s'introdueixi a la matriu. Per exemple, si l'usuari introdueix accidentalment una data no vàlida o deixa un nom de ciutat en blanc, el procés de validació de dades pot marcar l'error o filtrar automàticament les entrades no vàlides abans que s'apliqui la lògica d'ordenació. Aquest pas és vital per mantenir la integritat i la precisió de les dades del sistema.