Padroneggiare gli Array JavaScript: Guida Completa alla Creazione, Manipolazione, Filtraggio e Applicazioni Pratiche

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduzione

Cosa Sono gli Array JavaScript e Perché Sono Importanti?

Gli array JavaScript sono uno degli elementi essenziali per gestire e manipolare i dati in modo efficiente. Utilizzando gli array, è possibile memorizzare più valori in un’unica variabile e recuperarli o modificarli secondo necessità.
Ad esempio, gli array sono estremamente utili quando si salva un elenco di nomi utente, una lista di prodotti o i risultati di calcoli. Soprattutto nello sviluppo di applicazioni web, gli array sono frequentemente usati nella gestione dei dati dei form o dei dati recuperati dalle API.

Casi d’Uso Pratici degli Array

• Gestione Liste : Gestire gli articoli del carrello o una lista di cose da fare.
• Filtraggio Dati : Funzionalità di ricerca e ordinamento per l’utente.
• Controllo Animazioni : Gestire l’ordine degli elementi o cambiamenti dinamici.

Gli array sono una struttura fondamentale per trattare dati raggruppati e rappresentano un argomento imprescindibile quando si impara JavaScript.

Cosa Imparerai in Questo Articolo

Questo articolo spiega sistematicamente gli array JavaScript, coprendo argomenti quali:

1. Come dichiarare e inizializzare gli array
2. Come aggiungere, rimuovere e recuperare elementi
3. Tecniche di ordinamento e filtraggio
4. Metodi per unire e suddividere gli array
5. Esempi di applicazione pratici con gli array

Il contenuto è adatto a principianti e a chi ha un livello intermedio e spiega con cura tutto, dalle basi alle tecniche pratiche.

A Chi è Rivolto Questo Articolo

• Principianti : Chi utilizza gli array per la prima volta.
• Utenti Intermedi : Chi desidera apprendere operazioni avanzate o scrivere codice più efficiente.

Con esempi di codice e casi d’uso pratici, anche i principianti possono apprendere con sicurezza.

Cosa Puoi Raggiungere Imparando gli Array

Una volta padroneggiati gli array JavaScript, otterrai le seguenti competenze:

• Gestione e Manipolazione Dati : Aggiungere, rimuovere o ordinare i dati con facilità.
• Integrazione API : Gestire e visualizzare in modo efficiente i dati recuperati dalle Web API.
• Sviluppo Applicazioni : Realizzare app semplici usando esempi pratici.

Usa ciò che impari qui per costruire applicazioni JavaScript più avanzate.

2. Nozioni di Base sugli Array | Dichiarazione e Inizializzazione

2.1 Definizione e Ruolo degli Array

Gli array JavaScript sono oggetti speciali che consentono di gestire più elementi di dati contemporaneamente. Ogni elemento ha un indice che ne determina la posizione, rendendo semplice il recupero e la manipolazione dei dati.

Principali Ruoli degli Array

1. Gestione Liste : Gestire dati raggruppati come elenchi di prodotti o informazioni sugli utenti.
2. Manipolazione Dati : Eseguire operazioni efficienti come ordinamento o ricerca.
3. Elaborazione Dati Dinamica : Gestire e trasformare i dati recuperati dalle API.

Caratteristiche degli Array

• Gli indici degli elementi partono da 0.
• È possibile memorizzare valori di tipi di dato diversi nello stesso array.

  let mixedArray = [1, "hello", true];
  console.log(mixedArray[1]); // "hello"
  

2.2 Dichiarare e Inizializzare gli Array

Dichiarazione Base di un Array

In JavaScript, gli array possono essere dichiarati in due modi:

1. Utilizzando la notazione letterale (consigliata)

   let fruits = ["apple", "banana", "grape"];
   

2. Utilizzando il costruttore Array

   let fruits = new Array("apple", "banana", "grape");
   

Creare un Array Vuoto

let emptyArray = [];

2.3 Dichiarare Array Multidimensionali

Un array multidimensionale è un array che contiene altri array. È utile quando si gestiscono strutture dati gerarchiche.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6

2.4 Note sull’Inizializzazione

Mescolare Tipi di Dato

Gli array JavaScript possono contenere valori di tipi di dato diversi, il che può causare errori inattesi se non gestito con attenzione.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Esempi di Operazioni Base sugli Array

let animals = ["dog", "cat", "bird"];
console.log(animals[0]); // "dog"

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Sommario

Questa sezione ha spiegato i seguenti concetti sugli array JavaScript:

1. Definizione e ruoli degli array
2. Sintassi di base per la dichiarazione e l’inizializzazione
3. Array multidimensionali e gestione della lunghezza
4. Considerazioni importanti durante l’inizializzazione con esempi di codice

Con queste conoscenze, sarai meglio preparato per il passo successivo: “Operazioni di base sugli array.”

3. Operazioni di base sugli array | Aggiunta, rimozione e recupero degli elementi

3.1 Metodi per aggiungere elementi

Aggiungere elementi alla fine – push()

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Aggiungere elementi all’inizio – unshift()

let animals = ["cat", "dog"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "cat", "dog"]

3.2 Metodi per rimuovere elementi

Rimuovere l’ultimo elemento – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Rimuovere il primo elemento – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Rimuovere elementi da qualsiasi posizione – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 Metodi per recuperare elementi

Recuperare per indice

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Recuperare l’ultimo elemento

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Recuperare il primo elemento corrispondente – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Sommario

In questa sezione, abbiamo spiegato le seguenti operazioni sugli array JavaScript:

1. Come aggiungere elementi (push() e unshift())
2. Come rimuovere elementi (pop(), shift(), splice())
3. Come recuperare elementi (accesso per indice, find(), includes())

Combinando queste operazioni di base, puoi manipolare gli array liberamente.

4. Ordinare e filtrare gli array

4.1 Metodi per ordinare gli array

Ordinare in ordine crescente o decrescente – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Invertire l’ordine – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 Metodi per filtrare gli array

Estrarre gli elementi che corrispondono a una condizione – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Recuperare il primo elemento che corrisponde a una condizione – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Ottenere l’indice del primo elemento corrispondente – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Sommario

Questa sezione ha spiegato come ordinare e filtrare gli array in JavaScript:

1. Ordinamento: utilizzare sort() e reverse() per controllare l’ordine.
2. Filtraggio: utilizzare filter() per estrarre gli elementi corrispondenti.
3. Ricerca: utilizzare find() e findIndex() per individuare gli elementi.

5. Unire, dividere e trasformare gli array

5.1 Metodi per unire gli array

Unire gli array – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Unire usando la sintassi spread

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 Metodi per dividere gli array

Estrarre una porzione – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Rimuovere o sostituire elementi – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 Metodi per trasformare gli array

Convertire un array in stringa – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Convertire una stringa in array – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Appiattire un array multidimensionale – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Riepilogo

Questa sezione ha spiegato vari metodi JavaScript per gli array relativi a unire, dividere e trasformare gli array:

1. Unire gli array: concat() e la sintassi spread
2. Dividere gli array: slice() per l’estrazione e splice() per la rimozione o sostituzione
3. Trasformare gli array: join() e split() per la conversione in stringa
4. Appiattire: flat() per convertire gli array annidati in una singola dimensione

6. Iterare sugli array e tecniche avanzate

6.1 Metodi per iterare sugli array

Iterazione di base con for

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Iterazione semplificata con for...of

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Iterare con il metodo forEach()

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Creare un nuovo array con map()

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 Tecniche avanzate

Rimuovere elementi duplicati

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Appiattire un array – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Riepilogo

Questa sezione ha spiegato i metodi di iterazione sugli array e le tecniche avanzate:

1. Loop di base: iterazione efficiente usando for e for...of.
2. Loop basati su metodi: utilizzo di forEach() e map() per un’elaborazione più pulita e funzionale.
3. Manipolazione avanzata dei dati: rimozione dei duplicati e appiattimento degli array annidati.

7. Esempio pratico | Creare un’applicazione semplice usando gli array

7.1 Creare un’applicazione To-Do List

Panoramica delle funzionalità

Questa semplice app To-Do list include le seguenti funzionalità:

1. Aggiungere nuove attività
2. Rimuovere le attività completate
3. Visualizzare l’elenco corrente delle attività

Esempio di codice

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

// Function to remove a task
function removeTask(index) {
  if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(`Removed: ${removed[0]}`); displayTasks(); } else { console.log("Invalid index"); } } // Function to display current tasks function displayTasks() { console.log("Current Tasks:"); tasks.forEach((task, index) => {
    console.log(`${index + 1}: ${task}`);
  });
}

// Test execution
addTask("Study JavaScript");
addTask("Create shopping list");
addTask("Check email");

removeTask(1); // Remove the second task

Esempio di Output

Added: Study JavaScript
Added: Create shopping list
Added: Check email
Current Tasks:
1: Study JavaScript
2: Create shopping list
3: Check email
Removed: Create shopping list
Current Tasks:
1: Study JavaScript
2: Check email

Sommario

Questa sezione ha introdotto un’applicazione pratica usando le operazioni sugli array:

1. Applicazione To-Do List : Pratica di aggiunta, rimozione e visualizzazione delle attività.
2. Ricerca e Analisi dei Dati : Dimostrato come implementare ricerche flessibili e aggregazione dei dati usando le operazioni sugli array.

8. Sommario | Padroneggiare le Operazioni sugli Array

Gli array JavaScript sono strumenti potenti che aiutano a semplificare la gestione e la manipolazione dei dati. Questo articolo ha coperto tutto, dalle operazioni di base alle tecniche avanzate e agli esempi pratici.

8.1 Revisione di Questo Articolo

1. Operazioni di Base sugli Array

• Dichiarazione e Inizializzazione : Imparato a creare array e gestire array multidimensionali.
• Aggiunta, Rimozione e Recupero di Elementi : Praticata la manipolazione dinamica dei dati usando metodi come push(), pop() e altri.

2. Ordinamento e Filtraggio degli Array

• Ordinamento : Spiegato come modificare l’ordine dell’array usando sort() e reverse().
• Filtraggio : Imparato a estrarre dati usando filter() e find().

3. Unire, Dividere e Trasformare gli Array

• Unione : Compreso come unire array usando concat() e la sintassi spread.
• Divisione e Trasformazione : Usati slice(), splice(), join() e split() per una gestione flessibile dei dati.

4. Iterazione e Tecniche Avanzate

• Iterazione : Usati for, forEach() e map() per un’iterazione efficiente.
• Tecniche Avanzate : Imparato a rimuovere duplicati e appiattire array annidati.

5. Esempi Pratici

• App To-Do List : Applicate le operazioni sugli array per costruire un’app funzionale.
• Ricerca e Aggregazione dei Dati : Dimostrato il filtraggio e l’analisi pratica dei dati.

8.2 Importanza delle Operazioni sugli Array e Casi d’Uso

Perché le Operazioni sugli Array sono Importanti?

La manipolazione degli array è essenziale per organizzare, analizzare e visualizzare i dati. Gli scenari comuni includono:

1. Gestione e Visualizzazione dei Dati : Filtrare i dati API e mostrare i risultati in tabelle.
2. Gestione di Moduli e Input Utente : Aggiornare dinamicamente le liste o elaborare i valori di input.
3. Funzioni di Ricerca e Ordinamento : Gestire grandi set di dati in modo efficiente.
4. Sviluppo di Applicazioni : Creare funzionalità UI come carrelli della spesa e gestori di attività.

8.3 Prossimi Passi nell’Apprendimento

1. Ulteriore Utilizzo dei Metodi degli Array

• Compito Suggerito : Costruisci un’app che recupera dati API e filtra i risultati usando le operazioni sugli array.

2. Confronta e Usa Altre Strutture Dati

• Impara Object, Set e Map per scegliere la struttura giusta per ogni scenario.

3. Applica le Conoscenze nei Framework JavaScript

• Usa le competenze sugli array nei framework come React o Vue.js per lo sviluppo reale.

8.4 Link di Riferimento e Risorse

• MDN Web Docs: Array Object https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array
• JavaScript.info: Arrays and Methods https://javascript.info/

8.5 Considerazioni Finali e Consigli per i Lettori

Le operazioni sugli array in JavaScript sono essenziali per costruire una solida base di programmazione. Questo articolo ha fornito un approccio strutturato, dai concetti di base a quelli avanzati.

Consigli

1. Pratica scrivendo codice : Testa ogni metodo per approfondire la tua comprensione.
2. Sviluppa capacità di problem solving : Trasforma compiti del mondo reale in programmi per migliorare l’esperienza pratica.
3. Continua a imparare : Impara nuovi framework e le ultime tecnologie per migliorare il tuo set di competenze.

Fai il passo successivo!

Usa questo articolo come base per avanzare verso la creazione di applicazioni più complesse o per apprendere framework moderni.

FAQ | Domande Frequenti

Q1. Qual è la differenza tra map() e forEach()?

• map() : Restituisce un nuovo array dopo aver applicato una funzione a ciascun elemento.
• forEach() : Esegue una funzione per ogni elemento ma non restituisce un nuovo array.

Esempio:

let numbers = [1, 2, 3];

// map()
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Q2. Come ordino correttamente i numeri?

Per impostazione predefinita, sort() confronta i valori come stringhe. Per ordinare i numeri numericamente, è necessario passare una funzione di confronto.
Esempio:

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Q3. Come posso rimuovere i duplicati da un array?

Usa l’oggetto Set per rimuovere facilmente i duplicati.
Esempio:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4. Come verifico se un elemento esiste in un array?

Usa il metodo includes() per determinare se l’array contiene un valore specifico.
Esempio:

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Q5. Come appiattisco un array multidimensionale?

Usa il metodo flat() per convertire un array annidato in un array a un solo livello.
Esempio:

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]