Array in JavaScript - come si gestiscono ?

Reading Time: 3 minutes

In questo articolo ti spiego come si gestiscono gli array utilizzando il linguaggio Javascript. Ti spiegherò in breve parole a cosa serve e come funziona ogni metodo includendo degli piccoli snippet per essere più chiaro.

['U', 'A', 'J'].length                      // 3 
[1, 2, 3, 4].every(el => el > 2)            // true 
[-2, -1, 0, 2].some(el => el > 1)           // true 
[4, -2, 1, -5, 6].filter(el => el > 3)      // [4, 6] 
['K', 'L', 'M', 'N'].forEach(el => console.log(el))
['K', 'L', 'M'].concat(['N', 'O'])          // ['K', 'L', 'M', 'N', 'O'] 
['K', 'L', 'M'].join('_')                   // 'K_L_M' 
[2, 3, 0, -1, 4].sort()                     // [0, -1, 2, 3, 4] 
['K', 'L', 'M'].reverse()                   // ['M', 'L', 'K'] 
['K', 'L', 'M'].slice(2)                    // ['M'] 
['I', 'love', 'web'].splice(1, 1)           // ['I']; diventerà ['I', 'web'] 
['K', 'L', 'O', 'L', 'M'].indexOf('L')      // 1 
['K', 'L', 'O', 'L', 'M'].lastIndexOf('L')  // 3 
[4, 5, 6].map(el => el * 2)                 // [8, 10, 12] 
[4, 5, 6].pop()                             // 6; diventerà [4, 5] 
[4, 5, 6].push(7, 8)                        // 8; diventerà [4, 5, 6, 7, 8] 
[4, 5, 6].shift()                           // 4; diventerà [5, 6] 
[4, 5, 6].unshift(7, 8)                     // 5; diventerà [7, 8, 4, 5, 6] 
[2, 3, 4].reduce((a, b) => a + b)           // 9

Lenth

Il metodo restituisce il numero di elementi nell’array.

['U', 'A', 'J'].length                      // 3

Every

Ritorna true se ogni elemento dell’array ritorna true

[5, 6, 7, 8].every(el => el > 4)            // true

Some

Ritorna true e almeno un elemento dell’array è true

[-4, -2, 0, 2].some(el => el > 1)           // true

Filter

Filtra l’array in base alla condizione stabilita

[4, -2, 1, -5, 6].filter(el => el > 3)      // [4, 6]

forEach

Eseguimento di una funzione per ogni elemento dell’array

['K', 'L', 'M', 'N'].forEach(el => console.log(el))

Concat

Concatenazione di due array

['K', 'L', 'M'].concat(['N', 'O'])          // ['K', 'L', 'M', 'N', 'O']

Spread

La stessa cosa si potrebbe fare anche con spread

const array_1 = ['G', 'H', 'J'];
const array_2 = ['K', 'L'];

const result = [...array_1, ...array_2] // ['G', 'H', 'J', 'K', 'L']

Join

L’unione degli elementi divisi dalla virgola

['K', 'L', 'M'].join() // K,L,M 

['Hello', 'beautiful', 'web'].join(', ') // Hello, beautiful, web

Sort

Restituisce un array Ordinato

['B', 'D', 'C', 'E', 'A'].sort() // ["A", "B", "C", "D", "E"] 

['B', 'D', 'C', 'E', 'A'].sort((a, b) => b > a) // ["E", "D", "C", "B", "A"]

Reverse

Restituisce un array ordinato inversamente

['K', 'L', 'M'].reverse() // ["M", "L", "K"]

Slice

Restituisce un nuovo array da begin a end e gli indici riiniziano da zero

['K', 'L', 'M'].slice(2) // ["M"] 
['K', 'L', 'M'].slice(0, 1) // ['K'] 
['HTML', 'CSS', 'JS', 'PHP'].slice(1, 3) // ["CSS", "JS"]

Splice

Restituisce un nuovo array eliminando gli elementi esistenti e aggiungendo nuovi

let array = ['I', 'love', 'beautiful', 'Web'];
let deleted_elements = array.splice(1, 2); // dall'indice eliminiamo 2 elementi

console.log(array);            // ["I", "Web"] 
console.log(deleted_elements); // ["love", "beautiful"]

IndexOf

Ritorna l’id del primo elemento trovato

['K', 'L', 'M', 'L', 'L'].indexOf('L') // 1 
['K', 'L', 'M'].indexOf('N')           // -1

lastIndexOf

Ritorna l’id del ultimo elemento trovato

['HTML', 'JS', 'PHP', 'JS'].lastIndexOf('JS') // 3 
['HTML', 'JS', 'PHP'].lastIndexOf('CSS')      // -1

Map

Il metodo map ritorna un nuovo array dei risultati di richiamo di ogni elemento

[2, 4, 6, 8].map(item => item * 10) // [20, 40, 60, 80]

Pop

Elimina l’ultimo elemento dell’array e lo fa ritornare

let array = ['HTML', 'CSS', 'JS'];
let last_el = array.pop();

console.log(array);   // ["HTML", "CSS"] 
console.log(last_el); // JS

Push

Aggiunge uno o più elementi all’array già esistente

let array = [4, 5, 6];
let count_els = array.push(7, 8);

console.log(array);     // [4, 5, 6, 7, 8] 
console.log(count_els); // 5

Shift

Eliminerà il primo elemento dall’array

const array = [7, 8, 9];
const first_el = array.shift();

console.log(first_el); // 7 
console.log(array);    // [8, 9]

Unshift

Aggiungrà elementi all’inizio dell’array esistente

const array = [5, 6, 7];
const length = array.unshift(8, 9);

console.log(length); // 5 
console.log(array);  // [8, 9, 5, 6, 7]

Conclusione

Questi snippet di array in javascript lo puoi utilizzare come snippet per i tuoi progetti.