Il mondo dello sviluppo front-end, nella sua declinazione JavaScript, è intriso di librerie. Ne troviamo per tutte le necessità e funzionalità, anche superflue; spesso ci ritroviamo a chiederci come fare la stessa operazione: quante volte ci siamo domandati "come seleziono solo la proprietà nome da questa lista di oggetti?".
A questo scopo può tornare utile avere un file JavaScript, nel quale definire una serie di metodi che ci possono aiutare nello sviluppo, tale file potrà poi essere condiviso tra i progetti, in modo da creare un'uniformità tra i prodotti rilasciati e garantire un buon grado di manutenibilità.
// definizione const getOnly = (objs, key) => objs.map((obj) => obj[key]); // uso const users = [{ name: "Morgan", lastName: "Pizzini" }, { name: "Mario", lastName: "Rossi" }]; getOnly(users, 'name'); // ['Morgan', 'Mario']
Allo stesso modo possiamo ordinare gli elementi di un array di oggetti sulla base di una proprietà. Seguendo la stessa logica creiamo una funzione in grado di generalizzare l'azione richiesta, in modo da estenderne il più possibile l'utilizzo
// definizione const sort = (arr, key) => arr.sort((a, b) => a[key] > b[key] ? 1 : a[key] < b[key] ? -1 : 0); // uso const users = [{ id: 1, name: "Morgan" }, { id: 0, name: "Mario" }]; sort(users, 'id'); // {id: 0, name: 'Mario'}, // {id: 1, name: 'Morgan'}
Non da ultimo, per quanto riguarda operazioni su array, dobbiamo citare l'inserimento di un oggetto in una determinata posizione. La funzione utilizzerà l'operatore spread (...) e il metodo slice, consentendoci di inserire l'oggetto semplicemente indicandone la posizione.
const insert = (arr, index, item) => [...arr.slice(0, index), item, ...arr.slice(index)]; const numArray = [1, 2, 3, 5]; // [1, 2, 3, 4, 5] insert(numArray, 3, 4);
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare gli snapshot con Azure File shares
Sfruttare al massimo i topic space di Event Grid MQTT
Utilizzare Tailwind CSS all'interno di React: primi componenti
Creazione di plugin per Tailwind CSS: espandere le funzionalità del framework dinamicamente
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Effettuare il binding di date in Blazor
Usare le collection expression per inizializzare una lista di oggetti in C#
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Generare file per il download da Blazor WebAssembly
Utilizzare flat e flatMap per appiattire array innestati in array
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Definire lo stile CSS in base alle dimensioni del container