Shift e Unshift in JavaScript, inserire e rimuovere elementi

Con i metodi shift e unshift tolgo e aggiungo rispettivamente un elemento all’inizio di ciascun array in JavaScript.

La sintassi di questi metodi è la seguente:

nomeArray.unshift(elemento1, elemento2, …, elementoN)

nomeArray.shift()

Come possiamo notare con il metodo unshift è possibile inserire più di un elemento tra parentesi tonde, separato da virgole.

Shift e Unshift in JavaScript – primo esempio

Creiamo un array di elementi e aggiungiamo un elemento, inserito attraverso una finestra di dialogo, in testa all’array.

Quindi supponiamo di avere come sempre il nostro array di oggetti scolastici:

var oggettiScolastici = ['gomma', 'quaderno', 'matita'];

Dopo chiediamo all’utente di inserire un elemento:

var oggettoNuovo = prompt('Inserisci un oggetto scolastico');

Decidiamo dunque di inserirlo in testa all’array con il metodo unshift:

oggettiScolastici.unshift(oggettoNuovo);
console.log(oggettiScolastici);

In questo caso nella console vedremo come primo elemento quello inserito dall’utente.

Adesso cancelliamo lo stesso elemento che l’utente ha scelto di inserire.

Ci servirà utilizzare il metodo shift:

oggettiScolastici.shift();
console.log(oggettiScolastici);

Nella console del browser, si visualizzerà l’elenco di prima senza l’elemento inserito dall’utente.

Shift e Unshift in JavaScript – secondo esempio

Facciamo un esempio utilizzando l’array giorni che abbiamo già utilizzato negli esempi precedenti.

Questa volta però toglieremo i giorni all’inizio dell’array, quindi iniziando da lunedì.

Provate a cliccare sul pulsante sotto per ottenere l’effetto:

Ecco dunque il codice completo utilizzato per risolvere questo semplice algoritmo che utilizza il metodo shift() per eliminare elementi all'inizio dell'array.

var giorni=["lunedì","martedì","mercoledì","giovedì","venerdì","sabato","domenica"];

function tolgo() { 
  giorni.shift();
  alert("Ho tolto un giorno");
  //stampo ciascun giorno
  for (var i = 0; i < giorni.length; i++) {
    alert(giorni[i]);
  }

}

Dopo nella pagina html inserisco il seguente codice:

<input type="submit" value="tolgo giorno" onClick="tolgo()">

Allo stesso modo utilizzo unshift() per aggiungere elementi all'inizio dell'array.

Ecco un semplice esempio:

var giorni=["lunedì"];
giorni.unshift("martedì");

Chiaramente questi sono solo dei semplici esempi sui metodi shift e unshift in JavaScript, utili per iniziare ad utilizzare gli array in JavaScript. Nelle prossime lezioni affronteremo altri metodi.

Lezione precedente: metodo pop in JavaScript

Lezione successiva: metodo includes()