diff options
Diffstat (limited to 'files/ca/web/javascript/referencia/objectes_globals/array/index.html')
| -rw-r--r-- | files/ca/web/javascript/referencia/objectes_globals/array/index.html | 482 |
1 files changed, 482 insertions, 0 deletions
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/index.html new file mode 100644 index 0000000000..da7c400799 --- /dev/null +++ b/files/ca/web/javascript/referencia/objectes_globals/array/index.html @@ -0,0 +1,482 @@ +--- +title: Array +slug: Web/JavaScript/Referencia/Objectes_globals/Array +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<h2 id="Summary" name="Summary">Resum</h2> + +<p>L'objecte de JavaScript <strong><code>Array</code></strong> és un objecte global que s'utilitza per a construir arrays; que són objectes d'al nivell que representen llistes.</p> + +<p><strong>Crear un Array</strong></p> + +<pre class="brush: js">var fruites = ["Poma", "Pera"]; + +console.log(fruites.length); +// 2 +</pre> + +<p><strong>Accedir (mitjançant la posició) a un element d'un Array</strong></p> + +<pre class="brush: js">var primer = fruites[0]; +// Poma + +var ultim = fruites[fruites.length - 1]; +// Pera +</pre> + +<p><strong>Recòrrer un Array</strong></p> + +<pre class="brush: js">fruites.forEach(function (element, index, array) { + console.log(element, index); +}); +// Poma 0 +// Pera 1 +</pre> + +<p><strong>Afegir elements al final d'un Array</strong></p> + +<pre class="brush: js">var nouTamany = fruites.push("Taronja"); +// ["Poma", "Pera", "Taronja"] +</pre> + +<p><strong>Eliminar l'element del final d'un Array</strong></p> + +<pre class="brush: js">var ultim = fruites.pop(); // Elimina Taronja (del final) +// ["Poma", "Pera"]; +</pre> + +<p><strong>Eliminar l'element de l'inici d'un Array</strong></p> + +<pre class="brush: js">var primer = fruites.shift(); // elimina Poma del principi del Array +// ["Pera"]; +</pre> + +<p><strong>Afegir un element a l'inici d'un Array</strong></p> + +<pre class="brush: js">var nouTamany = fruites.unshift("Maduixa") // Afegir al principi +// ["Maduixa", "Pera"]; +</pre> + +<p><strong>Trobar la posició d'un element del Array</strong></p> + +<pre class="brush: js">fruites.push("Mango"); +// ["Maduixa", "Pera", "Mango"] + +var pos = fruites.indexOf("Pera"); +// 1 +</pre> + +<p><strong>Eliminar un element segons la seva posició</strong></p> + +<pre class="brush: js">var elementEliminat = fruites.splice(pos, 1); // així és com s'elimina un element +// ["Maduixa", "Mango"] +</pre> + +<p><strong>Copiar un Array</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // així és com es copia +// ["Maduixa", "Mango"] +</pre> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox"><code>[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(longitudArray)</code></pre> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>S'inicialitza un array de JavaScript amb els elements donats, excepte si només es proporciona un sol argument al constructor <code>Array</code> 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 <code>Array</code> i no a literals array creats a partir de ls sintaxi de claus.</dd> + <dt><code>longitudArray</code></dt> + <dd>Si només es passa un sol argument al constructor <code>Array</code> i aquest argument és un nombre entre 0 2<sup>32</sup>-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ó {{jsxref("Global_Objects/RangeError", "RangeError")}}.</dd> +</dl> + +<h2 id="Descripció">Descripció</h2> + +<p>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.</p> + +<p>Algunes persones creuen que <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">no s'hauria de fer ús de arrays com amb finalitats associatives</a>. En qualsevol cas sempre es pot utilitzar senzillament un {{jsxref("Global_Objects/Object", "objects")}} per a tal fet instead, tot i que fer-ho també té els seus inconvenients. Vegeu el post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Diccionaris de JavaScript lleugers amb claus arbitràries</a> per a exemple.</p> + +<h3 id="Accedir_als_elements_d'un_array">Accedir als elements d'un array</h3> + +<p>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ó <code>0</code> i l'últim element d'un array es troba a l'índex amb valor del {{jsxref("Array.length", "tamany")}} de l'array menys 1.</p> + +<pre class="brush: js">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' +</pre> + +<p>Els elements d'un array són propietats de l'objecte de la mateixa que <code>toString</code> é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:</p> + +<pre class="brush: js">console.log(arr.0); // error de sintaxi +</pre> + +<p>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 <code>'3d'</code> d'un objecte, l'única forma d'accedir-hi és mitjançant la notació de claus tal i com es mostra a continuació:</p> + +<pre class="brush: js">var anys = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(anys.0); // error de sintaxi +console.log(anys[0]); // funciona +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // error de sintaxi +renderer['3d'].setTexture(model, 'character.png'); // funciona +</pre> + +<p>Fixeu-vos que a l'exemple de <code>3d</code>, <code>'3d'</code> necessita cometes. És possible utilitzar cometes amb les posicions d'un array (per exemple, <code>anys['2']</code> en comptes de <code>anys[2]</code>), tot i que no és necesari. El 2 a <code>anys[2]</code> és transformat en un string pel motor de JavaScript implícitament mitjançant el mètode <code>toString</code>. Per aquesta raó <code>'2'</code> i <code>'02'</code> es referirien a dues propietats diferents de l'objecte <code>anys</code> i l'exemple següent podría retornar <code>true</code>:</p> + +<pre class="brush: js">console.log(anys['2'] != anys['02']); +</pre> + +<p>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):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</pre> + +<h3 id="Relació_entre_length_i_propietats_numèriques">Relació entre <code>length</code> i propietats numèriques</h3> + +<p>La propietat {{jsxref("Array.length", "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 {{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}}, etcètera.) tenen en compte el valor de la propietat {{jsxref("Array.length", "length")}} quan són cridats. Altres mètodes, com ara {{jsxref("Array.push", "push")}} o {{jsxref("Array.splice", "splice")}}, també actualitzen el valor de la propietat {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">var fruites = []; +fruites.push('banana', 'poma', 'prèssec'); + +console.log(fruites.length); // 3 +</pre> + +<p>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 {{jsxref("Array.length", "length")}} de l'array apropiadament:</p> + +<pre class="brush: js">fruites[5] = 'mango'; +console.log(fruites[5]); // 'mango' +console.log(Object.keys(fruites)); // ['0', '1', '2', '5'] +console.log(fruites.length); // 6 +</pre> + +<p>Incrementant la longitud amb {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruites.length = 10; +console.log(Object.keys(fruites)); // ['0', '1', '2', '5'] +console.log(fruites.length); // 10 +</pre> + +<p>Decrementar la propietat {{jsxref("Array.length", "length")}}, per contra, elimina elements.</p> + +<pre class="brush: js">fruites.length = 2; +console.log(Object.keys(fruites)); // ['0', '1'] +console.log(fruites.length); // 2 +</pre> + +<p>Aquest comportament s'explica amb més detall a la pàgina de {{jsxref("Array.length")}}.</p> + +<h3 id="Crear_un_array_utilitzant_el_resultat_d'una_expressió_regular">Crear un array utilitzant el resultat d'una expressió regular</h3> + +<p>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 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, i {{jsxref("String.replace")}}. Per a ajudar a entendre aquestes propietats i elements, vegeu l'exemple següent i la taula a continuació:</p> + +<pre class="brush: js">// 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'); +</pre> + +<p>Les propietats i elements retornats d'aplicar aquesta expressió regular al string són les següents:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Propietat/Element</td> + <td class="header">Descripció</td> + <td class="header">Exemple</td> + </tr> + <tr> + <td><code>input</code></td> + <td>Propietat només de lectura que representa el string original contra el que s'ha aplicat la expressió regular.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>Propietat només de lectura que representa la posició on s'ha trobat coincidència (considerant zero la primera posició)</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>element només de lectura que especifica els últims caràcters que han coincidit.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>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.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Propietats">Propietats</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>La propietat de longitud del constructor de <code>Array</code>. El seu valor és 1.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Permet l'adició de propietats a tots els objectes array.</dd> +</dl> + +<h2 id="Mètodes">Mètodes</h2> + +<dl> + <dt>{{jsxref("Array.from()")}} {{experimental_inline}}</dt> + <dd>Crea una nova instància de <code>Array</code> a partir d'un objecte iterable o un objecte similar a un array.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Retorna <code>true</code> si una variable és un array. En cas contrari retorna <code>false</code>.</dd> + <dt>{{jsxref("Array.observe()")}} {{experimental_inline}}</dt> + <dd>Observa de forma asíncrona canvis en Arrays, de manera similar al mètode {{jsxref("Object.observe()")}} per a objectes. Proporciona una sequència de canvis ordenats per ordre d'ocurrència.</dd> + <dt>{{jsxref("Array.of()")}} {{experimental_inline}}</dt> + <dd>Crea una nova instància de <code>Array</code> amb un nombre variable d'arguments, sense importar el nombre o tipus d'arguments.</dd> +</dl> + +<h2 id="Instàncies_de_Array">Instàncies de <code>Array</code></h2> + +<p>Totes les instàncies de <code>Array</code> hereten de {{jsxref("Array.prototype")}}. L'objecte prototipus del constructor de <code>Array</code> es pot modificar per a afectar a totes les instàncies de <code>Array</code> a l'hora.</p> + +<h3 id="Propietats_2">Propietats</h3> + +<div>{{page('/ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Mètodes_2">Mètodes</h3> + +<h4 id="Mètodes_de_mutació">Mètodes de mutació</h4> + +<div>{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Mètodes_d'accés">Mètodes d'accés</h4> + +<div>{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Mètodes_d'iteració">Mètodes d'iteració</h4> + +<div>{{page('ca/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Mètodes_genèrics_de_Array">Mètodes genèrics de <code>Array</code></h2> + +<div class="note"> +<p><strong>Els genèrics de Array no formen part de cap standard, estan en desús i poden ser esborrats en el futur</strong>. Noteu que no funcionen a tots els navegadors, tot i que hi ha una <a href="https://github.com/plusdude/array-generics">correcció de compatibilitat disponible a GitHub</a>.</p> +</div> + +<p>De vegades hom voldria aplicar mètodes de array a strings o altres objectes semblants a arrays (com ara la funció {{jsxref("Functions/arguments", "arguments", "", 1)}}). 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 <em>str</em> són lletres, es faria de la forma següent:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("El string '" + str + "' només conté lletres!"); +} +</pre> + +<p>Aquesta notació és força molesta i JavaScript 1.6 va introduïr una abreviació genèrica:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("El string '" + str + "' només conté lletres!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} també estan disponibles a {{jsxref("Global_Objects/String", "String")}}.</p> + +<p>Aquests no formen actualment part de cap standard ECMAScript (tot i que es pot utilitzar el mètode {{jsxref("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:</p> + +<pre class="brush: js">// 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]); + } +}()); +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Crear_un_array">Crear un array</h3> + +<p>L'exemple següent crea un array, <code>msgArray</code>, amb un tamany de 0, després assigna valors a les posicions <code>msgArray[0]</code> i <code>msgArray[99]</code>, canviant automàticament el tamany de l'array a 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Crear_un_array_de_dues_dimensions_(bidimensional)">Crear un array de dues dimensions (bidimensional)</h3> + +<p>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.</p> + +<pre class="brush: js">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')); +</pre> + +<p>Aquesta seria la sortida:</p> + +<pre class="eval">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 +</pre> + +<h2 id="Especificacions">Especificacions</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Especificació</th> + <th scope="col">Estat</th> + <th scope="col">Comentaris</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Definició inicial.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>S'afegeixen més mètodes: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>S'afegeixen més mètodes: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilitat_amb_navegadors">Compatibilitat amb navegadors</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Suport bàsic</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Característica</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td> + <table class="compat-table"> + <tbody> + <tr> + <td>Suport bàsic</td> + </tr> + </tbody> + </table> + </td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Vegeu_també">Vegeu també</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">Guia de JavaScript: “Indexar propietats d'objectes”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">Guia de JavaScript: “Objectes bàsics predefinits: L'objecte <code>Array</code>”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill per a Genèrics d'Array a JavaScript 1.8.5 i Array Extras a l'ECMAScript 5 </a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Arrays amb tipus</a></li> +</ul> |