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 Container Queries nominali
Gestione ciclo di vita in .NET Aspire
Applicare un filtro per recuperare alcune issue di GitHub
Eseguire una ricerca avanzata per recuperare le issue di GitHub
Gestione file Javascript in Blazor con .NET 9
Gestione dei nomi con le regole @layer in CSS
Selettore CSS :has() e i suoi casi d'uso avanzati
Introduzione alle Container Queries
Fornire parametri ad un Web component HTML
Gestione degli eventi nei Web component HTML
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Utilizzare il metodo CountBy di LINQ per semplificare raggruppamenti e i conteggi
I più letti di oggi
- PWAConf 2020 - Online
- Gestione ciclo di vita in .NET Aspire
- Inserire, modificare o cancellare record con ADO.NET
- Redirect automatico da HTTP a HTTPs
- #SQLServer #Modeling (codename Oslo) CTP di nov 2009 aggiornato per VS 2010 RC: http://u.aspitalia.com/fi
- Supporto migliorato agli statement condizionali nelle pipeline di Azure DevOps
- Semplificare il deploy di applicazioni Silverlight con la compilazione condizionale
- Gestire l'errore di caricamento dell'immagine in Silverlight 2.0
- Rimandare l'elaborazione di un messaggio di una coda Service Bus in Windows Azure
- Abilitare la compressione GZip nei website di Windows Azure