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 constructorArray
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 retornafalse
. 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 ifalse
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
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 | |
---|---|---|---|---|---|---|---|
|
(Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |