Un array in JavaScript è una struttura dati utilizzata per memorizzare più valori in una singola variabile. Può contenere vari tipi di dati e consente il ridimensionamento dinamico. Si accede agli elementi tramite il loro indice, a partire da 0.

Matrice JavaScript

Hai due modi per creare array JavaScript: utilizzando il costruttore Array o il sintassi letterale dell'array abbreviato , che sono semplicemente parentesi quadre. Le matrici hanno dimensioni flessibili, quindi possono crescere o ridursi man mano che aggiungi o rimuovi elementi.

Tabella dei contenuti

• Cos'è l'Array in JavaScript?
• Terminologie di base dell'array JavaScript
• Dichiarazione di un array
• Operazioni di base sugli array JavaScript
• Differenza tra array e oggetti JavaScript
• Quando utilizzare array e oggetti JavaScript?
• Riconoscimento di un array JavaScript
• Riferimento completo all'array JavaScript
• Esempi di array JavaScript
• CheatSheet JavaScript

Terminologie di base dell'array JavaScript

• Vettore: Una struttura dati in JavaScript che consente di memorizzare più valori in una singola variabile.
• Elemento della matrice: Ogni valore all'interno di un array è chiamato elemento. Si accede agli elementi tramite il loro indice.
• Indice della matrice: Una rappresentazione numerica che indica la posizione di un elemento nella matrice. Gli array JavaScript sono indicizzati a zero, il che significa che il primo elemento ha l'indice 0.
• Lunghezza della matrice: Il numero di elementi in un array. Può essere recuperato utilizzando la proprietà length.

Dichiarazione di un array

Esistono fondamentalmente due modi per dichiarare un array, ovvero Array Literal e Array Constructor.

1. Creazione di un array utilizzando Array Literal

La creazione di un array utilizzando il valore letterale dell'array implica l'uso di parentesi quadre [] per definire e inizializzare l'array. Questo metodo è conciso e ampiamente preferito per la sua semplicità.

ordinamento per inserimento java

Sintassi:

let arrayName = [value1, value2, ...];>

Esempio:

// Creating an Empty Array let names = []; console.log(names); // Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ]>

2. Creazione di un array utilizzando il costruttore di array (nuova parola chiave JavaScript)

Il costruttore di array si riferisce a un metodo per creare array invocando la funzione di costruzione di array. Questo approccio consente l'inizializzazione dinamica e può essere utilizzato per creare array con una lunghezza o elementi specificati.

Sintassi:

let arrayName = new Array();>

Esempio:

// Declaration of an empty array  // using Array constructor let names = new Array(); console.log(names); // Creating and Initializing an array with values let courses = new Array('HTML', 'CSS', 'Javascript', 'React'); console.log(courses); // Initializing Array while declaring let arr = new Array(3); arr[0] = 10; arr[1] = 20; arr[2] = 30; console.log(arr);>

[] [ 'HTML', 'CSS', 'Javascript', 'React' ] [ 10, 20, 30 ]>

Nota: Entrambi i metodi sopra indicati fanno esattamente lo stesso. Utilizza il metodo letterale dell'array per efficienza, leggibilità e velocità.

Operazioni di base sugli array JavaScript

1. Accesso agli elementi di un array

È possibile accedere a qualsiasi elemento dell'array utilizzando il numero di indice. L'indice negli array inizia con 0.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Accessing Array Elements console.log(courses[0]); console.log(courses[1]); console.log(courses[2]); console.log(courses[3]);>

HTML CSS Javascript React>

2. Accesso al primo elemento di un array

L'indicizzazione dell'array inizia da 0, quindi possiamo accedere al primo elemento dell'array utilizzando il numero di indice.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing First Array Elements let firstItem = courses[0]; console.log('First Item: ', firstItem);>

First Item: HTML>

3. Accesso all'ultimo elemento di un array

Possiamo accedere all'ultimo elemento dell'array utilizzando il numero di indice [array.length – 1].

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Accessing Last Array Elements let lastItem = courses[courses.length - 1]; console.log('First Item: ', lastItem);>

First Item: React>

4. Modifica degli elementi dell'array

Gli elementi di un array possono essere modificati assegnando un nuovo valore al loro indice corrispondente.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; console.log(courses); courses[1]= 'Bootstrap'; console.log(courses);>

[ 'HTML', 'CSS', 'Javascript', 'React' ] [ 'HTML', 'Bootstrap', 'Javascript', 'React' ]>

5. Aggiunta di elementi all'array

Gli elementi possono essere aggiunti all'array utilizzando metodi come push() e unshift().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React']; // Add Element to the end of Array courses.push('Node.js'); // Add Element to the beginning courses.unshift('Web Development'); console.log(courses);>

[ 'Web Development', 'HTML', 'CSS', 'Javascript', 'React', 'Node.js' ]>

6. Rimozione di elementi da un array

Rimuovi gli elementi utilizzando metodi come pop(), shift() o splice().

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; console.log('Original Array: ' + courses); // Removes and returns the last element let lastElement = courses.pop(); console.log('After Removed the last elements: ' + courses); // Removes and returns the first element let firstElement = courses.shift(); console.log('After Removed the First elements: ' + courses); // Removes 2 elements starting from index 1 courses.splice(1, 2); console.log('After Removed 2 elements starting from index 1: ' + courses);>

Produzione

Original Array: HTML,CSS,Javascript,React,Node.js After Removed the last elements: HTML,CSS,Javascript,React After Removed the First elements: CSS,Javascript,React After Removed 2 elements starting from index 1: CSS>

7. Lunghezza dell'array

Ottieni la lunghezza di un array utilizzando la proprietà length.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; let len = courses.length; console.log('Array Length: ' + len);>

Array Length: 5>

8. Aumentare e diminuire la lunghezza dell'array

Possiamo aumentare e diminuire la lunghezza dell'array utilizzando la proprietà length di JavaScript.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'Javascript', 'React', 'Node.js']; // Increase the array length to 7 courses.length = 7; console.log('Array After Increase the Length: ', courses); // Decrease the array length to 2 courses.length = 2; console.log('Array After Decrease the Length: ', courses)>

Array After Increase the Length: [ 'HTML', 'CSS', 'Javascript', 'React', 'Node.js', ] Array After Decrease the Length: [ 'HTML', 'CSS' ]>

9. Iterazione attraverso gli elementi dell'array

Possiamo eseguire l'iterazione dell'array e accedere agli elementi dell'array utilizzando il ciclo for e forEach.

Esempio: È un esempio di ciclo for.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through for loop for (let i = 0; i < courses.length; i++) {  console.log(courses[i]) }>

HTML CSS JavaScript React>

Esempio: Ne è l'esempio Array.forEach() ciclo continuo.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Iterating through forEach loop courses.forEach(function myfunc(elements) {  console.log(elements); });>

HTML CSS JavaScript React>

10. Concatenazione di array

Combina due o più array utilizzando il metodo concat(). Ir restituisce un nuovo array contenente elementi di array uniti.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; let otherCourses = ['Node.js', 'Expess.js']; // Concatenate both arrays let concateArray = courses.concat(otherCourses); console.log('Concatenated Array: ', concateArray);>

Concatenated Array: [ 'HTML', 'CSS', 'JavaScript', 'React', 'Node.js', 'Expess.js' ]>

11. Conversione di un array in stringa

Abbiamo un metodo integrato accordare() per convertire un array in una stringa.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Convert array ot String console.log(courses.toString());>

HTML,CSS,JavaScript,React>

12. Controllare il tipo di array

Il JavaScript tipo di L'operatore viene utilizzato per verificare il tipo di un array. Restituisce oggetto per gli array.

// Creating an Array and Initializing with Values let courses = ['HTML', 'CSS', 'JavaScript', 'React']; // Check type of array console.log(typeof courses);>

object>

Differenza tra array e oggetti JavaScript

• Gli array JavaScript utilizzano gli indici come numeri.
• gli oggetti usano gli indici come nomi..

Quando utilizzare array e oggetti JavaScript?

• Gli array vengono utilizzati quando vogliamo che i nomi degli elementi siano numerici.
• Gli oggetti vengono utilizzati quando vogliamo che i nomi degli elementi siano stringhe.

Riconoscimento di un array JavaScript

Esistono due metodi con cui possiamo riconoscere un array JavaScript:

• Usando Array.isArray() metodo
• Usando istanza di metodo

Di seguito è riportato un esempio che mostra entrambi gli approcci:

const courses = ['HTML', 'CSS', 'Javascript']; console.log('Using Array.isArray() method: ', Array.isArray(courses)) console.log('Using instanceof method: ', courses instanceof Array)>

Using Array.isArray() method: true Using instanceof method: true>

Nota: Si verifica un errore comune durante la scrittura degli array:

const numbers = [5] // and const numbers = new Array(5)>

const numbers = [5] console.log(numbers)>

Le due affermazioni precedenti non sono la stessa cosa.

Produzione: Questa istruzione crea un array con un elemento [5] .

[5]>

const numbers = new Array(5)  console.log(numbers)>

[ ]>

Riferimento completo all'array JavaScript

Abbiamo un elenco completo di array Javascript, per controllarli ti invitiamo a consultare questo Riferimento all'array JavaScript articolo. Contiene una descrizione dettagliata ed esempi di tutte le proprietà e i metodi dell'array.

Esempi di array JavaScript

Gli esempi di array JavaScript contengono un elenco di domande che vengono poste principalmente durante le interviste. Si prega di controllare questo articolo Esempi di array JavaScript per maggiori dettagli.

CheatSheet JavaScript

Abbiamo un Cheat Sheet su Javascript in cui abbiamo trattato tutti gli argomenti importanti di Javascript per controllarli, per favore esaminali Javascript Cheat Sheet: una guida di base a JavaScript .