path: root/files/ca/web/javascript/referencia/objectes_globals/array/slice/index.html

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