diff options
Diffstat (limited to 'files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html')
-rw-r--r-- | files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html | 268 |
1 files changed, 268 insertions, 0 deletions
diff --git a/files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html b/files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html new file mode 100644 index 0000000000..d181f94a65 --- /dev/null +++ b/files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html @@ -0,0 +1,268 @@ +--- +title: Array.prototype.slice() +slug: Web/JavaScript/Referencia/Objectes_globals/Array/slice +translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice +--- +<div>{{JSRef}}</div> + +<p>El mètode <code><strong>slice()</strong></code> retorna una còpia feble d'una porció d'un array en forma d'un nou objecte array.</p> + +<h2 id="Sintaxi">Sintaxi</h2> + +<pre class="syntaxbox"><code><var>arr</var>.slice([<var>inici</var>[, <var>fi</var>]])</code></pre> + +<h2 id="Paràmetres">Paràmetres</h2> + +<dl> + <dt><code>inici</code></dt> + <dd>La posició (tenint en compte que zero correspon a la primera posició) a partir de la qual començarà l'extracció.</dd> + <dd>Si <code>inici</code> és negatiu, la posició correspondrà a la posicó final de la seqüència menys el valor proporcionat. <code>slice(-2)</code> extreu els últims dos elements de la seqüència.</dd> + <dd>Si <code>inici</code> és <code>undefined</code>, <code>slice</code> començarà a la posició <code>0</code>.</dd> + <dt><code>fi</code></dt> + <dd>La posició (contant des de zero) en la qual finalitzarà l'extracció. <code>slice</code> extraurà fins a aquesta posicó, sense incloure-la.</dd> + <dd><code>slice(1,4)</code> extrau des del segon element fins al quart element (és a dir, els elements pertanyents a les posicions 1, 2 i 3).</dd> + <dd>Si <code>fi</code> és negatiu, la posició correspondrà a la posicó final de la seqüència menys el valor proporcionat. <code>slice(2,-1)</code> extrau des del tercer element fins al penúltim element de la seqüència.</dd> + <dd>Si s'omet el paràmetre <code>fi</code>, <code>slice</code> extreurà fins al final de la seqüència (<code>arr.length</code>)<code>.</code></dd> +</dl> + +<h2 id="Descripció">Descripció</h2> + +<p><code>slice</code> no altera l'array original. Retorna una copia feble dels elements de l'array original. Els elements de l'array original són copiats a l'array resultat de la forma següent:</p> + +<ul> + <li>Per a referències a objectes (no l'objecte en si), <code>slice</code> copia la referència dins el nou array. Tant l'array original com el resultat referenciaran el mateix objecte. Si l'objecte referenciat canvia, aquests canvis seran visibles a ambdos arrays.</li> + <li>Per a strings i nombres (no els objectes {{jsxref("String")}} i {{jsxref("Number")}}), <code>slice</code> copia els strings i nombres a l'array resultant. Els canvis al string o nombre en un dels arrays no afectaran a l'altre array.</li> +</ul> + +<p>Si s'afegeix un nou element a un dels dos arrays, l'altre array no es veu afectat.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Retornar_una_part_d'un_array_existent">Retornar una part d'un array existent</h3> + +<pre class="brush: js">var fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']; +var citrus = fruits.slice(1, 3); + +// citrus conté ['Orange','Lemon'] +</pre> + +<h3 id="Utilitzar_slice">Utilitzar <code>slice</code></h3> + +<p>A l'exemple següent <code>slice</code> crea un ou array <code>newCar</code>, a partir de <code>myCar</code>. Ambdos inclouen una referència a l'objecte <code>myHonda</code>. Quan el color de <code>myHonda</code> canvia a lila, ambdos arrays reflecteixen aquest canvi.</p> + +<pre class="brush: js">// Ús de slice, creem newCar a partir de myCar. +var myHonda = { color: 'red', wheels: 4, engine: { cylinders: 4, size: 2.2 } }; +var myCar = [myHonda, 2, 'cherry condition', 'purchased 1997']; +var newCar = myCar.slice(0, 2); + +// Mostrem els valors de myCar, newCar, i el color de myHonda +// referenciat a ambdos arrays. +console.log('myCar = ' + myCar.toSource()); +console.log('newCar = ' + newCar.toSource()); +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); + +// Canviem el color de myHonda. +myHonda.color = 'purple'; +console.log('The new color of my Honda is ' + myHonda.color); + +// Mostrem el color de myHonda referenciat a ambdos arrays. +console.log('myCar[0].color = ' + myCar[0].color); +console.log('newCar[0].color = ' + newCar[0].color); +</pre> + +<p>Aquest script mostra:</p> + +<pre class="brush: js">myCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2, + 'cherry condition', 'purchased 1997'] +newCar = [{color:'red', wheels:4, engine:{cylinders:4, size:2.2}}, 2] +myCar[0].color = red +newCar[0].color = red +The new color of my Honda is purple +myCar[0].color = purple +newCar[0].color = purple +</pre> + +<h2 id="Objectes_compatibles_amb_arrays">Objectes compatibles amb arrays</h2> + +<p>El mètode <code>slice</code> també es pot utilitzar per a convertir objectes compatibles amb arrays / col·leccions a un nou Array. Simplement hem de vincular el mètode a l'objecte. L'objecte {{jsxref("Functions/arguments", "arguments")}} dins una funció és un exemple d'objecte 'compatible amb arrays'.</p> + +<pre class="brush: js">function list() { + return Array.prototype.slice.call(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<p>Podem vincular el mètode a l'objecte mitjançant la funció .<code>call</code> proporcionada per {{jsxref("Function.prototype")}}, també podem reduir-la a <code>[].slice.call(arguments)</code> en comptes de <code>Array.prototype.slice.call</code>. També podem simplificar-ho utilitzant la funció {{jsxref("Function.prototype.bind", "bind")}}.</p> + +<pre class="brush: js">var unboundSlice = Array.prototype.slice; +var slice = Function.prototype.call.bind(unboundSlice); + +function list() { + return slice(arguments); +} + +var list1 = list(1, 2, 3); // [1, 2, 3] +</pre> + +<h2 id="Oferint_un_comportament_similar_entre_navegadors">Oferint un comportament similar entre navegadors</h2> + +<p>Tot i que segons la especificació els objectes de l'hoste (com ara els objectes DOM) no requereixen seguir el comportament de Mozilla al ser convertits mitjançant <code>Array.prototype.slice</code> i, de fet les versions de Internet Explorer anteriors a la 9 no ho fan, les versions a partir de la 9 si que suporten l'ús d'aquesta funció de compatibilitat, permetent un comportament fiable entre navegadors. Mentre els altres navegadors moderns continuin oferint aquesta habilitat, tal i com ara fan IE, Mozilla, Chrome, Safari i Opera, els desenvolupadors que llegeixin codi sobre slice (suportat pel DOM) que es recolzi en aquesta funció de compatibilitat no tenen que patir per la semàntica; poden fiar-se de la semàntica descrita per a proporcionar el comportament que ara sembla standard <em>de facto</em> (La funció de compatibilitat també permet que el IE funcioni quan es passa com a segon argument de <code>slice()</code> un valor explícit de {{jsxref("null")}}/{{jsxref("undefined")}} ja que versions anteriors de IE no ho permetien però tots els nous navegadors, incloent IE >= 9, si que ho permeten.)</p> + +<pre class="brush: js">/** + * Shim for "fixing" IE's lack of support (IE < 9) for applying slice + * on host objects like NamedNodeMap, NodeList, and HTMLCollection + * (technically, since host objects have been implementation-dependent, + * at least before ES6, IE hasn't needed to work this way). + * Also works on strings, fixes IE < 9 to allow an explicit undefined + * for the 2nd argument (as in Firefox), and prevents errors when + * called on other DOM objects. + */ +(function () { + 'use strict'; + var _slice = Array.prototype.slice; + + try { + // Can't be used with DOM elements in IE < 9 + _slice.call(document.documentElement); + } catch (e) { // Fails in IE < 9 + // This will work for genuine arrays, array-like objects, + // NamedNodeMap (attributes, entities, notations), + // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes), + // and will not fail on other DOM objects (as do DOM elements in IE < 9) + Array.prototype.slice = function(begin, end) { + // IE < 9 gets unhappy with an undefined end argument + end = (typeof end !== 'undefined') ? end : this.length; + + // For native Array objects, we use the native slice function + if (Object.prototype.toString.call(this) === '[object Array]'){ + return _slice.call(this, begin, end); + } + + // For array like object we handle it ourselves. + var i, cloned = [], + size, len = this.length; + + // Handle negative value for "begin" + var start = begin || 0; + start = (start >= 0) ? start : Math.max(0, len + start); + + // Handle negative value for "end" + var upTo = (typeof end == 'number') ? Math.min(end, len) : len; + if (end < 0) { + upTo = len + end; + } + + // Actual expected size of the slice + size = upTo - start; + + if (size > 0) { + cloned = new Array(size); + if (this.charAt) { + for (i = 0; i < size; i++) { + cloned[i] = this.charAt(start + i); + } + } else { + for (i = 0; i < size; i++) { + cloned[i] = this[start + i]; + } + } + } + + return cloned; + }; + } +}()); +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Definició inicial. Implementat a JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.10', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </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>{{CompatChrome("1.0")}}</td> + <td>{{CompatGeckoDesktop("1.7")}}</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>Suport bàsic</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>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.bind()")}}</li> +</ul> |