In questo post imparerete come rimuovere le proprietà da un oggetto in JavaScript usando la destrutturazione e la sintassi ...rest .
Questo nuovo modo di rimuovere le proprietà di un oggetto (escludendole da un nuovo oggetto) ci dà un modo più pulito di scrivere JavaScript, con meno codice e una migliore leggibilità – oltre ad essere un’operazione immutabile.
Prima della destrutturazione, usavamo tipicamente la parola chiave delete per rimuovere le proprietà da un oggetto. Il problema con delete è che è un’operazione mutabile, che cambia fisicamente l’oggetto e potenzialmente causa effetti collaterali indesiderati dovuti al modo in cui JavaScript gestisce i riferimenti agli oggetti.
Utilizzando la destrutturazione degli oggetti, combinata con l’operatore rest ...rest, abbiamo un approccio pulito con una sola riga.
Che cosa è la destrutturazione degli oggetti?
La destrutturazione degli oggetti ci permette di creare variabili dai nomi delle proprietà degli oggetti, e la variabile conterrà il valore del nome della proprietà – per esempio:
const data = { a: 1, b: 2, c: 3 };const { a, b, c } = data;console.log(a, b, c); // 1, 2, 3Utilizzando const { a, b, c } = data stiamo dichiarando 3 nuove variabili (ab e c).
Se ab e c esistono come nomi di proprietà su data, allora saranno create delle variabili contenenti i valori delle proprietà degli oggetti. Se i nomi delle proprietà non esistono, si otterrà undefined.
…resto nella destrutturazione degli oggetti
Prima sono arrivati i parametri di resto, poi le proprietà di resto!
Aggiunte in ECMAScript 2015 e ora allo Stage 4 – sono qui per restare e usarle oggi.
Con questo in mente, come fa ...rest ad aiutarci a rimuovere una proprietà da un oggetto tramite destrutturazione?
🎉 Scaricalo gratis!
Pronto ad andare oltre ForEach? Prendi confidenza con i metodi avanzati – Reduce, Find, Filter, Every, Some e Map.
-
Comprendi appieno come gestire le strutture dati JavaScript con operazioni immutabili - 31 pagine di sintassi profonda, esempi reali, suggerimenti e trucchi
- Scrivi una logica di programmazione più pulita e meglio strutturata in 3 ore
Come bonus extra, ti invieremo anche alcune chicche extra attraverso alcune email extra.
Prendiamo il nostro esempio precedente e usiamo la sintassi ...rest per vedere cosa succede:
const data = { a: 1, b: 2, c: 3 };const { a, ...rest } = data;console.log(a); // 1console.log(rest); // { b: 2, c: 3 }Utilizzando ...rest qui (e potete chiamare rest qualsiasi cosa vogliate) ci dà tutto ciò che rimane, il “resto” delle proprietà se volete.
Quindi, non abbiamo appena imparato come rimuovere una proprietà da un oggetto? Non vedo a: 1 dentro rest – è stata rimossa!
Tecnicamente, è stata esclusa piuttosto che fisicamente “rimossa” dall’oggetto – e segue un modello immutabile per scrivere JavaScript e gestire lo stato (lo stato è il nostro data).
Ecco come faremmo questo senza destrutturazione dell’oggetto o la sintassi del resto, è molto più noioso e non ci permette di ottenere dinamicamente tutte le proprietà rimanenti:
const data = { a: 1, b: 2, c: 3 };const a = data.a;const rest = { b: data.b, c: data.c };console.log(a); // 1console.log(rest); // { b: 2, c: 3 }Rimuovere dinamicamente una proprietà per chiave
Diciamo che abbiamo una chiave che forse un utente ha fornito che vuole cancellare. Per questo useremo b. Come facciamo a rimuovere quell’elemento specifico? Tutti gli esempi finora sono stati valori hard coded.
Immaginiamo di avere 'b' come valore da qualche parte, possiamo passarlo dinamicamente nella nostra sintassi di destrutturazione usando la sintassi delle parentesi quadre , proprio come una ricerca di oggetti (invece questo crea una nuova variabile basata sul valore passato dinamicamente):
const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove } = data;console.log(remove); // 2Ecco, perché stiamo costruendo dinamicamente una nuova variabile, dobbiamo usare : remove per riassegnarle un nuovo nome. Altrimenti, come faremo a fare riferimento ad essa? Non possiamo fare riferimento a quindi dovremo ricordarcelo.
Tuttavia, a questo punto possiamo di nuovo introdurre la sintassi rest per rimuovere la proprietà dall’oggetto:
const data = { a: 1, b: 2, c: 3 };const removeProp = 'b';const { : remove, ...rest } = data;console.log(remove); // 2console.log(rest); // { a: 1, c: 3 }Ecco fatto, abbiamo cancellato con successo una proprietà dinamicamente in JavaScript usando la destrutturazione degli oggetti e la sintassi rest!
Guarda l’esempio dal vivo in StackBlitz, giocaci un po’ e prendi confidenza:
Summario
Abbiamo fatto molta strada! Questa tecnica ci aiuta ad evitare le operazioni mutabili e la parola chiave delete, dandoci un modello immutabile per rimuovere le proprietà dagli oggetti in JavaScript.
Abbiamo usato la destrutturazione degli oggetti e abbiamo visto come combinarla con la sintassi del resto per darci una soluzione pulita per rimuovere le proprietà degli oggetti.
🏆 Scopri i miei corsi JavaScript per imparare a fondo le basi del linguaggio, i pattern avanzati, i paradigmi di programmazione funzionale e orientata agli oggetti e tutto ciò che riguarda il DOM. Una serie di corsi indispensabili per ogni serio sviluppatore JavaScript.
Felice codifica!
P.S. questo post sul blog è stato stimolato da una bella discussione su Twitter che ho avuto con Mauricio Correa! È un ragazzo fantastico e uno sviluppatore brasiliano.
🎉 Scaricalo gratis!
Pronto ad andare oltre ForEach? Prendi confidenza con i metodi avanzati – Reduce, Find, Filter, Every, Some e Map.
- Comprendi appieno come gestire le strutture dati JavaScript con operazioni immutabili
- 31 pagine di sintassi profonda, esempi reali, suggerimenti e trucchi
- Scrivi una logica di programmazione più pulita e meglio strutturata in 3 ore
Come bonus extra, ti invieremo anche alcune chicche extra attraverso alcune email extra.