In questo articolo, esploreremo alcuni modi diversi per rimuovere un elemento da un array in JavaScript. Ti mostrerò anche operazioni mutabili e immutabili in modo da sapere come il tuo codice influenzerà le tue strutture e riferimenti di dati.
La rimozione di elementi dagli array si riduce semplicemente a trovare l’indice dell’elemento, o almeno tradizionalmente. Al giorno d’oggi – abbiamo altre opzioni, come trovare oggetti all’interno di un array in base al loro valore., Il che significa che ora ci sono più approcci per rimuovere gli elementi.
Questa prossima breve sezione si immergerà negli indici di array e in come diventano, è un’immersione più profonda, ma se stai cercando le soluzioni, scorri a destra.
Comprendere gli indici di array
In JavaScript, un array è un tipo speciale di oggetto.
Questo oggetto array ha diverse proprietà, alcune delle quali sono proprietà ereditate che esistono sul prototipo e alcune sono proprietà che l’oggetto array ci espone quando “aggiungiamo” cose a un array.,
Download Scaricalo gratis!
Andare oltre Array ForEach. Avere fiducia con metodi più avanzati come Ridurre, Trovare, Filtrare, Ogni, Alcuni e Mappa e comprendere appieno come gestire le strutture di dati JavaScript.,
- Completamente capire come gestire JavaScript Strutture di Dati con immutabile operazioni
- 31 pagine di profonda immersione sintassi, di esempi del mondo reale, consigli e trucchi
- Scrivere più pulito e meglio strutturato logica di programmazione entro 3 ore
Come bonus extra, ti invieremo anche alcune chicche extra attraverso alcune email extra.,
Ad esempio quando dichiariamo un nuovo array tramite, tale array contieneArray.prototype proprietà e metodi che ci permettono di interagire con il nostro array. L’intenzione con questo era di permetterci di eseguire mutazioni e modifiche ai nostri array con le funzioni di utilità nice “built-in”.
Un’utilità? Sì, ad esempio Array.prototipo.forEach () o Array.prototipo.spingere(). Entrambi questi sono metodi ereditati sull’oggetto array. Detto questo, ora sai come gli array sono in realtà solo oggetti – e gli oggetti hanno metodi e proprietà.,
L’oggetto array è speciale, è diverso. È ancora un oggetto, ma il modo in cui “usiamo” un array è accedendo alle proprietà su di esso che si riferiscono a un elemento nell’array, tramite un indice. Un indice? Sì- 0, 1, 2, 3 e poi! Gli indici degli array iniziano da zero.
Con gli array questo significa che quando abbiamo bisogno di accedere a un valore, qualunque esso sia (un primitivo/oggetto), è fatto tramite una “ricerca di indice”. Chiedi l’indice dal tuo array e recupererai l’elemento che si trova in quell’indice.,
In realtà, puoi pensare a ciascun indice come a un cassetto in un archivio. Ogni estrazione contiene qualcosa di unico! Gli array sono virtuali, quindi la dimensione dello schedario dipende da te!
“Perché mi stai dicendo tutto questo, Todd?”
Perché ora capisci un array, sai come lavorare con uno!
Senza ulteriori indugi, esploriamo prima come rimuovere un elemento da un array in JavaScript per indice e valore.
Utilizzando .indexOf() e .,splice () – Mutable Pattern
Per rimuovere un elemento dall’array tramite il suo indice, introdurremo prima il metodo Array.prototype.splice e poi studieremo un modello migliore usando Array.prototype.filter, una nuova API.
Splice è un metodo mutabile che consente di modificare il contenuto di un array. Questo potrebbe essere la rimozione o la sostituzione di “elementi”, come sono noti gli elementi dell’array.
Prendiamo un array con alcuni valori di stringa:
const drinks = ;Per rimuovere un elemento tramite il suo indice, dobbiamo trovare l’indice.,
Ci sono due scenari qui, 1) conosciamo l’indice e 2) non conosciamo l’indice ma conosciamo il valore.
Innanzitutto, se conosciamo l’indice, di seguito ho usatoid per contenere il nostro indice di esempio, quindi richiede semplicemente di passare quell’indice in.splice()., Il primo argomento di splice accetta la posizione dell’indice per iniziare a rimuovere gli elementi e il secondo argomento impostato su 1 rappresenta la fine – il che significa che vogliamo rimuovere solo un elemento dopo quell’indice:
const drinks = ;const id = 2;const removedDrink = drinks.splice(id, 1); Se non conosciamo l’indice, dobbiamo trovarlo. In questo caso, l’indice che vorremmo rimuovere contiene un valore di 'Coffee'.
Potremmo usare Array.prototipo.,indexOf () per ottenere il, beh index “indice di” l’elemento:
const drinks = ;const id = drinks.indexOf('Coffee'); // 2const removedDrink = drinks.splice(id, 1);Array.prototipo.indexOf () restituirà
-1se l’elemento non viene trovato, quindi consiglierei un controllo di sicurezza attorno a questo.
Noterai che ho anche aggiuntoconst removedDrink. Questo perché.splice() ci restituisce gli elementi rimossi:
// console.log(removedDrink);// console.log(drinks);Prova l’esempio di codice qui sotto:
Usando .,filter () – Modello immutabile
Quindi ora capiamo un po ‘ di più su mutabile e immutabile, scopriamo il modello immutabile per “rimuovere” un elemento da un array.
Il modo migliore per pensarci è: invece di “rimuovere” l’elemento, “creerai” un nuovo array che semplicemente non include quell’elemento. Quindi dobbiamo trovarlo e ometterlo completamente.
Download Scaricalo gratis!
Andare oltre Array ForEach., Avere fiducia con metodi più avanzati come Ridurre, Trovare, Filtrare, Ogni, Alcuni e Mappa e comprendere appieno come gestire le strutture di dati JavaScript.
- Completamente capire come gestire JavaScript Strutture di Dati con immutabile operazioni
- 31 pagine di profonda immersione sintassi, di esempi del mondo reale, consigli e trucchi
- Scrivere più pulito e meglio strutturato logica di programmazione entro 3 ore
Come bonus extra, ti invieremo anche alcune chicche extra attraverso alcune email extra.
L’ultimo riferimento al tuo array continuerà a vivere e non muteremo l’array originale. Otterremo una nuova copia ogni volta con le nostre modifiche!
Quindi, prendiamo lo stesso array per iniziare con:
const drinks = ;Ancora una volta, miriamo a rimuovere 'Coffee'., Innanzitutto, si potrebbe fornire un valore destinato a rappresentare un valore dell’indice, e passatelo .filter():
const id = 2;const removedDrink = drinks;const filteredDrinks = drinks.filter((drink, index) => index !== id);Nota che abbiamo incluso (drink, index) come parametri di funzione e rispetto dell’array index per il id costante, in modo che possiamo trovare esattamente quello di cui abbiamo bisogno come gli indici partita!,
Ho anche inclusoconst removedDrinkche offre un modo per “chiedere” un riferimento della bevanda che desideri rimuovere (nello stesso modo in cui potresti voler usare il valore restituito da.splice()).,
Se non hai un riferimento all’indice, per esempio il nostro id punti 'Coffee' allora è possibile usare .indexOf() (si prega di notare l’aggiunta del tag idx variabile per catturare l’indice):
Utilizzando un Ciclo For – Modello Tradizionale
Una versione alternativa, ma molto valido versione che in realtà è l’imperativo versione di Array.prototype.filter come si comporta nello stesso modo – la costruzione di un nuovo array per noi e per spingere i nuovi elementi, lasciando a noi l’incontaminata drinks array.,
In questo esempio, la rimozione di elementi dalla matrice iniziale, restituisce un nuovo array di solo i punti in noi, utilizzando drinks ci permette di cercare e comparare l’elemento di matrice del valore del bene (ad esempio 'Coffee' come una Stringa, in questo caso):
Con filteredDrinks potrebbe darci gli elementi che vorremmo. Puoi vedere come imparando i principi della programmazione possiamo applicare diversi modelli e avere una comprensione più profonda di ciò che stiamo facendo!,
Questo metodo successivo ho incluso chiarezza su cosa NON fare quando la rimozione di elementi da un array in JavaScript, anche se è perfettamente “valido”…
Evitando il “eliminare” parola chiave
Quando vedo il delete parola chiave in due codici, tremo un po ‘ – è una parola chiave potente che dovrebbe essere utilizzato in modo responsabile. Detto questo, se impariamo cosa fa la parola chiave delete, allora possiamo prendere decisioni più informate.,
Ecco un esempio che potresti vedere in giro per il web:
Noterai dall’outputconsole.log sopra che soffia completamente via la chiave. Ho incluso questo per chiarezza, è sempre bello vedere e capire quali effetti collaterali hanno le tue operazioni.
Ciò che è più confuso è delete non influisce sulla proprietà .length dell’Array – vedi come dice ancora length: 4?! Un altro motivo per evitare di usare delete.,
Con questo in mente – è il momento di concludere il nostro post su come rimuovere un elemento, o “elemento”, da un array in JavaScript con gli strumenti giusti. Abbiamo capito diversi approcci e paradigmi e abbiamo un po ‘ più di conoscenza da portare a domani. Vi ringrazio per la lettura!
Se ami imparare e hai un ardente desiderio di aumentare di livello le tue abilità JavaScript? Insegno corsi JavaScript qui a Corsi Ultimate che porteranno le tue abilità JavaScript al massimo-ti garantisco che non rimarrai deluso!
Download Scaricalo gratis!,
Andare oltre Array ForEach. Avere fiducia con metodi più avanzati come Ridurre, Trovare, Filtrare, Ogni, Alcuni e Mappa e comprendere appieno come gestire le strutture di dati JavaScript.
- Completamente capire come gestire JavaScript Strutture di Dati con immutabile operazioni
- 31 pagine di profonda immersione sintassi, di esempi del mondo reale, consigli e trucchi
- Scrivere più pulito e meglio strutturato logica di programmazione entro 3 ore
Come bonus extra, ti invieremo anche alcune chicche extra attraverso alcune email extra.
Check them out e godere-grazie per la lettura!