aboutsummaryrefslogtreecommitdiff
path: root/files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html
diff options
context:
space:
mode:
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.html268
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 &gt;= 9, si que ho permeten.)</p>
+
+<pre class="brush: js">/**
+ * Shim for "fixing" IE's lack of support (IE &lt; 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 &lt; 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 &lt; 9
+ _slice.call(document.documentElement);
+ } catch (e) { // Fails in IE &lt; 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 &lt; 9)
+ Array.prototype.slice = function(begin, end) {
+ // IE &lt; 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 &gt;= 0) ? start : Math.max(0, len + start);
+
+ // Handle negative value for "end"
+ var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
+ if (end &lt; 0) {
+ upTo = len + end;
+ }
+
+ // Actual expected size of the slice
+ size = upTo - start;
+
+ if (size &gt; 0) {
+ cloned = new Array(size);
+ if (this.charAt) {
+ for (i = 0; i &lt; size; i++) {
+ cloned[i] = this.charAt(start + i);
+ }
+ } else {
+ for (i = 0; i &lt; 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>