Oggetto Array (array) JavaScript

L'array in JavaScript è un oggetto globale utilizzato per memorizzare più valori in una singola variabile.

L'array può contenere qualsiasi tipo di dati, inclusi stringhe, numeri, oggetti, funzioni, persino altri array.

Supponiamo di voler memorizzare i nomi delle città nel codice JavaScript. Memorizzare i nomi delle città in variabili potrebbe apparire così:

　　let city1 = "New Delhi";
　　let city2 = "Mumbai";
　　let city3 = "Jaipur";

Ma, se hai bisogno di memorizzare i nomi delle città di un paese, non saranno solo tre, ma potrebbero essere cento.

Tuttavia, utilizzare così tanti variabili e tracciare tutte le variabili sarà un compito molto difficile.

L'array risolve questo problema fornendo una struttura ordinata per memorizzare più valori o un insieme di valori in un singolo variabile.

Creazione dell'array

Ci sono due modi per creare un array in JavaScript:

• Creazione implicita tramite letteralecon parentesi quadre: []

• Modo semplice - esempio direttocon il prefisso new

Mostriamo come utilizzare l'inizializzazioneCostante dell'arrayCreazione di fruitsArray[]:

let fruits = ["Apple", "Mango", "Banana", "Orange"];

La dichiarazione può essere distribuita su più righe:

let fruits = [
　　"Apple",
　　"Mango",
　　"Banana",
　　"Orange"
;

Ora ecco come si usaCostruttore dell'arrayDati creati in modo identico, utilizzando new Array():

let fruits = new Array("Apple", "Mango", "Banana", "Orange");

Entrambi i metodi creano un array. Tuttavia,Creazione implicita tramite letterale(parentesi quadre []) Il metodo è più comune e preferito perchénew Array()Il metodo costruttore potrebbe produrre risultati inaspettati e non coerenti.

Indice dell'array

L'array non ha nomi/valori. Invece, li indici sono numerici a partire da 0.

Ecco un esempio di array assegnato a fruits:

　　let fruits = ["Apple", "Mango", "Banana", "Orange"];

Ecco la spiegazione del modo in cui ciascun elemento dell'array fruits è indicizzato:

Il primo elemento dell'array è "Apple", con l'indice 0.

L'ultimo elemento è "Orange", con l'indice 3.

Accedere agli elementi dell'array

Puoi accedere agli elementi dell'array JavaScript tramite l'indice dell'elemento messo tra parentesi quadre.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0]; // Restituisce "Apple"
fruits[2]; // Restituisce "Banana"

Gli indici degli array JavaScript iniziano a zero: l'indice del primo elemento dell'array è 0, il secondo elemento è 1, e così via.

Tentare di accedere a un elemento non esistente nell'array restituirà undefined.

fruits[7]; // Restituisce undefined

Puoi accedere all'intero array facendo riferimento al nome dell'array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
document.getElementById("result").innerHTML = fruits;

proprietà length dell'array

Possiamo usare illengthL'attributo trova quante elementi ci sono nell'array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.length; // Restituisce 4

L'indice dell'ultimo elemento è uguale a il valore dell'attributo length dell'array meno 1.

Questo esempio utilizza l'attributo length per visualizzare il valore dell'ultimo elemento:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let lastIndex = fruits.length - 1;
fruits[lastIndex];

Aggiungere elementi all'array

Nel variabile fruits, abbiamo quattro elementi, inclusi gli indici da 0 a 3. Se vuoi aggiungere un nuovo elemento all'array, assegna un valore all'indice successivo.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[4] = "Guava";

　 　 Se aggiungiamo un elemento e saltiamo accidentalmente un indice, verrà creato un elemento nell'array con valore vuoto ('').

fruits[6] = "Strawberry";

Usarepush()Il metodo può evitare problemi simili, aggiungendo un elemento alla fine dell'array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits.push("Strawberry");

Puoi anche usarelengthLe proprietà aggiungono un nuovo elemento all'array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[fruits.length] = "Beer";

Modificare l'elemento dell'array

Utilizzando l'operatore di assegnazione possiamo sovrascrivere qualsiasi valore nell'array.

let fruits = ["Apple", "Mango", "Banana", "Orange"];
fruits[0] = "Monkey";

Gli array sono solitamente utilizzati per combinare insieme liste di tipi di dati simili, ma tecnicamente possono contenere qualsiasi valore o mistura di valori.

let myArray = [5, 22, "Arrow", "Bone", true, new Date()];

Esplorare l'array

Possiamo utilizzareforelengthProprietà per esplorare l'intero array.

In questo esempio, creiamo un array di frutti e stampiamo ogni indice e valore nel documento:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let txt = "";
// Esplora la lunghezza dell'array
per (let i = 0; i < frutti.length; i++) {
txt += i + " = " + frutti[i] + "<br>";
}

Possiamo anche usare i seguentiArray.forEach()Metodo:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");
frutti.forEach(function(element) {
result.innerHTML += element + "<br>";
});

Possiamo anche usarefor...ofUn ciclo per esplorare l'array, questa è una nuova funzionalità di JavaScript:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
let result = document.getElementById("result");
per (let x of frutti) {
result.innerHTML += x;
}

for...ofIl ciclo non recupera l'indice dell'elemento dell'array, ma è generalmente un metodo più semplice e più conciso per esplorare l'array.

Array multidimensionale

Un array multidimensionale è un array che contiene uno o più array.

　　let points = [
　　　[35, 28, 29, 31],
　　　[33, 24, 25, 29]
　　;

JavaScript può comprendere array multidimensionali di profondità 2, 3, 4, 5 o superiori. Ma per molti, è difficile gestire array oltre ai tre livelli.

Il numero di dimensioni dell'array indica il numero di indici necessari per selezionare l'elemento:

• Per un array bidimensionale, è necessario due indici per selezionare l'elemento

• Per un array tridimensionale, è necessario tre indici per selezionare l'elemento

Un array bidimensionale può essere considerato come una tabella, dove il primo [ ] è la riga, il secondo [ ] è la colonna.

points[0][1]; // restituisce 28
points[1][0]; // restituisce 33

In questo esempio, creiamo un array bidimensionale e stampiamo ogni indice e valore nel documento:

let points = [[35, 28, 29, 31], [33, 24, 25, 29]];
let row;
let col;
per (row = 0; row < 2; row++) {
　　　per (col = 0; col < 4; col++) {
　　document.write(row, col, points[row][col]);
　　　}
}

Certo, puoi anche utilizzarelengthOttieni le dimensioni delle righe e delle colonne dell'attributo:

let points = [
　　　[10, 12, 14, 16, 18],
　　　[20, 22, 24, 26],
　　　[30, 32, 34],
　　　[32, 34]
;
points.length; // Restituisce 4 (righe totali)
points[0].length; // Restituisce 5
points[1].length; // Restituisce 4
points[2].length; // Restituisce 3
points[3].length; // Restituisce 2

Nella maggior parte dei casi, un array bidimensionale è sufficiente, anche se in alcuni casi può essere utile un array tridimensionale

L'array di JavaScript è un oggetto

In JavaScript, l'array è un oggetto speciale

L'operatore typeof di JavaScript restituisce "Object" per gli array

let fruits = ["Apple", "Mango", "Banana", "Orange"];
typeof fruits; // Restituisce "object"

Evitare di utilizzare new Array()

Non è necessario utilizzare il costruttore di array new Array()

Invece, dovresti preferire di creare array in modo implicito, ossia, utilizzando direttamente il metodo degli spazi quadri [], che è più comune e popolare.

Le seguenti due istruzioni creano un nuovo array vuoto chiamato scores:

　　let scores = new Array(); // Metodo non consigliato
　　let scores = []; // Metodo consigliato

Le seguenti due istruzioni creano un nuovo array contenente 5 numeri:

let scores = new Array(2, 5, 10, 28, 10); // Metodo non consigliato
let scores = [2, 5, 10, 28, 10]; // Metodo consigliato

Il costruttore new Array() può avere differenze e può produrre risultati inaspettati:

let scores = new Array(10, 25); // Crea un array contenente due elementi (10 e 25)
let scores = new Array(10); // Crea un array contenente 10 elementi non definiti

Come determinare se una variabile è un array - Array.isArray()

Come probabilmente sapete, l'operatore typeof di JavaScript restituisce "Object" per gli array.

Un problema comune è:Come sapere se una variabile è un array?

Per risolvere questo problema, ECMAScript 5 ha definito un nuovo metodoArray.isArray():

let fruits = ["Apple", "Mango", "Banana", "Orange"];
Array.isArray(fruits);

Se l'oggetto è stato creato dal costruttore dato, è possibile anche utilizzare l'operatore instanceof per restituire true:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
if (fruits instanceof Array) {
　　　// espressioni da eseguire
}

Passaggio di un array alla funzione

Nei seguenti esempi, passeremo un array alla funzione:

let fruits = ["Apple", "Mango", "Banana", "Orange"];
myFunc(fruits);
function myFunc(arg) {
　　for (let elem of arg) {
　　document.write(elem, "<br>");
　　}
}

Restituzione di un array dalla funzione

Nei seguenti esempi, esporteremo un array dalla funzione:

function myFunc() {
　　let fruits = ["Apple", "Mango", "Banana", "Orange"];
　　return fruits;
}
let myArray = myFunc();
document.write(myArray);