Categorie
Javascript Programmazione

{JS} new Array()

L’oggetto Array

Sappiamo come rappresentare un array mediante la sua notazione letterale

var array = [];

Introduciamo anche per gli array l’oggetto dedicato new Array() che ne estende le funzionalità attraverso le sue proprietà e i suoi metodi.

Creazione di un Array

 Possiamo creare un array sfruttando l’ oggetto Array in 3 modi:

let primoArray = new Array();
let secondoArray = new Array(10);
let terzoArray = new Array(1, 2, "a", true);

PRIMA RIGA
Nella prima riga di codice abbiamo creato un array, “primoArray”, vuoto
SECONDA RIGA
Nella seconda riga di codice abbiamo creato un array, “secondoArray”, dove abbiamo indicato il numero di valori che dovrà contenere (10 valori).
Gli elementi saranno di tipo undefined ovvero presenti ma privi di valori.
TERZA RIGA
Nella terza riga abbiamo creato un nuovo array, “terzoArray”, indicando glie elementi valorizzati che compongono l’array.

Proprietà

length

Leggere il numero di valori

Come avveniva con le stringhe, con la proprietà length possiamo ottenere il numero di valori che compongono un array.

var array = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);
var numeroValoriArray = array.length; // risultato 10

Modificare il numero dei valori

Con la proprietà length possiamo anche ridefinire la struttura/lunghezza di un array.

impostare il numero di celle di un array
aggiungere celle ad un array inizializzato
ridurre/rimuovere celle ad un array

Se abbiamo creato un array vuoto, con questa proprietà, possiamo aggiungere un n. numero di elementi vuoti e indefiniti.
Se abbiamo un array già inizializzato, possiamo aggiungere ulteriori elementi, che saranno di tipo undefined.
Infine possiamo ridurre/cancellare elementi da un array.

let primoArray = new Array();
primoArrey.length = 6;

let secondoArray = new Array("a", "b", "c");
secondoArray.length = 6;

let terzoArray = new Array ("a", "b", "c");
terzoArray.length = 2;

ESEMPIO 1
E’ stato creato un array vuoto e tramite la proprietà length abbiamo generato 6 elementi con valori di tipo undefined
ESEMPIO 2
Abbiamo di fronte un array già inizializzato con 3 elementi e tramite la funzione length ne abbiamo aggiunti altri 3 vuoti con valori di tipo undefined
ESEMPIO 3
Abbiamo di fronte un array inizializzato con 3 elementi e tramite la funzione length riduciamo l’array a soli 2 elementi eliminando di fatto “c”

Metodi

.push()aggiunge un elemento alla fine di un array e restituisce la nuova lunghezza
.unshift()aggiunge un elemento in cima all’array e restituisce la nuova lunghezza
.pop()rimuove l’ultimo elemento di un array e restituisce l’elemento eliminato
.shift()elimina il primo elemento di un array e le restituisce l’elemento eliminato
.splice()aggiunge e la rimuove gli elementi in qualsiasi posizione all’interno di un array
.slice()estrae un nuovo array da un array originario
.concat()combina insieme due array
.sort()ordina gli elementi di un array
.reverse()inverte dell’ordine degli elementi
.indexOf()individua l’indice di un elemento
.join()converte in scritta tutti gli elementi di un array
.forEach()esegue una funzione su tutti gli elementi dell’array
.filter()crea un nuovo array che la condizione contenuta in una funzione
.find()restituisce il primo valore dell’elemento di un array che rispetta la condizione presente nella funzione
.findIndex()restituisce l’indice del primo elemento di un array che rispetta la condizione presente nella funzione
.every()verifica se tutti gli elementi di un array superano la condizione della funzione; restituisce true/false
.some()verifica se almeno uno/alcuni degli elementi di un array superano la condizione della funzione; restituisce true/false
.includes()verifica se l’array contiene un valore specifico al suo inteno; restituisce true/false
.map()crea un nuovo array con i risultati della funzione chiamata su tutti gli elementi

Risorse sul web:
https://www.w3schools.com/jsref/jsref_obj_array.asp

.push()

.unshift()

Con i metodi push() e unshift() possiamo aggiungere elementi; con push() aggiungiamo un elemento in coda mentre con unshift(), in cima.
Il metodi eliminano gli elementi e restituiscono la nuova lunghezza dell’array.

Aggiungere elementi

var array = new Array("b", "c");
array.push("d");
array.unshift("a");

Restituire nuova lunghezza

var array = new Array("b", "c");
var arrayNuovaLunghezza = array.unshift("a");
document.write(arrayNuovaLunghezza); // Risultato 3

.pop()

.shift()

Tramite i metodi push()shift() possiamo eliminare, rispettivamente, elementi in coda o all’inizio di un array.
Il metodi non prevedono parametri e restituiscono l’elemento eliminato.

var array = new Array("a", "b", "c");
var eliminatoDallaCoda = array.pop();
var eliminatoDaInCima = array.shift();
document.write(eliminatoDallaCoda); // Risultato "c"
document.write(eliminatoDaInCima); // Risultato "a"

.splice()

Con il metodo splice() possiamo aggiungere o rimuovere elementi, estrarre una porzione di array, da qualsiasi posizione all’interno sui interno.
Il metodo può restituire l’elemento eliminato.

array.splice(indicePosizione, elementiDaEliminare, elementiDaAggiungere);

Sostituire e aggiungere elementi

var array = new Array("a", "b", "c");
array.splice(0, 1, "z"); // Risultato ["z","b","c"]

Allo stesso modo è possibile aggiungere più elementi

var array = new Array("a", "b", "c");
array.splice(0, 1, "v","z"); // Risultato ["v","z","b","c"]
Cattura degli elementi eliminati

Il metodo splice() può catturare l’elemento oggetto di eliminazione

var array = new Array("a", "b", "c");
var elementoEliminato = array.splice(0, 2, "v","z");
document.write(elementoEliminato); // Risultato ["a","b"]

Estrarre porzioni di array

array.splice(primoIndice, ultimoIndice);

E’ possibile utilizzare il medesimo metodo per estrarre parte di un array;
Sarà necessario indicare l’indice di partenza e l’indice finale come parametri.

var array = new Array("a", "b", "c");
var arrayEstratto = array.splice(0, 2); // Risultato ["a","b"]
Nota: l'indice finale è escluso
Eliminare elementi da un array

Con la stessa sintassi per l’estrazione di porzioni di array possiamo ottenere l’eliminazione degli elementi.
Il tutto è possibile indicando l’indice di partenza e l’indice ultimo ed evitando di memorizzare nella variabile “arrayEstratto” il risultato. Otterremo cosi l’eliminazione degli elementi.

var array = new Array("a", "b", "c");
array.splice(0, 2); 
document.write(array); // Risultato ["c"]

.slice()

Crea un nuovo array da un array originario; il metodo richiede due parametri che indicano l’indice iniziale e l’indice finale (escluso).

var parole = ["gatto", "cane", "giraffa", "toro", "lucertola"];
var estrapola = parole.slice(1,4);
//Risultato estrapola = ["cane", "giraffa", "toro"];

Creare copia di un array

Utilizzando il metodo slice() nella sua forma semplice è possibile creare una copia identica di un array.

var parole = ["gatto", "cane", "giraffa", "toro", "lucertola"];
var copiaArray = parole.slice();

.concat()

Possiamo combinare insieme due array sfruttando il metodo concat(). Il risultato è un array contenente gli elementi di due array

var primoArray = new Array("a", "b", "c");
var secondoArray= new Array("d", "e", "f");
var unioneArray = primoArray.concat(secondoArray);	

Il risultato di “unioneArray” sarà (“a”, “b”, “c”, “d”, “e”, “f”);

.sort()

Con il metodo sort() possiamo definire l’ordinamento degli elementi di un array.

Ordinamento alfabetico

L’ordinamento segue la codifica Unicode che assegna un numero univoco ad ogni carattere. La codifica ha due sequenze binarie differenti per le lettere maiuscolo e minuscole.

var oggettiScolastici = ['matita','gomma','temperino'];
oggettiScolastici.sort();

// Risulato ['gomma','matita','temperino']

Ordinamento numerico

Se utilizzassimo il metodo nella sua forma semplice su un array di numeri non otterremmo il risultato desiderato.

var numeri = [4,1,6,8,9,62];
numeri.sort();

// Risultato [ 1, 4, 6, 62, 8, 9 ]

Per l’ordinamento di numeri il metodo sort() può accettare una funzione di confronto.

Funzioni di confronto

Il metodo sort() prende due valori adiacenti, gli invia alla funzione di confronto e gli ordina in base al valore restituito.

var numeri = [4,1,6,8,9,62];
numeri.sort( function(a, b){ return a - b } ); 

La funzione di confronto restituisce un valore negativo, positivo o uguale a zero.

negativoposiziona a prima di b
positivoposiziona a dopo di b
zerovalori uguali; posizionamento indifferente.

.reverse()

Con il metodo reverse() è possibile invertire l’ordine degli elementi di un array.

var primoArray = new Array("uno", "due", "tre");
primoArray.reverse();

// Risultato ["tre","due","uno"]

.indexOf()

Possiamo individuare l’indice di un elemento all’interno di un array tramite il metodo indexOf()

let primoArray= new Array("uno", "due", "tre");
let indiceElemento= x.indexOf("due"); 

Il risultato della variabile “indiceElemento” sarà 1 ovvero l’indice che lo identifica all’interno dell’array “primoArray”

.join()

Con il metodo join() è possibile ottenere una stringa (testuale) di tutti i valori degli element i presenti in un array

var array= new Array("uno", "due", "tre");
var stringaTestualeArray= array.join();
document.write(stringaTestualeArray);

Il risultato della variabile “stringaTestualeArray” sarà “uno due tre”

Note: è possibile indicare, all'interno delle parentesi tonde () del metodo join un separatore dei valori convertiti in stringa es.  = primoArray.join(" segue ");

.forEach()

Con il metodo forEach() possiamo eseguire un azione su tutti gli elementi che compongono un array. Il metodo si occupa di ciclare gli elementi come faremmo con un ciclo for.

var numbers = [1,2,3,4,5,6,7,8,9,10]
numbers.forEach( function(number){
return number + 10 });
//risultato [11,12,13,14,15,16,17,18,19,20]

La funzione non generà un nuovo array ma modifica i valori dell’array già esistente.

Note: come fa js a sapere che "number" rappresenta l'elemento dell'array? In realtà non lo sa; quel che sa è che il parametro contenuto nella funzione contenuta nel metodo forEach() fa riferimento ai singoli elementi dell'array. Avremmo potuto quindi nominarlo con qualsiasi nome. 

.filter()

Il metodo filter() restituisce un nuovo array di elementi che rispettano una condizione contenuta in una funzione.
Come accadeva con forEach() il metodo filter() si occupa di ciclare gli elementi dell’array originario e di generare un nuovo array con tutti gli elementi che superano la condizione contenuta nella funzione.

var numbers = [1,2,3,4,5,6,7,8,9,10]
var arrayFiltrato = numbers.filter( function(number){
return number > 5 });

// arrayFiltrato = [6,7,8,9,10]
Note: anche in questo caso il metodo filter sa che il parametro "number" contenuto nella funzione fa riferimento, ciclicamente, agli elementi dell'array originario.

.find()

La metodo find() è molto simile al metodo filter() con la differenza che restituisce un solo elemento che rispetti una determinata condizione contenuta sempre all’interno di una funzione. 
Quando non viene trovato nulla restituisce valore undefined.

“Ricerca il primo valore che rispetta la seguente condizione”

var parole = ["cobra", "penna", "zebra"];
var trovato = parole.find( function(parola) {
return parola.startWith("z"); });
// Risultato "zebra"

Come per tutti i metodi precedenti, anche find sa che dovrà ciclare gli elementi e sa che il paramentro “parola” fa riferimento agli elementi dell’array.

.findIndex()

Del tutto simile a find() ma anzichè restituire il valore del risultato restituisce l’indice.

var parole = ["cobra", "penna", "zebra"];
var trovato = parole.find( function(parola) {
return parola.startWith("z"); });
// Risultato 2

.every()

Il metodo every() verifica che ogni elemento in un array superi un la condizione contenuta nella funzione. Restituisce true se tutti gli elementi superano il test, falsem se un solo elemento non lo supera.

var numbers = [1,2,3,4,5,6,7,8,9,10]
var risultato = numbers.every( function(number){
return number > 5 });

// Risultato "false"

.some()

Come every() ma verifica che almento uno/alcuni degli elementi superano la condizione della funzione.

var numbers = [1,2,3,4,5,6,7,8,9,10]
var risultato = numbers.some( function(number){
return number > 5 });

// Risultato "true"

.includes()

Il metodo includes() verifica semplicemente se un valore è incluso nell’array e restituisce true/false.

var numbers = [1,2,3,4,5,6,7,8,9,10]
var risultato = number.includes(5);
//Risultato true

.map()

Il metodo  map() è uno dei più utili e spesso utilizzati.
Molto simile a forEach() ma con la differenza che il primo modifica l’array mentre map() nè crea un nuovo con gli elementi modificati.

var numbers = [1,2,3,4,5,6,7,8,9,10]
var newNumbers = numbers.map( function(number){
return number + 10 });
//risultato newNumbers = [11,12,13,14,15,16,17,18,19,20]

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *