Array fantastici e come iterarli

Ciao, gli array sono dei contenitori "elastici" di dati pronti ad essere manipolati per ogni nostra esigenza. Oggi faccio un riepilogo dei metodi utili per giocare un po' con loro con efficienza in javascript.

Map

Il metodo map() restituisce un nuovo array applicando una funzione ciascun elemento.

const numbers = [1, 2, 3, 4];
const new_numbers =  numbers.map((num) => num +1);

console.log(new_numbers);
// Output: [2, 3, 4, 5]

Un altro esempio utile di map() potrebbe essere quello di aggiungere una nuova proprietà su un array di oggetti.

const products = [
{ id: 101, name: "Tastiera", price: 50 },
{ id: 102, name: "Mouse", price: 30 }
];
const productsTax = products.map((product) => {
    // Copiamo e aggiungiamo una nuova proprietà
  return {
    ...product,          
    tax: product.price * 1.22
  };
});

console.log(productsTax);
//Output [{id: 101,name:"Tastiera",price:50,tax: 61},{id: 102,name: "Mouse",price: 30,tax: 36.6}
]

Filter

il metodo filter() restituisce un nuovo array che soddisfa una determinata condizione.

const numbers = [10, 18, 21, 30, 15];
const filter =  numbers.filter((num) => num >= 18);

console.log(filter);
// Output: [18, 21, 30]

const guitars = [
  {id:1, name: 'Fender'},
  {id:2, name: 'Gibson'},
  {id:3, name: 'Ibanez'}
  ];
const filter =  guitars.filter((obj) => obj.name == 'Fender');

console.log(filter);
//Output [{ id: 1, name: "Fender" }]

Find

Il metodo find() restituisce il primo elemento dell'array che soddisfa una condizione.

const guitars = [
  { id: 1, name: "Fender" },
  { id: 2, name: "Gibson" }
];
const guitar = guitars.find((obj) => obj.id === 1);

console.log(guitar);
//Output {id: 1,name: "Fender"}

FindIndex

il metodo findIndex() simile a find, restituisce la posizione dell'elemento anzichè l'elemento stesso.

const guitars = [
  { id: 1, name: "Fender" },
  { id: 2, name: "Gibson" }
];
const guitar = guitars.findIndex((obj) => obj.id === 2);

console.log(guitar);
//Output 1

Reduce

il metodo reduce() aggrega tutti i valori di un array

const orders = [
  { id: 1, amount: 12 },
  { id: 2, amount: 22 }
];
const order_tot = orders.reduce((sum, order) => sum + order.amount, 0);

console.log(order_tot);
//Output 34

Foreach

il metodo forEach() cicla e applica una funzione a tutti gli elementi di un array, a differenza di map() questo metodo non crea un nuovo array.

const orders = [
  { id: 1, amount: 12 },
  { id: 2, amount: 22 }
];
orders.forEach((order, index) => {
  console.log(`Ordine numero ${index + 1}: ID ${order.id} - Importo: ${order.amount}€`);
});

Includes

Il metodo includes() verifica se un determinato valore esiste nel nostro array. Restituisce sempre un valore booleano: true o false.

const ids = [1, 5, 10, 22];
const checkId = ids.includes(1);

console.log(checkId); 
// Output: true

Sort

Il metodo sort() è utilissimo per riordinare l'array esistente senza crearne uno nuovo.

//nomi
const names = ["Maria", "Paola", "Francesca"];
names.sort();

console.log(names);
// Output ["Francesca", "Maria", "Paola"]

//ordine numerico crescente
let numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => a - b);

console.log(numbers);
// Output [1, 5, 10, 25, 40, 100]

//ordine numerico decrescente
let numbers = [40, 100, 1, 5, 25, 10];
numbers.sort((a, b) => b - a);

console.log(numbers);
// Output [100, 40, 25, 10, 5, 1]

Va bene anche per gli array di oggetti…

const products = [
    { name: 'Laptop', amount: 1200 },
    { name: 'Mouse', amount: 25 },
    { name: 'Tastiera', amount: 75 }
];
 // Ordina per prezzo crescente
products.sort((a, b) => a.amount - b.amount);

console.log(products);
// Output: [
{ name: 'Mouse', amount: 25 },
{ name: 'Tastiera', amount: 75 },
{ name: 'Laptop', amount: 1200 }
]

FlatMap

Quando serve "spianare" i valori di una proprietà di un array di oggetti con stile usiamo il metodo flatMap()

const users = [
  { name: 'Mario', skills: ['js', 'php'] },
  { name: 'Luca', skills: ['css'] }
];
const skills = users.flatMap(user => user.skills);

console.log(skills);
// Output ['js', 'php', 'css']

Every

Il metodo every() verifica una condizione su tutti gli elementi dell'array. Restituisce true solo se tutti gli elementi passano il test.

const orders = [
  { id: 1, amount: 12 },
  { id: 2, amount: 22 },
  { id: 3, amount: -5 } // Un ordine non valido!
];
// Controlliamo se TUTTI gli ordini hanno un importo positivo
const allValid = orders.every((order) => order.amount > 0);

console.log(allValid); 
// Output: false (perché l'id 3 è negativo)

every() mi piace combinato alla potenza delle Regular Expression (Regex) per fare un controllo bello specifico. Qui ad esempio controlliamo se gli indirizzi email sono formattati bene.

const userEmails = ["mario.rossi@gmail.com","info@azienda.it","supporto@web.org"];
// 1. Regex per email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const checkEmail = userEmails.every((email) => emailRegex.test(email));
if (checkEmail) {
  console.log("Ottimo! Tutti gli indirizzi sono corretti.");
} else {
  console.log("Attenzione: uno o più indirizzi non sono validi.");
}

Splice

Il metodo splice() **modifica l’array originale **rimuovendo e/o aggiungendo elementi.

//rimuovere elementi
const orders = ["A", "B", "C", "D"];
// Parte dall'indice 1 ("B") e ne rimuove 1
orders.splice(1, 1);

console.log(orders); 
// Output: ["A", "C", "D"]

//sostituire elementi
const orders = ["A", "B", "C"];
// Vai all'indice 1 ("B"), toglilo (1) e metti "Z"
orders.splice(1, 1, "Z");

console.log(orders); 
// Output: ["A", "Z", "B"]

//aggiungere senza togliere
const orders = ["A", "B"];
// Vai all'indice 1, non togliere nulla (0), inserisci "C"
orders.splice(1, 0, "C");

console.log(orders); 
// Output: ["A", "B", "C"]

Questo è tutto. Grazie per aver letto questo 'promemoria'… alla prossima.