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()
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()
In modo asincrono osserva i cambiamenti agli Arrays, comeObject.observe() per gli oggetti. Provvede un flusso di cambiamenti in ordine di occorrenza.
Array.of()
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à

Array.prototype.constructor
Specifies the function that creates an object's prototype.
Array.prototype.length
Reflects the number of elements in an array.
Array.prototype[@@unscopables]
A symbol containing property names to exclude from a with binding scope.

Metodi

Metodi mutatori

These methods modify the array:

Array.prototype.copyWithin()
Copies a sequence of array elements within the array.
Array.prototype.fill()
Fills all the elements of an array from a start index to an end index with a static value.
Array.prototype.pop()
Removes the last element from an array and returns that element.
Array.prototype.push()
Adds one or more elements to the end of an array and returns the new length of the array.
Array.prototype.reverse()
Reverses the order of the elements of an array in place ‚ÄĒ the first becomes the last, and the last becomes the first.
Array.prototype.shift()
Removes the first element from an array and returns that element.
Array.prototype.sort()
Sorts the elements of an array in place and returns the array.
Array.prototype.splice()
Adds and/or removes elements from an array.
Array.prototype.unshift()
Adds one or more elements to the front of an array and returns the new length of the array.

Metodi per accedere

These methods do not modify the array and return some representation of the array.

Array.prototype.concat()
Returns a new array that is this array joined with other array(s) and/or value(s).
Array.prototype.includes()
Determines whether an array contains a certain element, returning true or false as appropriate.
Array.prototype.indexOf()
Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
Array.prototype.join()
Joins all elements of an array into a string.
Array.prototype.lastIndexOf()
Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
Array.prototype.slice()
Extracts a section of an array and returns a new array.
Array.prototype.toSource()
Returns an array literal representing the specified array; you can use this value to create a new array. Overrides the Object.prototype.toSource() method.
Array.prototype.toString()
Returns a string representing the array and its elements. Overrides the Object.prototype.toString() method.
Array.prototype.toLocaleString()
Returns a localized string representing the array and its elements. Overrides the Object.prototype.toLocaleString() method.

Metodi di iterazione

Several methods take as arguments functions to be called back while processing the array. When these methods are called, the length of the array is sampled, and any element added beyond this length from within the callback is not visited. Other changes to the array (setting the value of or deleting an element) may affect the results of the operation if the method visits the changed element afterwards. While the specific behavior of these methods in such cases is well-defined, you should not rely upon it so as not to confuse others who might read your code. If you must mutate the array, copy into a new array instead.

Array.prototype.entries()
Returns a new Array Iterator object that contains the key/value pairs for each index in the array.
Array.prototype.every()
Returns true if every element in this array satisfies the provided testing function.
Array.prototype.filter()
Creates a new array with all of the elements of this array for which the provided filtering function returns true.
Array.prototype.find()
Returns the found value in the array, if an element in the array satisfies the provided testing function or undefined if not found.
Array.prototype.findIndex()
Returns the found index in the array, if an element in the array satisfies the provided testing function or -1 if not found.
Array.prototype.forEach()
Calls a function for each element in the array.
Array.prototype.keys()
Returns a new Array Iterator that contains the keys for each index in the array.
Array.prototype.map()
Creates a new array with the results of calling a provided function on every element in this array.
Array.prototype.reduce()
Apply a function against an accumulator and each value of the array (from left-to-right) as to reduce it to a single value.
Array.prototype.reduceRight()
Apply a function against an accumulator and each value of the array (from right-to-left) as to reduce it to a single value.
Array.prototype.some()
Returns true if at least one element in this array satisfies the provided testing function.
Array.prototype.values()
Returns a new Array Iterator object that contains the values for each index in the array.
Array.prototype[@@iterator]()
Returns a new Array Iterator object that contains the values for each index in the array.
 

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: