Array

Resum

L'objecte de JavaScript Array és un objecte global que s'utilitza per a construir arrays; que són objectes d'al nivell que representen llistes.

Crear un Array

var fruites = ["Poma", "Pera"];

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

Accedir (mitjançant la posició) a un element d'un Array

var primer = fruites[0];
// Poma

var ultim = fruites[fruites.length - 1];
// Pera

Recòrrer un Array

fruites.forEach(function (element, index, array) {
  console.log(element, index);
});
// Poma 0
// Pera 1

Afegir elements al final d'un Array

var nouTamany = fruites.push("Taronja");
// ["Poma", "Pera", "Taronja"]

Eliminar l'element del final d'un Array

var ultim = fruites.pop(); // Elimina Taronja (del final)
// ["Poma", "Pera"];

Eliminar l'element de l'inici d'un Array

var primer = fruites.shift(); // elimina Poma del principi del Array
// ["Pera"];

Afegir un element a l'inici d'un Array

var nouTamany = fruites.unshift("Maduixa") // Afegir al principi
// ["Maduixa", "Pera"];

Trobar la posició d'un element del Array

fruites.push("Mango");
// ["Maduixa", "Pera", "Mango"]

var pos = fruites.indexOf("Pera");
// 1

Eliminar un element segons la seva posició

var elementEliminat = fruites.splice(pos, 1); // així és com s'elimina un element
// ["Maduixa", "Mango"]

Copiar un Array

var shallowCopy = fruits.slice(); // així és com es copia
// ["Maduixa", "Mango"]

Sintaxi

[element0, element1, ..., elementN]
new Array(element0, element1[, ...[, elementN]])
new Array(longitudArray)
elementN
S'inicialitza un array de JavaScript amb els elements donats, excepte si només es proporciona un sol argument al constructor Array i aquest argument és un nombre. (Vegeu a sota). Cal destacar que aquest cas especial només s'aplica a arrays de JavaScript creats mitjançant el constructor Array i no a literals array creats a partir de ls sintaxi de claus.
longitudArray
Si només es passa un sol argument al constructor Array i aquest argument és un nombre entre 0 232-1 (inclòs), aquest retorna un nou array de JavaScript amb la longitud especificada pel nombre passat com a argument. Si l'argument és qualsevol altre nombre es llença l'excepció RangeError (en-US).

Descripció

Els arrays són objectes semblants a lliste el prototipus dels quals té mètodes que permeten realitzar operacions de travessa i mutació. Ni a longitud ni el tipus dels elements són fixos en els arrays de JavaScript. Com que el tamany d'un array pot canviar en qualsevol moment no es pot garantir la seva densitat. En general aquestes característiques són convenients; però si en algun cas aquestes característiques no fossin convenients es recomana considerar l'ús de arrays amb tipus.

Algunes persones creuen que no s'hauria de fer ús de arrays com amb finalitats associatives. En qualsevol cas sempre es pot utilitzar senzillament un objects per a tal fet instead, tot i que fer-ho també té els seus inconvenients. Vegeu el post Diccionaris de JavaScript lleugers amb claus arbitràries per a exemple.

Accedir als elements d'un array

Els arrays de JavaScript comencen el compte de posició (índex) amb el zero: és a dir, el primer element d'un array ocupa la posició 0 i l'últim element d'un array es troba a l'índex amb valor del  tamany de l'array menys 1.

var arr = ['aquest és el primer element', 'aquest és el segon element'];
console.log(arr[0]);              // mostra 'aquest és el primer element'
console.log(arr[1]);              // mostra 'aquest és el segon element'
console.log(arr[arr.length - 1]); // mostra 'aquest és el segon element'

Els elements d'un array són propietats de l'objecte de la mateixa que toString és una propietat, però intentar accedir un element d'un array de la manera que es mostra a continuació llença un error de sintaxi, ja que el nom de la propietat no és vàlid:

console.log(arr.0); // error de sintaxi

No hi ha res d'especial sobre els arrays de JavaScript i les propietats que causen aquest comportament. A JavaScript, les propietats que comencen amb un dígit no es poden referenciar amb la notació de punt; per a accedir-hi és necesari utilitzar la notació de claus. Per exemple, per a accedir a la propietat anomenada '3d' d'un objecte, l'única forma d'accedir-hi és mitjançant la notació de claus tal i com es mostra a continuació:

var anys = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
console.log(anys.0);   // error de sintaxi
console.log(anys[0]);  // funciona
renderer.3d.setTexture(model, 'character.png');     // error de sintaxi
renderer['3d'].setTexture(model, 'character.png');  // funciona

Fixeu-vos que a l'exemple de 3d, '3d' necessita cometes. És possible utilitzar cometes amb les posicions d'un array (per exemple, anys['2'] en comptes de anys[2]), tot i que no és necesari. El 2 a anys[2] és transformat en un string pel motor de JavaScript implícitament mitjançant el mètode toString. Per aquesta raó '2' i '02' es referirien a dues propietats diferents de l'objecte anys i l'exemple següent podría retornar true:

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

De la mateixa manera, les propietats d'objectes que utilitzin paraules clau com a nom(!) només es poden accedir mitjançant literals string en notació de claus (però poden accedir-se mitjançant notació de punt com a mínim al firefox 40.0a2):

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

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

Relació  entre length i propietats numèriques

La propietat length dels arrays de JavaScript està relacionada amb les propietats numèriques. Diversos mètodes pertanyent de forma nativa a l'objecte array (com ara join, slice, indexOf, etcètera.) tenen en compte el valor de la propietat length quan són cridats. Altres mètodes, com ara push o splice, també actualitzen el valor de la propietat length.

var fruites = [];
fruites.push('banana', 'poma', 'prèssec');

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

A l'hora d'assignar una propietat a un array de JavaScript, quan la propietat és una posició vàlida i aquesta posició cau fora dels límits que l'array té en aquell moment, el motor ha d'actualitzar la propietat length de l'array apropiadament:

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

Incrementant la longitud amb length.

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

Decrementar la propietat length, per contra, elimina elements.

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

Aquest comportament s'explica amb més detall a la pàgina de Array.length.

Crear un array utilitzant el resultat d'una expressió regular

El resultats obtinguts a l'aplicar una expressió regular sobre un string poden crear un array de JavaScript. Aquest array tindrà propietats i elements que ofereixen informació sobre les coincidències. Aquest tipus d'arrays és retornat pels mètodes RegExp.exec (en-US), String.match (en-US), i String.replace (en-US). Per a ajudar a entendre aquestes propietats i elements, vegeu l'exemple següent i la taula a continuació:

// Cerca una d seguida d'una o més b's seguides d'una d
// Desa les coincidències de b's amb una d a continuació
// No distingeix entre majúscules i minúscules

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

Les propietats i elements retornats d'aplicar aquesta expressió regular al string són les següents:

Propietat/Element Descripció Exemple
input Propietat només de lectura que representa el string original contra el que s'ha aplicat la expressió regular. cdbBdbsbz
index Propietat només de lectura que representa la posició on s'ha trobat coincidència (considerant zero la primera posició) 1
[0] element només de lectura que especifica els últims caràcters que han coincidit. dbBd
[1], ...[n] Elements només de lectura que especifiquen coincidències parcials en parèntesi, si aquests s'inclouen a l'expressió regular. El nombre de possibles coincidències parcials en parèntesi és il·limitat. [1]: bB
[2]: d

Propietats

Array.length
La propietat de longitud del constructor de Array. El seu valor és 1.
Array.prototype
Permet l'adició de propietats a tots els objectes array.

Mètodes

Array.from() (en-US) This is an experimental API that should not be used in production code.
Crea una nova instància de Array a partir d'un objecte iterable o un objecte similar a un array.
Array.isArray()
Retorna true si una variable és un array. En cas contrari retorna false.
Array.observe() This is an experimental API that should not be used in production code.
Observa de forma asíncrona canvis en Arrays, de manera similar al mètode Object.observe() per a objectes. Proporciona una sequència de canvis ordenats per ordre d'ocurrència.
Array.of() This is an experimental API that should not be used in production code.
Crea una nova instància de Array amb un nombre variable d'arguments, sense importar el nombre o tipus d'arguments.

Instàncies de Array

Totes les instàncies de Array hereten de Array.prototype. L'objecte prototipus del constructor de Array es pot modificar per a afectar a totes les instàncies de Array a l'hora.

Propietats

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

Mètodes

Mètodes de mutació

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

Mètodes d'accés

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

Mètodes d'iteració

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

Mètodes genèrics de Array

Els genèrics de Array no formen part de cap standard, estan en desús i poden ser esborrats en el futur. Noteu que no funcionen a tots els navegadors, tot i que hi ha una correcció de compatibilitat disponible a GitHub.

De vegades hom voldria aplicar mètodes de array a strings o altres objectes semblants a arrays (com ara la funció arguments). Per a aconseguir això, es tractaria un string com un array de caràcters (o en tot cas tractar un objecte que no sigui un array com a array). Per exemple, per a comprovar que tots els caràcters d'una variable str són lletres, es faria de la forma següent:

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

if (Array.prototype.every.call(str, isLetter)) {
  console.log("El string '" + str + "' només conté lletres!");
}

Aquesta notació és força molesta i JavaScript 1.6 va introduïr una abreviació genèrica:

if (Array.every(str, isLetter)) {
  console.log("El string '" + str + "' només conté lletres!");
}

Generics també estan disponibles a String.

Aquests no formen actualment part de cap standard ECMAScript (tot i que es pot utilitzar el mètode Array.from() (en-US) de l'ECMAScript 6 per a aconseguir el mateix resultat). A continuació es presenta una correcció de compatibilitat per a permetre el seu ús a qualsevol navegador:

// Asumeix que els extres de Array són presents (també es poden utilitzar funcions Polifyll per a suplir això)
(function() {
  'use strict';

  var i,
    // També es podria construïr l'array de mètodes de la forma següent, però
    //   el mètode getOwnPropertyNames() no té cap corrector de compatibilitat:
    // 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]);
  }
}());

Exemples

Crear un array

L'exemple següent crea un array, msgArray, amb un tamany de 0, després assigna valors a les posicions msgArray[0] i msgArray[99], canviant automàticament el tamany de l'array a 100.

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

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

Crear un array de dues dimensions (bidimensional)

L'exemple següent crea un tauler d'escacs com a array bidimensional de strings. El primer moviement es realitza tot copiant la 'p' de la posició (6,4) a (4,4). La posició anterior esdevé buïda.

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');

// Movem el peó del Rei endevant dues caselles
board[4][4] = board[6][4];
board[6][4] = ' ';
console.log(board.join('\n'));

Aquesta seria la sortida:

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

Especificacions

Especificació Estat Comentaris
ECMAScript 1st Edition (ECMA-262) Standard Definició inicial.
ECMAScript 5.1 (ECMA-262)
The definition of 'Array' in that specification.
Standard S'afegeixen més mètodes: Array.isArray, indexOf, lastIndexOf, every, some, forEach, map, filter, reduce, reduceRight (en-US)
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array' in that specification.
Standard S'afegeixen més mètodes: Array.from (en-US), Array.of, find, findIndex, fill, copyWithin (en-US)

Compatibilitat amb navegadors

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! (en-US)
Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic (Yes) (Yes) (Yes) (Yes) (Yes)
Característica Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic
(Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Vegeu també