Array JavaScript

JavaScript 数组用于在单一变量中存储多个值。

Esempio

var cars = ["Saab", "Volvo", "BMW"];

Prova da solo

什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？

解决方法就是数组！

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

创建数组

使用数组文本是创建 JavaScript 数组最简单的方法。

语法：

var array-name = [item1, item2, ...];

Esempio

var cars = ["Saab", "Volvo", "BMW"];

Prova da solo

空格和折行并不重要。声明可横跨多行：

Esempio

var cars = [
    "Saab",
    "Volvo",
    "BMW"

Prova da solo

Non scrivere una virgola dopo l'ultimo elemento (ad esempio, "BMW",).

Potrebbe esserci problemi di compatibilità tra browser.

Utilizzando la parola chiave JavaScript new

Esempio seguente creerà anche un array e lo assegnerà:

Esempio

var cars = new Array("Saab", "Volvo", "BMW");

Prova da solo

Gli esempi sopra riportati sono completamente identici. Non è necessario utilizzare new Array().

Per motivi di chiarezza, leggibilità e velocità di esecuzione, si prega di utilizzare il primo metodo (metodo testuale dell'array).

accediamo agli elementi dell'array

Attraverso il riferimentoNumero di indice (sottoscrittura)per riferirsi a un elemento dell'array.

Questa istruzione accede al valore del primo elemento di cars:

var name = cars[0];

Questa istruzione modifica il primo elemento di cars:

cars[0] = "Opel";

Esempio

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];

Prova da solo

[0] è l'elemento primo dell'array. [1] è il secondo. Gli indici dell'array iniziano da 0.

Modifica dell'elemento dell'array

Questa istruzione modifica il valore del primo elemento di cars:

cars[0] = "Opel";

Esempio

var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
document.getElementById("demo").innerHTML = cars[0];

Prova da solo

Accedere all'intero array

Tramite JavaScript, è possibile accedere all'intero array tramite il nome dell'array:

Esempio

var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;

Prova da solo

Array è oggetto

Un array è un tipo speciale di oggetto. In JavaScript, si utilizza typeof L'operatore restituirà "oggetto".

Ma, è meglio descrivere gli array JavaScript come array.

L'uso dell'arraynumeriper accedere ai "elementi" del suo. Nel caso presente,person[0] Restituisce Bill:

Array:

var person = ["Bill", "Gates", 62];

Prova da solo

Gli oggetti utilizzanoNomeper accedere ai "membri" del suo. Nel caso presente,person.firstName Restituisce Bill:

Oggetto:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Prova da solo

Gli elementi dell'array possono essere oggetti

Le variabili JavaScript possono essere oggetti. Gli array sono un tipo speciale di oggetto.

Per questo, puoi memorizzare vari tipi di variabili nello stesso array.

Puoi salvare oggetti in un array. Puoi salvare funzioni in un array. Puoi anche salvare un array in un array:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

Proprietà e metodi degli array

La vera forza degli array JavaScript è nascosta nelle sue proprietà e metodi:

Esempio

var x = cars.length;   // L'attributo length restituisce il numero di elementi
var y = cars.sort();   // Il metodo sort() ordina l'array

Studieremo i metodi degli array nel capitolo successivo.

Attributo length

length L'attributo restituisce la lunghezza dell'array (il numero di elementi dell'array).

Esempio

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // La lunghezza di fruits è 4

Prova da solo

length L'attributo è sempre maggiore dell'indice massimo dell'array (indice inferiore).

Accedere al primo elemento dell'array

Esempio

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];

Prova da solo

Accedere all'ultimo elemento dell'array

Esempio

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Prova da solo

Iterare gli elementi dell'array

Il metodo più sicuro per iterare un array è utilizzare "for"Ciclo:",

Esempio

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

Prova da solo

Puoi anche utilizzare Array.foreach() Funzione:

Esempio

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Prova da solo

Aggiungi elementi all'array

Il miglior metodo per aggiungere elementi all'array è utilizzare push() Metodo:

Esempio

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Aggiungi un nuovo elemento (Lemon) a fruits

Prova da solo

Puoi anche utilizzare length Proprietà per aggiungere nuovi elementi all'array:

Esempio

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Aggiungi un nuovo elemento (Lemon) a fruits

Prova da solo

Attenzione!

Aggiungere l'elemento con l'indice massimo può creare "buchi" non definiti nell'array:

Esempio

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Aggiungi un nuovo elemento (Lemon) a fruits

Prova da solo

Array associativo

Molti elementi di programmazione supportano gli array con indicizzazione nome.

Gli array con indicizzazione nome sono detti array associativi (o hash).

JavaScript Non supportaarray con indicizzazione nome.

In JavaScript, gli array possono utilizzare soloindici numerici.

Esempio

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length restituisce 3
var y = person[0];              // person[0] restituisce "Bill"

Prova da solo

Attenzione!

Se utilizzate un'indicizzazione nome, JavaScript definisce l'array come un oggetto standard.

Dopo di che, tutti i metodi e le proprietà degli array produrranno risultati non corretti.

Esempio:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length restituirà 0
var y = person[0];              // person[0] restituirà undefined

Prova da solo

La differenza tra array e oggetti

In JavaScript,Arrayusareindici numerici.

In JavaScript,oggettousareIndici nominativi.

Gli array sono un tipo speciale di oggetto che hanno indici numerici.

Quando usare array e quando usare oggetti?

  • JavaScript non supporta gli array associativi
  • Se si desidera che il nome degli elementi siastringa (testo)doveva essere usatooggetto.
  • Se si desidera che il nome degli elementi sianumeridoveva essere usatoArray.

Evita new Array()

Non c'è bisogno di usare il costruttore di array integrato di JavaScript new Array().

Usa [] Invece di questo!

Le seguenti due espressioni diverse creano un nuovo array vuoto chiamato points:

var points = new Array();         // Cattivo
var points = [];                  // Buono

Le seguenti due espressioni diverse creano un nuovo array contenente sei numeri:

var points = new Array(40, 100, 1, 5, 25, 10); // Cattivo
var points = [40, 100, 1, 5, 25, 10];          // Buono

Prova da solo

new Le parole chiave possono complicare il codice. Possono anche produrre risultati imprevisti:

var points = new Array(40, 100);  // Crea un array contenente due elementi (40 e 100)

Cosa succede se elimino uno di questi elementi?

var points = new Array(40);       // Crea un array contenente 40 elementi non definiti!!!

Prova da solo

Come riconoscere un array

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

Il problema risiede nell'operatore JavaScript typeof Restituisce "oggetto"：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // Restituisce "oggetto"

Prova da solo

L'operatore typeof restituisce "oggetto", poiché l'array JavaScript è un oggetto.

Soluzione 1:

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

Array.isArray(fruits);     // Restituisce true

Prova da solo

Il problema con questa soluzione è ECMAScript 5 Non supporta i browser obsoleti.

Soluzione 2:

Crea il tuo isArray() La funzione risolve questo problema:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

Prova da solo

Se il parametro è un array, la funzione sopra restituirà sempre true.

O una spiegazione più precisa è: se l'oggetto原型 contiene la parola "Array", allora restituisce true.

Soluzione 3:

Se l'oggetto è stato creato dal costruttore specificato, allora instanceof Operatore che restituisce true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // Restituisce true

Prova da solo