Corso di Informatica Multimediale

Strutturare i dati in JavaScript

Marco Comini

2021-10-26
JavaScript: Array/5

indexOf( value ) Cerca il valore value nell’array, partendo dall’inizio, e

ritorna la sua posizione.

lastIndexOf( value ) Cerca il valore value nell’array, partendo dalla fine,

e ritorna la sua posizione. Ad esempio
1 var a = [4 , 10 , 5 , 10 , 6];
2 show ( a . indexOf (2));
3 show ( a . indexOf (10));
4 show ( a . lastIndexOf (10));
produce
1 -1
2 1
3 3

Marco Comini Informatica Multimediale 2021-10-26 1 / 27

JavaScript: Array/6
pop() Rimuove l’ultimo elemento dell’array e restituisce il suo valore. Ad
esempio
1 var a = [4 ,5 ,6];
2 show ( a . pop ());
3 show ( a );
produce
1 6
2 [4 , 5]
Inoltre se l’array è vuoto non lo modifica e restituisce undefined .
1 var b =[];
2 show ( b . pop ());
3 show ( b );
produce
1 undefined
2 []
Marco Comini Informatica Multimediale 2021-10-26 2 / 27
JavaScript: Array/7

push( value ) Aggiunge un elemento alla fine di un array e restituisce la

nuova dimensione. Ad esempio
1 var a = [4 ,5 ,6];
2 show ( a . push (7));
3 show ( a );
produce
1 4
2 [4 , 5 , 6 , 7]

Marco Comini Informatica Multimediale 2021-10-26 3 / 27

JavaScript: Array/8
shift() Rimuove il primo elemento dell’array e restituisce il suo valore.
Ad esempio
1 var a = [5 ,6 ,7];
2 show ( a . shift ());
3 show ( a );
produce
1 5
2 [6 , 7]
Inoltre se l’array è vuoto non lo modifica e restituisce undefined
1 var b =[];
2 show ( b . shift ());
3 show ( b );
produce
1 undefined
2 []
Marco Comini Informatica Multimediale 2021-10-26 4 / 27
JavaScript: Array/9
unshift( value ) Aggiunge un elemento all’inizio di un array e restituisce
la nuova dimensione. Ad esempio
1 var a = [4 ,5 ,6];
2 show ( a . unshift (7));
3 show ( a );
produce
1 4
2 [7 , 4 , 5 , 6]

reverse() capovolge l’ordine degli elementi di un array. Ad esempio

1 var a = [5 ,6 ,7 ,8];
2 a . reverse ();
3 show ( a );
produce
1 [8 , 7 , 6 , 5]

Marco Comini Informatica Multimediale 2021-10-26 5 / 27

JavaScript: Array/10

sort() ordina il contenuto dell’array, secondo l’ordine lessicografico delle

stringhe corrispondenti ai contenuti. Ad esempio
1 var a = [4 ,0 ,15 ,6 ,22];
2 a . sort ();
3 show ( a );
produce
1 [0 , 15 , 22 , 4 , 6]
Per un array di stringhe è utile, per il resto meno.

Marco Comini Informatica Multimediale 2021-10-26 6 / 27

JavaScript: Array/11

concat( array , . . . , array ) restituisce una copia di un array

concatenandogli tutti gli argomenti. Ad esempio
1 var a = [4 ,5 ,6] , b =[7 ,8];
2 show ( a . concat (b ,b , a ));
3 show ( a );
produce
1 [4 , 5 , 6 , 7 , 8 , 7 , 8 , 4 , 5 , 6]
2 [4 , 5 , 6]

Marco Comini Informatica Multimediale 2021-10-26 7 / 27

JavaScript: Array/12

slice( start , limit ) restituisce un nuovo array con le celle a partire

dall’indice start in poi escludendo gli indici ≥ limit. Ad esempio
1 var a = [4 ,5 ,6 ,7 ,8];
2 show ( a . slice (1 ,4));
3 show ( a . slice (2 ,15));
4 show ( a );
produce
1 [5 , 6 , 7]
2 [6 , 7 , 8]
3 [4 , 5 , 6 , 7 , 8]

Marco Comini Informatica Multimediale 2021-10-26 8 / 27

JavaScript: Array/13

splice( start , value ) cancella value celle a partire dall’indice start,

restituendo le celle rimosse. Ad esempio
1 var a = [4 ,5 ,6 ,7 ,8];
2 show ( a . splice (1 ,2));
3 show ( a );
produce
1 [5 , 6]
2 [4 , 7 , 8]

Marco Comini Informatica Multimediale 2021-10-26 9 / 27

JavaScript: Array/14

join( string ) costruisce una stringa con (le rappresentazioni di) tutti i
valori dell’array separandoli con string. Ad esempio
1 var a = [4 ,5.0 ,6 ,7 e8 ];
2 show ( a . join ( " + " ));
3 show ( a . join ( " " ));
produce
1 " 4+5+6+700000000 "
2 " 456700000000 "

Marco Comini Informatica Multimediale 2021-10-26 10 / 27

JavaScript: Esempi Array/1

Esempio
Ribaltiamo il contenuto di un array (senza usare il metodo reverse )

reverse([1,2,3,4]) = [4,3,2,1]

Marco Comini Informatica Multimediale 2021-10-26 11 / 27

 JavaScript: Esempi Array/1

Esempio
Ribaltiamo il contenuto di un array (senza usare il metodo reverse )

1 function reverse ( a ) {
2 var i , tmp , last = a . length -1;
3

4 // show ( a );
5 for ( i =0; i <= last ; i ++) {
6 tmp = a [ i ];
7 a [ i ] = a [ last - i ];
8 a [ last - i ] = tmp ;
9 }
10 // show ( a );
11 }

Funziona? RUN var a=[1,2,3,4]; reverse(a); show(a);

Marco Comini Informatica Multimediale 2021-10-26 11 / 27

 JavaScript: Esempi Array/1

Esempio
Ribaltiamo il contenuto di un array (senza usare il metodo reverse )

1 function reverse ( a ) {
2 var i , tmp , last = a . length -1;
3

4 // show ( a );
5 for ( i =0; i<last/2 ; i ++) {
6 tmp = a [ i ];
7 a [ i ] = a [ last - i ];
8 a [ last - i ] = tmp ;
9 }
10 // show ( a );
11 }

Marco Comini Informatica Multimediale 2021-10-26 11 / 27

JavaScript: Esempi Array/2

1 var m =[[]];
2

3 for ( var k =0; k <10; k ++) {

4 m [ k ]=[];
5 m [ k ]. length =3;
6 m [ k ]. fill ( k );
7 }
1 show ( m );

Cosa fa?

Marco Comini Informatica Multimediale 2021-10-26 12 / 27

JavaScript: Esempi Array/2

1 var m =[[]];
2

3 for ( var k =0; k <10; k ++) {

4 m [ k ]=[];
5 m [ k ]. length =3;
6 m [ k ]. fill ( k );
7 }
1 show ( m );

produce

1 [[0 , 0 , 0] , [1 , 1 , 1] , [2 , 2 , 2] , [3 , 3 , 3] , [4 , 4 , 4] ,
2 ... , [9 , 9 , 9]]

Marco Comini Informatica Multimediale 2021-10-26 12 / 27

JavaScript: Esempi Array/2

1 var m =[[]];
2

3 for ( var k =0; k <10; k ++) {

4 m [ k ]=[];
5 m [ k ]. length =3;
6 m [ k ]. fill ( k );
7 }
1 show ( m [0]. concat ( m [1] , m [2] , m [3]));

Cosa fa?

Marco Comini Informatica Multimediale 2021-10-26 12 / 27

JavaScript: Esempi Array/2

1 var m =[[]];
2

3 for ( var k =0; k <10; k ++) {

4 m [ k ]=[];
5 m [ k ]. length =3;
6 m [ k ]. fill ( k );
7 }
1 show ( m [0]. concat ( m [1] , m [2] , m [3]));

produce

1 [0 , 0 , 0 , 1 , 1 , 1 , 2 , 2 , 2 , 3 , 3 , 3]

Marco Comini Informatica Multimediale 2021-10-26 12 / 27

JavaScript: Esempi Array/2

1 var m =[[]];
2

3 for ( var k =0; k <10; k ++) {

4 m [ k ]=[];
5 m [ k ]. length =3;
6 m [ k ]. fill ( k );
7 }
1 var b = m [0]. concat () , c = m [0];
2 b [2]=66;
3 c [2]=55;
4 show ( b ); show ( m [0]);

Cosa fa?

Marco Comini Informatica Multimediale 2021-10-26 12 / 27

JavaScript: Esempi Array/2
1 var m =[[]];
2

3 for ( var k =0; k <10; k ++) {

4 m [ k ]=[];
5 m [ k ]. length =3;
6 m [ k ]. fill ( k );
7 }
1 var b = m [0]. concat () , c = m [0];
2 b [2]=66;
3 c [2]=55;
4 show ( b ); show ( m [0]);

produce
1 [0 , 0 , 66]
2 [0 , 0 , 55]
notare che i cambi su c hanno cambiato m[0] mentre quelli su b no.

Marco Comini Informatica Multimediale 2021-10-26 12 / 27

JavaScript: Esempi Array/3

Esempio
Costruiamo la matrice identità

makeId(4) =
[[1, 0, 0, 0], [0, 1, 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]]

Marco Comini Informatica Multimediale 2021-10-26 13 / 27

 JavaScript: Esempi Array/3

Esempio
Costruiamo la matrice identità

1 function makeId ( n ) {
2 var mat = [] , k ;
3

4 for ( k =0; k < n ; k ++ ) {

5 mat [ k ]=[];
6 mat [ k ]. length = n ;
7 mat [ k ]. fill (0);
8 mat [ k ][ k ] = 1;
9 }
10 return mat ;
11 }

Marco Comini Informatica Multimediale 2021-10-26 13 / 27

JavaScript: ForEach su Array/1

In JavaScript abbiamo due costrutti di iterazione determinata per gli array.

for ( identifier of array ) statement lega ad ogni iterazione identifier con
le varie celle dell’array ed esegue statement.
Ad esempio
1 function arraySum ( array ) {
2 var sum =0;
3 for ( var elem of array ) sum += elem ;
4 return sum ;
5 }
calcola la somma di tutti gli elementi di un array.

Marco Comini Informatica Multimediale 2021-10-26 14 / 27

JavaScript: ForEach su Array/2

Il programma
1 function arrayMin ( array ) {
2 var min = Number . MAX_SAFE_INTEGER ;
3 // if ( array . length ==0) return undefined ;
4

5 for ( var elem of array ) min = Math . min ( min , elem );

6 return min ;
7 }
calcola il valore minimo di un array.

Number.MAX_SAFE_INTEGER (9007199254740991) è il più grande numero

intero che si può rappresentare esattamente in JavaScript, includendo la
capacità di eseguire correttamente operazioni intere.
Number.MAX_SAFE_INTEGER + 1 == Number.MAX_SAFE_INTEGER + 2
restituisce true (che ovviamente non è matematicamente corretto).

Marco Comini Informatica Multimediale 2021-10-26 15 / 27

JavaScript: ForEach su Array/3

for ( identifier in array ) statement lega ad ogni iterazione identifier con

gli indici delle varie celle dell’array che non sono undefined ed esegue
statement.
Ad esempio
1 function arrayMinDef ( array ) {
2 var min = Number . MAX_SAFE_INTEGER ;
3 // if ( array . length ==0) return undefined ;
4

5 for ( var index in array )

6 min = Math . min ( min , array [ index ]);
7 return min ;
8 }
calcola il minimo dei valori definiti di un array.
In presenza di (almeno) un valore undefined la funzione arrayMin
produce NaN , mentre arrayMinDef no.

Marco Comini Informatica Multimediale 2021-10-26 16 / 27

 JavaScript: ForEach su Array/4
Esempio
Costruiamo la matrice identità con il for/in

1 function makeId ( n ) {
2 var mat = [];
3 mat . length = n ;
4 mat . fill (0);
5 for ( var k in mat ) {
6 mat [ k ] = [];
7 mat [ k ]. length = n ;
8 mat [ k ]. fill (0);
9 mat [ k ][ k ] = 1;
10 }
11 return mat ;
12 }
Il comando mat.fill(0); di linea 4 serve affinché il for/in faccia
effettivamente qualcosa; il valore usato è ininfluente.
RUN makeId(4)
Marco Comini Informatica Multimediale 2021-10-26 17 / 27
JavaScript: Esempi Matrici (con Array bidimensionali)/1

Esempio
Calcoliamo la somma degli elementi di una matrice di numeri

versione 1

1 function matrixSum ( a ) {
2 var sum = 0;
3 for ( var i =0; i < mat . length ; i ++)
4 for ( var j =0; j < mat [ i ]. length ; j ++)
5 sum += mat [ i ][ j ];
6 return sum ;
7 }

Marco Comini Informatica Multimediale 2021-10-26 18 / 27

JavaScript: Esempi Matrici (con Array bidimensionali)/1

Esempio
Calcoliamo la somma degli elementi di una matrice di numeri

versione 2

1 function matrixSum ( a ) {
2 var sum = 0;
3 for ( var i in mat )
4 for ( var j in mat [ i ])
5 sum += mat [ i ][ j ];
6 return sum ;
7 }

Marco Comini Informatica Multimediale 2021-10-26 18 / 27

JavaScript: Esempi Matrici (con Array bidimensionali)/1

Esempio
Calcoliamo la somma degli elementi di una matrice di numeri

versione 3

1 function matrixSum ( a ) {
2 var sum = 0;
3 for ( var row of mat )
4 for ( var elem of row )
5 sum += elem ;
6 return sum ;
7 }

Marco Comini Informatica Multimediale 2021-10-26 18 / 27

JavaScript: Esempi Matrici (con Array bidimensionali)/1

Esempio
Calcoliamo la somma degli elementi di una matrice di numeri

ESERCIZIO per casa verificare cosa succede per matrici che contengono
elementi undefined e/o non sono ben formate (cioè con righe di lunghezza
diversa)

Marco Comini Informatica Multimediale 2021-10-26 18 / 27

JavaScript: Esempi Matrici (con Array bidimensionali)/2

Esempio
Calcoliamo il vettore contenente i valori minimi delle colonne di una matrice.

 
a11 ... a1m
 .. .. 
 . . 
an1 . . . anm con bj = min aij
1≤i≤n
⇓
(b1 , . . . , bm )

Marco Comini Informatica Multimediale 2021-10-26 19 / 27

 JavaScript: Esempi Matrici (con Array bidimensionali)/2

Esempio
Calcoliamo il vettore contenente i valori minimi delle colonne di una matrice.

versione 1: riempendo il vettore un elemento alla volta

1 function matrixColsMin ( mat ) {

2 var v =[] , m ;
3

4 for ( var j in mat [0] ) {

5 m = Number . MAX_SAFE_INTEGER ;
6 for ( var i in mat )
7 m = Math . min (m , mat [ i ][ j ]);
8 v[j] = m;
9 }
10 return v ;
11 }

Marco Comini Informatica Multimediale 2021-10-26 19 / 27

 JavaScript: Esempi Matrici (con Array bidimensionali)/2

Esempio
Calcoliamo il vettore contenente i valori minimi delle colonne di una matrice.

versione 2: lavorando per righe

1 function matrixColsMin ( mat ) {

2 var v = [];
3 v . length = mat [0]. length ;
4 v . fill ( Number . MAX_SAFE_INTEGER );
5

6 for ( var i in mat )

7 for ( var j in v )
8 v [ j ] = Math . min ( v [ j ] , mat [ i ][ j ]);
9 return v ;
10 }

Marco Comini Informatica Multimediale 2021-10-26 19 / 27

JavaScript: effetti dell’uso del modello a riferimenti/1

JavaScript come altri linguaggi ad oggetti (tutti?) utilizza per gli oggetti il
modello a riferimenti.
Invece di avere un legame fra un identificatore e l’l-value di un oggetto, si
crea un legame con una ulteriore cella di memoria che contiene l’l-value
dell’oggetto (riferimento/puntatore all’oggetto).
Il valore di una espressione che definisce un oggetto in realtà non è l’oggetto,
ma l’indirizzo di una opportuna area di memoria in cui l’oggetto viene creato
a seconda della definizione.
Tutte le operazioni che coinvolgono oggetti quindi si comportano a tutti gli
effetti come i parametri con modalità per riferimento. Il codice
1 var point = { coordY : 2} , point2 = point ;
2 point2 . coordX = 0;
3 show ( point );
produce infatti
1 { coordY : 2 , coordX : 0}

Marco Comini Informatica Multimediale 2021-10-26 20 / 27

JavaScript: effetti dell’uso del modello a riferimenti/2
il passaggio di un parametro non elementare, che quindi è un oggetto, è un
passaggio per valore del riferimento all’oggetto e perciò otteniamo un
comportamento uguale a quello di un passaggio per riferimento. Infatti
1 var x =0 , y =0; f (x , y ); print ( " x = " ,x , " y = " ,y );
2

3 function f (a , b ) {
4 a = 2; b = 5;
5 }
6

7 function g ( v ) {
8 v [2] = 40; show ( a );
9 }
10

11 var a = [1 ,2 ,3]; g ( a );
produce
1 x =0 y =0 ⇐= il cambio di a o b in f non altera x o y
2 [1 , 2 , 40] ⇐= il cambio di v in g altera a
Marco Comini Informatica Multimediale 2021-10-26 21 / 27
JavaScript: effetti dell’uso del modello a riferimenti/3
Le primitive di confronto == e != lavorano sempre sui valori degli
argomenti, quindi nel caso di oggetti confrontano i riferimenti, non gli oggetti
riferiti. Ad esempio
1 var obj1 , obj2 , obj3 ;
2

3 obj1 ={ val : 44 };
4 obj2 = obj1 ;
5 obj3 ={ val : 44 };
6

7 show ( obj1 == obj2 ); show ( obj1 == obj3 );

8 show ( obj1 . val == obj3 . val );
9

10 obj2 . val = 6;
11

12 show ( obj1 . val ); show ( obj3 . val );

produce
1 true false true 6 44 ⇐= il cambio di obj2 altera anche obj1
Marco Comini Informatica Multimediale 2021-10-26 22 / 27
JavaScript: effetti dell’uso del modello a riferimenti/4

Attenzione che tutte le primitive lavorano con i riferimenti (a meno che non
sia specificato espressamente che fanno delle copie)
1 var a =[];
2

3 a . length =3;
4 a . fill ({ field : 1});
5 show ( a );
6

7 a [0]. field = 3;
8 show ( a );
produce
1 [{ field : 1} , { field : 1} , { field : 1}]
2 [{ field : 3} , { field : 3} , { field : 3}]

Marco Comini Informatica Multimediale 2021-10-26 23 / 27

JavaScript: Stringhe/1
Le stringhe in JavaScript sono array (e quindi oggetti). Hanno però delle
peculiarità specifiche rispetto agli array (e ai generici oggetti).
Non si possono modificare (i metodi che alterano non esistono).
Vengono gestite come se fossero valori primitivi piuttosto che oggetti
1 var a = " ciao " , b = " ciao " ;
2 show ( a == b );
produce true (alla faccia della ortogonalità del linguaggio)
join non c’è.
includes , indexOf e lastIndexOf lavorano con sottostringhe. Ad
esempio
1 var a = " ciao " ;
2 show ( a . includes ( " ia " ));
3 show ( a . includes ( " ai " ));
produce
1 true
2 false
Marco Comini Informatica Multimediale 2021-10-26 24 / 27
JavaScript: Stringhe/2

split( string ) genera un array di stringhe che si ottengono tagliando in

corrispondenza delle occorrenze di string. Ad esempio
1 var a = " Buon giorno a tutti ! " ;
2 show ( a . split ( " " ));
3 show ( a . split ( " " ). join ( " _ " ));
produce
1 [ " Buon " , " giorno " , " a " , " tutti ! " ]
2 " Bu on _gi or no_ a_t u tt i ! "

toUpperCase() genera una versione della stringa in cui tutti caratteri

minuscoli diventano maiuscoli. toLowerCase() viceversa.

Marco Comini Informatica Multimediale 2021-10-26 25 / 27

JavaScript: Esempi Stringhe/1

1 var str = " stringa di prova , lunghetta stavolta "

2 show ( str . length );
3 str . length =10;
4 show ( str . split ( " " ));
5 show ( str . split ( " ta " ));
6 show ( str . indexOf ( " di " ));
7 show ( str . indexOf ( " err " ));
produce
1 37
2 [ " stringa " ," di " ," prova , " ," " ," lunghetta " ," stavolta " ]
3 [ " stringa di prova , lunghet " , " s " , " vol " , " " ]
4 8
5 -1

Marco Comini Informatica Multimediale 2021-10-26 26 / 27

JavaScript: Esempi Stringhe/2

Esempio
Scrivere una funzione isPrefixOf(str1,str2) per determinare se la stringa str2 inizia
con la stringa str1

versione 1

1 function isPrefixOf ( str1 , str2 ) {

2

3 for ( var k in str1 )

4 if ( str1 [ k ] != str2 [ k ] )
5 return false ;
6

7 return true ;
8 }

Marco Comini Informatica Multimediale 2021-10-26 27 / 27

JavaScript: Esempi Stringhe/2

Esempio
Scrivere una funzione isPrefixOf(str1,str2) per determinare se la stringa str2 inizia
con la stringa str1

versione 2

1 function isPrefixOf ( str1 , str2 ) {

2 for ( var k =0; k < str1 . length ; k ++ )
3 if ( str1 [ k ] != str2 [ k ] )
4 return false ;
5

6 return true ;
7 }

Marco Comini Informatica Multimediale 2021-10-26 27 / 27

JavaScript: Esempi Stringhe/2

Esempio
Scrivere una funzione isPrefixOf(str1,str2) per determinare se la stringa str2 inizia
con la stringa str1

versione 3

1 function isPrefixOf ( str1 , str2 ) {

2

3 return ( str1 == str2 . slice (0 , str1 . length ) );

4 }

Marco Comini Informatica Multimediale 2021-10-26 27 / 27