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.

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, String.match, i String.replace. 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()
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()
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()
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

Array.prototype.constructor
Especifica la funció que ha creat el prototipus de l'objecte.
Array.prototype.length
Reflecteix el nombre d'elements d'un array.

Mètodes

Mètodes de mutació

Els mètodes següents modifiquen l'array:

Array.prototype.copyWithin()
Copia una seqüència d'elements de l'array dins l'array.
Array.prototype.fill()
Omple tots els elements d'un array d'una posició inicial a una posició final amb un valor estàtic.
Array.prototype.pop()
Elimina l'últim element d'un array i retorna aquest element.
Array.prototype.push()
Afegeix un o més elements al final de l'array i retorna el nou tamany de l'array.
Array.prototype.reverse()
Capgira l'ordre dels elements d'un array a l'array mateix (no crea cap array nou) — el primer element esdevé l'últim, l'últim esdevé el primer, etcètera.
Array.prototype.shift()
Elimina el primer element d'un array i retorna aquest element.
Array.prototype.sort()
Ordena els elements d'un array a l'array mateix i retorna l'array.
Array.prototype.splice()
Afegeix i/o elimina elements d'un array.
Array.prototype.unshift()
Afegeix un o més elements al pricipi d'un array i retorna el nou tamany de l'array.

Mètodes d'accés

Aquests mètodes no modifiquen l'array sino que retornen algun tipus de representació de l'array.

Array.prototype.concat()
Retorna un nou array format per la unió de l'array actual amb altres arrays o valors.
Array.prototype.includes()
Determina si un array inclou un element en concret, retornant true en cas afirmatiu i false en cas contrari.
Array.prototype.join()
Uneix tots els elements d'un array en un string.
Array.prototype.slice()
Extrau una secció d'un array i la retorna en forma de nou array.
Array.prototype.toSource()
Retorna un literal d'array que representa l'array especificat; es pot emprar aquest valor per a crear un nou array. Sobreescriu el mètode Object.prototype.toSource().
Array.prototype.toString()
Retorna un string que representa l'array i els seus elements. Sobreescriu el mètode Object.prototype.toString().
Array.prototype.toLocaleString()
Retorna un string localitzat que representa l'array i els seus elements. Sobreescriu el mètode Object.prototype.toLocaleString().
Array.prototype.indexOf()
Retorna la primera posició de l'array en la que es troba un element igual al valor especificat, o bé -1 si no es troba l'element dins l'array.
Array.prototype.lastIndexOf()
Retorna la última posició de l'array en la que es troba un element igual al valor especificat, o bé -1 si no es troba l'element dins l'array.

Mètodes d'iteració

Alguns mètodes accepten com a arguments funcions que es cridaran al processar l'array. Quan es criden aquests mètodes, s'emmagatzema el valor de length de l'array i qualsevol element afegit després a dins de la funció no serà visitat per la mateixa. Altres canvis a l'array (com ara canviar un valor o bé eliminar un element) poden afectar els resultats de l'operació si el mètode visita els elements que han canviat. Tot i que el comportament específic d'aquests mètodes en aquests casos està ben definit no es recomana recolzar-se en ell ja que pot confondre a altres programadors que llegeixin el vostre codi. En comptes de modificar l'array copieu-lo i modifiqueu la copia.

Array.prototype.forEach()
Crida una funció per a cada element de l'array.
Array.prototype.entries()
Retorna un nou objecte Array Iterator que conté parells clau-valor per a cada posició de l'array.
Array.prototype.every()
Retorna true si tots els elements de l'array satisfan la funció proporcionada.
Array.prototype.some()
Retorna true si al menys un dels elements de l'array satisfà la funció proporcionada.
Array.prototype.filter()
Crea un nou array que conté tots eles elements de l'array des d'on es crida que facin que la funció que actua de filtre retorni true.
Array.prototype.find()
Retorna el valor trobat a l'array, si un element de l'array satisfà la funció proporcionada. En cas contrari retorna undefined.
Array.prototype.findIndex()
Retorna la posició on es troba l'element de l'array que satifcaci la funció proporcionada. Retorna -1 si cap element la satisfà.
Array.prototype.keys()
Retorna un nou Array Iterator que conté les claus per a cada posició de l'array.
Array.prototype.map()
Crea un nou array a partir dels resultats de cridar a la funció proporcionada per a cada element de l'array.
Array.prototype.reduce()
Executa una funció sobre un acumulador i cada valor de l'array (aplicats d'esquerra a dreta) amb l'objectiu de redudir els valors a un sol valor.
Array.prototype.reduceRight()
Executa una funció sobre un acumulador i cada valor de l'array (aplicats de dreta a esquerra) amb l'objectiu de redudir els valors a un sol valor.
Array.prototype.values()
Retorna un nou objecte Array Iterator que conté els valors de cada posició de l'array.
Array.prototype[@@iterator]()
Retorna un nou objecte Array Iterator que conté els valors per a cada posició de l'array.

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() 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
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array' in that specification.		 Standard S'afegeixen més mètodes: Array.from, Array.of, find, findIndex, fill, copyWithin

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!
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é