Array

Sommario

L'oggetto Array di JavaScript  è un oggetto globale che è utilizzato nella costruzione di array; che sono oggetti di alto-livello del tipo lista.

Creare un Array

var fruits = ["Apple", "Banana"];

console.log(fruits.length);
// 2

Accedere (index into) ad un Array item

var first = fruits[0];
// Apple

var last = fruits[fruits.length - 1];
// Banana

Loop in un  Array

fruits.forEach(function (item, index, array) {
  console.log(item, index);
});
// Apple 0
// Banana 1

Aggiungere alla fine di  un Array

var newLength = fruits.push("Orange");
// ["Apple", "Banana", "Orange"]

Rimuovere dalla fine di un Array

var last = fruits.pop(); // remove Orange (from the end)
// ["Apple", "Banana"];

Rimuovere dall'inizio di un Array

var first = fruits.shift(); // remove Apple from the front
// ["Banana"];

Aggiungere al'inizio di un Array

var newLength = fruits.unshift("Strawberry") // add to the front
// ["Strawberry", "Banana"];

Trovare l'indice di un elemento nell'Array

fruits.push("Mango");
// ["Strawberry", "Banana", "Mango"]

var pos = fruits.indexOf("Banana");
// 1

Rimuovere un elemento tramite la Posizione dell'Indice

var removedItem = fruits.splice(pos, 1); // this is how to remove an item
// ["Strawberry", "Mango"]

Copiare un Array

var shallowCopy = fruits.slice(); // this is how to make a copy
// ["Strawberry", "Mango"]

Sintassi

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(arrayLength)
elementN
Un array JavaScript è inizializzato con gli elementi dati, eccetto nel caso in cui un argomento singolo è passato al costruttore dell'Array e l'argomento è un numero. (Vedere sotto.) Notare che questo caso speciale si applica solo agli array JavaScript creati con il costruttore Array, non array literals creati con la sintassi a parentesi.
arrayLength
Se l'unico argomento passato al costruttore Array è un integer tra  0 e 232-1 (inclusivo), questo restituisce un nuovo array JavaScript con la lunghezza settata su quel numero. Se l'argomento è un qualsiasi altro numero, un eccezione RangeError è lanciata.

Descrizione

Gli Array sono come oggetti di tipo lista il cui prototipo ha metodi per performare operazioni trasversali e di mutazione. Nè la lunghezza di un array JavaScript o i tipi dei suoi elementi sono fissati. Poichè la grandezza della lunghezza di un array cresce o diminuisce in qualsiasi momento, gli array JavaScript non danno garanzia di essere compatti; questo dipende da come il programmatore sceglie di usarli. In generale, queste sono caratteristiche convenienti; ma se tali  caratteristiche non fossero desiderabili per un utilizzo particolare, si potrebbe considerare di utilizzare i typed arrays.

Alcuni pensano che non si dovrebbe un utilizzare un array come un associative array. In ogni  caso, si può utilizzare un semplice objects invece, con i suoi avvertimenti. Vedere il post Lightweight JavaScript dictionaries with arbitrary keys come esempio.

Accedere ad elementi di  array 

Gli array JavaScript sono indicizzati a zero: il primo elemento di un array è all'indice 0, e l'ultimo elemento è all'indice uguale al valore della proprietà dell'array length  meno 1. Usare un numero di indice invalido restituisce undefined.

var arr = ['this is the first element', 'this is the second element'];
console.log(arr[0]);              // logs 'this is the first element'
console.log(arr[1]);              // logs 'this is the second element'
console.log(arr[arr.length - 1]); // logs 'this is the second element'

Gli elementi dell'Array sono proprietà dell'oggetto allo stesso modo che toString è una proprietà, ma provare ad accedere ad un elemento di un array come segue, lancia un errore di sintassi, poichè la proprietà del nome non è valida:

console.log(arr.0); // a syntax error

Non c'è niente di speciale riguardo gli array JavaScript e la proprietà che causa questo. Le proprietà JavaScript che iniziano con un numero non possono essere referenziate con la notazione punto: e vi si deve accedere usando la notazione parentesi quadre. Per esempio, se si avesse un oggetto con una proprietà chiamata '3d', la si potrebbe referenziare solamente utilizzando la notazione parentesi quadre. E.g.:

var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(years.0);   // a syntax error
console.log(years[0]);  // works properly
renderer.3d.setTexture(model, 'character.png');     // a syntax error
renderer['3d'].setTexture(model, 'character.png');  // works properly

Notare che nell'esempio 3d, '3d' doveva essere messo tra virgolette. E' possibile mettere tra virgolette anche gli indici dell'array JavaScript (e.g., years['2'] invece di years[2]), anche se non necessario. Il 2 in years[2] è costretto in una stringa dal motore di JavaScript attraverso una implicita conversione toString. E' per questa ragione che  '2' e '02' riferirebbero a due differenti slot nell'oggetto years ed il seguente esempio potrebbe essere true:

console.log(years['2'] != years['02']);

Ugualmente, alle proprietà di oggetti che sono parole riservate(!) vi si può accedere come string literals in notazione parentesi quadrate (ma anche in notazione punto a partire dalla versione  40.0a2 di firefox):

var promise = {
  'var'  : 'text',
  'array': [1, 2, 3, 4]
};

console.log(promise['var']);

Relzione tra length e proprietà numeriche

Una proprietà di un array JavaScript length e proprietà numeriche sono connesse. Molti dei metodi integrati di array(e.g., join, slice, indexOf, etc.) tengono in conto del valore della proprietà dell'array length quando sono chiamati. Altri metodi(e.g., push, splice, etc.) risultano nell'aggiornamento della proprietàlength dell'array.

var fruits = [];
fruits.push('banana', 'apple', 'peach');

console.log(fruits.length); // 3

Quando si setta una proprietà su un array JavaScript, quando la proprietà è un valido indice di array e quell'iindice è al di fuori dei limiti dell'array, il motore aggiornerà la proprietà length in accordo:

fruits[5] = 'mango';
console.log(fruits[5]); // 'mango'
console.log(Object.keys(fruits));  // ['0', '1', '2', '5']
console.log(fruits.length); // 6

Aumentandolength.

fruits.length = 10;
console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
console.log(fruits.length); // 10

Diminuendo la proprietà length, comunque cancella gli elementi.

fruits.length = 2;
console.log(Object.keys(fruits)); // ['0', '1']
console.log(fruits.length); // 2

La spiegazione è ampliata nella paginaArray.length.

Creare un array utilizzando il risultato di un match

Il risultato di una corrispondenza tra una espressione regolare e una stringa può creare un array JavaScript. Tale array ha proprietà ed elementi che provvedono informazioni riguardo il match. Questo tipo di array è restituito da RegExp.exec, String.match, e String.replace. Per aiutare a spiegare queste proprietà ed elementi, vedere l'esempio seguente e fare riferimento alla tavola sottostante:

// Match one d followed by one or more b's followed by one d
// Remember matched b's and the following d
// Ignore case

var myRe = /d(b+)(d)/i;
var myArray = myRe.exec('cdbBdbsbz');

Le proprietà ed elementi restituiti da questo match sono le seguenti:

Property/Element Description Example
input Una proprietà read-only che riflette la stinga originale verso la quale l'espressione irregolare era stata abbinata. cdbBdbsbz
index Una proprietà read-only su indice base-zeroindex dell'abbinamento nella stringa. 1
[0] Un elemento read-only che specifica gli ultimi caratteri abbinati. dbBd
[1], ...[n] Elementi read-only  che specificano gli abbinamenti di sottostringa in parentesi, se inclusi nella espressione regolare. Il numero di possibili sottostringhe in parentesi è illimitato. [1]: bB
[2]: d

Proprietà

Array.length
Il costruttore della proprietà lunghezza  Array il cui valore è 1.
get Array[@@species]
La funzione del costruttore che è usata per creare oggetti derivati.
Array.prototype
Permette l'addizione  di proprietà a tutti gli oggetti array.

Metodi

Array.from() This is an experimental API that should not be used in production code.
Crea una nuova istanza Array da un oggetto del tipo array o iterabile.
Array.isArray()
Restituisce true se una variabile è un array, altrimenti false.
Array.observe() This is an experimental API that should not be used in production code.
In modo asincrono osserva i cambiamenti agli Arrays, comeObject.observe() per gli oggetti. Provvede un flusso di cambiamenti in ordine di occorrenza.
Array.of() This is an experimental API that should not be used in production code.
Crea una nuova istanza Array con un variabile numero di argomenti, nonostante il numero o i tipi di argomenti.

Istanze di Array 

Tutte le istanze di Array ereditano da Array.prototype. L'oggetto prototype del costruttore Array può essere modificato per influenzare tutte le istanze di  Array.

Proprietà

{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}

Metodi

Metodi mutatori

{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}

Metodi per accedere

{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}

Metodi di iterazione

{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}} 

Metodi generici Array 

Array generics are non-standard, deprecated and will get removed near future. Note that you can not rely on them cross-browser. However, there is a shim available on GitHub.

A volte si vorrebbe applicare metodi di array alle stringhe o altri oggetti del tipo array (come arguments). Facendo ciò, si tratta una stringa come un array di caratteri(o altrimenti trattare un non array come array). Per esempio, per controllare che ogni carattere nella variabile str sia una lettera, si scriverebbe:

function isLetter(character) {
  return character >= 'a' && character <= 'z';
}

if (Array.prototype.every.call(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}

Tale notazione è dispersiva e JavaScript 1.6 ha introdotto un generico shorthand:

if (Array.every(str, isLetter)) {
  console.log("The string '" + str + "' contains only letters!");
}

Generics are also available on String.

Queste no fanno parte dello standard ECMAScript (anche se ES2015 Array.from() può essere utilizzato per raggingere tale scopo). Ciò che segue è un aiuto per permetterene l'utilizzo in tutti i browser:

// Assumes Array extras already present (one may use polyfills for these as well)
(function() {
  'use strict';

  var i,
    // We could also build the array of methods with the following, but the
    //   getOwnPropertyNames() method is non-shimable:
    // Object.getOwnPropertyNames(Array).filter(function(methodName) {
    //   return typeof Array[methodName] === 'function'
    // });
    methods = [
      'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
      'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
      'forEach', 'map', 'reduce', 'reduceRight', 'filter',
      'some', 'every', 'find', 'findIndex', 'entries', 'keys',
      'values', 'copyWithin', 'includes'
    ],
    methodCount = methods.length,
    assignArrayGeneric = function(methodName) {
      if (!Array[methodName]) {
        var method = Array.prototype[methodName];
        if (typeof method === 'function') {
          Array[methodName] = function() {
            return method.call.apply(method, arguments);
          };
        }
      }
    };

  for (i = 0; i < methodCount; i++) {
    assignArrayGeneric(methods[i]);
  }
}());

Esempi

Creare un array

Il seguente esempio crea un array, msgArray, con una lunghezza di 0, poi assegna valori a  msgArray[0] e msgArray[99], cambiando la lunghezza dell'array a 100.

var msgArray = [];
msgArray[0] = 'Hello';
msgArray[99] = 'world';

if (msgArray.length === 100) {
  console.log('The length is 100.');
}

Creare un array bidimensionale

Ciò che segue crea una scacchiera come un array bidiensionale di stringhe. La prima mossa è fatta copiando la 'p' in (6,4) in (4,4). La vecchia posizione (6,4) è resa bianca.

var board = [
  ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r'] ];

console.log(board.join('\n') + '\n\n');

// Move King's Pawn forward 2
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

Ecco l'output:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
 , , , , , , ,
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , ,
 , , , , , , ,
 , , , ,p, , ,
 , , , , , , ,
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

Specificazioni

Compatibilità Browser 

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Vedere anche: