path: root/files/es/web/javascript/referencia/objetos_globales/array/slice/index.html

---
title: Array.prototype.slice()
slug: Web/JavaScript/Referencia/Objetos_globales/Array/slice
tags:
  - Arreglo
translation_of: Web/JavaScript/Reference/Global_Objects/Array/slice
---
<div>{{JSRef}}</div>

<p><code><font face="Open Sans, Arial, sans-serif">El método </font><strong>slice()</strong></code> devuelve una copia de una parte del array dentro de un nuevo array empezando por <em>inicio </em>hasta <em>fin</em> (<em>fin </em>no incluido). El array original no se modificará.</p>

<p>El código fuente de esta demostración interactiva está alojado en un repositorio Github. Si desea contribuir con ella, por favor clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y envíenos un <em>"pull request"</em>.</p>

<h2 id="Sintaxis">Sintaxis </h2>

<pre class="syntaxbox"><code><var>arr</var>.slice([<var>inicio </var>[, <var>fin</var>]])</code></pre>

<h2 id="Parámetros">Parámetros</h2>

<dl>
 <dt><code>inicio</code></dt>
 <dd>Índice donde empieza la extracción. El primer elemento corresponde con el índice  0.</dd>
 <dd>Si el índice especificado es negativo, indica un desplazamiento desde el final del array.<code> slice(-2)</code>extrae los dos últimos elementos del array</dd>
 <dd>Si <code>inicio</code> es omitido el valor por defecto es <code>0</code>.</dd>
 <dd>Si <code>inicio</code> es mayor a la longitud del array, se devuelve un array vacío.</dd>
 <dt><code>fin</code></dt>
 <dd>Índice  que marca el final de la extracción. <code>slice</code> extrae hasta, pero sin incluir el final.</dd>
 <dd><code>slice(1,4)</code> extrae desde el segundo elemento hasta el cuarto  (los elementos con índices 1, 2,  y 3).</dd>
 <dd>Con un índice negativo, <code>fin</code> indica un desplazamiento desde el final de la secuencia. <code>slice(2,-1)</code> extrae desde el tercer hasta el penúltimo elemento en la secuencia.</dd>
 <dd>Si <code>fin</code> es omitido, slice extrae hasta el final de la secuencia (<code>arr.length</code>)<code>.</code></dd>
 <dd>Si <code>fin</code> es mayor a la longitud del array, <code>slice</code> extrae hasta el final de la secuencia (<code>arr.length</code>)<code>.</code></dd>
</dl>

<h3 id="Valor_de_retorno"><code>Valor de retorno</code></h3>

<p>Un nuevo array con los valores extraídos.</p>

<h2 id="Descripción">Descripción</h2>

<p><code>slice</code> <strong>no modifica</strong> el array original. Devuelve una copia plana (<em>shallow copy</em>) de los elementos especificados del array original. Los elementos del array original son copiados en el array devuelto de la siguiente manera:</p>

<ul>
 <li>Para referencias de objeto ( <strong>no</strong> el objeto en sí ), <code>slice copia la referencia dentro del nuevo array</code>. Ambos, el array original y el nuevo, referencian al mismo objeto. Si un objeto referenciado cambia, los cambios son visibles para ambos arrays.</li>
 <li>Para strings, numbers y boolean (<strong>no</strong> objetos {{jsxref("Global_Objects/String", "String")}} y {{jsxref("Global_Objects/Number", "Number")}}), <code>slice</code> copia los valores en el nuevo array. Los cambios a los string, numbers y boolean en un array no afectan a los del otro array.</li>
</ul>

<p>Si un nuevo elemento es agregado a cualquiera de los arrays, el otro array no es afectado.</p>

<h2 id="Ejemplos">Ejemplos</h2>

<h3 id="Ejemplo_Devolver_una_porción_de_un_array_existente">Ejemplo: Devolver una porción de un array existente</h3>

<pre class="brush: js">var nombres = ['Rita', 'Pedro', 'Miguel', 'Ana', 'Vanesa'];
var masculinos = nombres.slice(1, 3);

// masculinos contiene ['Pedro','Miguel']
</pre>

<h3 id="Ejemplo_Utilizando_slice">Ejemplo: Utilizando slice</h3>

<p><span style="font-size: 14px; line-height: 1.5;">Presta especial atención a:</span></p>

<ul>
 <li>Valores de tipos básicos, como string o number, son copiados al nuevo array. Cambiar estos valores en la copia no afecta al array original.</li>
 <li>Las referencias también se copian. Mismas referencias acceden al mismo objeto destino. Cambios en el objeto destino son compartidos por todos sus accesos.</li>
</ul>

<p>En el siguiente ejemplo, <code>slice</code> crea un nuevo array, <code>nuevoCoche</code>, de <code>myCoche</code>. Los dos incluyen una referncia al objecto <code>miHonda</code> se cambia a púrpura, ambas matrices reflejan el cambio.</p>

<pre class="brush: js"><code>var miHonda = { color: 'red', ruedas: 4, motor: { cilindros: 4, cantidad: 2.2 } };
var miCoche = [miHonda, 2, 'Buen estado', 'comprado 1997'];
var nuevoCoche = miCoche.slice(0, 2);</code>

//  Muestra los valores de myCar, newCar y el color de myHonda.<code>
console.log('miCoche = ' + JSON.stringify(miCoche));
console.log('nuevoCoche = ' + JSON.stringify(nuevoCoche));
console.log('miCoche[0].color = ' + miCoche[0].color);
console.log('nuevoCoche[0].color = ' + nuevoCoche[0].color);</code>

// Cambia el color de miHonda.
miHonda.color = 'azul';
console.log('El nuevo color de mi Honda es ' + miHonda.color);

// Muestra el color de myHonda referenciado desde ambos arrays. <code>
console.log('miCoche[0].color = ' + miCoche[0].color);</code>

console.log('nuevoCoche[0].color = ' + nuevoCoche[0].color);</pre>

<p>Este script escribe:</p>

<pre class="brush: js"><code>miCoche = [{color: 'rojo', ruedas: 4, motor: {cilindros: 4, cantidad: 2.2}}, 2,
         'buen estado', 'comprado 1997']
nuevoCoche = [{color: 'rojo', ruedas: 4, motor: {cilindros: 4, cantidad: 2.2}}, 2]
miCoche[0].color = rojo
nuevoCoche[0].color = rojo
El nuevo color de miHonda es azul
miCoche[0].color = azul
nuevoCoche[0].color = azul</code></pre>

<h2 id="Objetos_array-like">Objetos array-like</h2>

<div class="note">
<p>Se dice que un objeto es <strong>array-like</strong> ( similar o que se asemeja a un array) cuando entre sus propiedades existen algunas cuyos nombres son <strong>números</strong> y en particular tiene una propiedad llamada <strong>length</strong>. Este hecho  hace  suponer que el objeto es algún tipo de colección de elementos indexados por números. Es conveniente, a veces, convertir estos objetos a arrays para otorgarles la funcionalidad que de serie se incorpora en todos los arrays a través de su prototipo. </p>
</div>

<p>El método <code>slice</code> puede ser usado para convertir objetos parecidos a arrays o colecciones a un nuevo Array. Simplemente debe enlazar el método al objeto. El  {{jsxref("Functions_and_function_scope/arguments", "arguments")}} dentro de una función es un ejemplo de un objeto parecido a arrays.</p>

<pre class="brush: js">function list() {
  return Array.prototype.slice.call(arguments, 0);
}

var list1 = list(1, 2, 3); // [1, 2, 3]
</pre>

<p>El enlazado puede realizarse con la función <code>.call</code> de  {{jsxref("Function.prototype")}} y puede ser abreviado también usando  <code>[].slice.call(arguments)</code> en lugar de <code>Array.prototype.slice.call</code>. En cualquier caso, puede ser simplificado usando {{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, 0);
}

var list1 = list(1, 2, 3); // [1, 2, 3]
</pre>

<h2 id="Coordinación_del_comportamiento_entre_navegadores">Coordinación del comportamiento entre navegadores</h2>

<p> </p>

<p>La especificación permite a los objetos del host  ( entre ellos los objetos del DOM )  ser dependientes de la implementación.  Esta <strong>NO</strong> obligatoriedad, origina diferencias en el comportamiento entre aquellos comprometidos con los estándares, como Mozilla, y los que no. En lo que concierne a  <code>Array.prototype.slice</code> , por lo tanto, existen importantes incompatibilidades en IE &lt; 9 . Versiones de IE a partir de la 9 permiten un comportamiento compatible más fiable.  Se puede recurrir al  “<em>shimming</em>”  para alcanzar la compatibilidad en otros casos.  Mientras otros navegadores modernos continúan mejorando para soportar esta habilidad, en la forma en que actualmente lo hacen Mozilla, Chrome, Safari, Opera  e IE, los desarrolladores de código preocupados por el soporte DOM que confíen en este <em>shim</em> no deben dejarse engañar por la semántica, deben confiar de forma segura en ella para proporcionar el comportamiento estándar que aparentemente ahora es la norma.</p>

<p>El <em>shim</em> también soluciona que IE pueda tratar con el caso de que el segundo argumento de <code>slice()</code> pueda ser un valor {{jsxref("Global_Objects/null", "null")}}/{{jsxref("Global_Objects/undefined", "undefined")}} explícito. Esto era un problema en versiones anteriores de IE, pero todos los navegadores modernos, incluído IE &gt;= 9, lo hacen actualmente.</p>

<pre class="brush: js">/**
 * <em>Shim</em> para "solucionar" la falta de soporte de IE (IE &lt; 9) para aplicar slice
 * sobre objetos del host, tal como NamedNodeMap, NodeList, y HTMLCollection
 * (técnicamente, al ser los objetos del host dependientes de la implementación,
 * al menos anteriormente a ES2015, IE no tenía la necesidad de trabajar de este modo).
 * También funciona sobre strings, solucionando que IE &lt; 9 admita un undefined explícito
 * como segundo argumento (igual que en Firefox), y previniendo errores cuando se llama
 * sobre otros objetos del DOM.
 */
(function () {
  'use strict';
  var _slice = Array.prototype.slice;

  try {
    // Fallará al usarse con elementos DOM en IE &lt; 9
    _slice.call(document.documentElement);
  } catch (e) { // Fails in IE &lt; 9
    // Funcionará con arrays genuinos, objetos array-like,
    // 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) {
      // A IE &lt; 9 no le gustan los undefined como argumento end.
      end = (typeof end !== 'undefined') ? end : this.length;

      // Con objetos Array nativos, podemos usar la función slice
      if (Object.prototype.toString.call(this) === '[object Array]'){
        return _slice.call(this, begin, end);
      }

      // Con objetos array-like debemos manejarlo por nuestra cuenta.
      var i, cloned = [],
        size, len = this.length;

      // Maneja valores negativos para el argumento "inicio"
      var start = begin || 0;
      start = (start &gt;= 0) ? start : Math.max(0, len + start);

      // Maneja valores negativos para el argumento "fin"
      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
      if (end &lt; 0) {
        upTo = len + end;
      }

      // Tamaño esperado para el 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="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificación</th>
   <th scope="col">Estado</th>
   <th scope="col">Observaciones</th>
  </tr>
  <tr>
   <td>ECMAScript 3ª edición</td>
   <td>Estandar</td>
   <td>Definición inicial Implementado en 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('ES2015', '#sec-array.prototype.slice', 'Array.prototype.slice')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_con_navegadores">Compatibilidad con navegadores</h2>

<p>La tabla de compatibilidad en esta página esta generada desde datos estructurados. Si desea contribuir con los datos, por favor <em>"checkout" </em><a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data </a> y envíenos un <em>"pull request"</em>.</p>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Soporte básico</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>Feature</th>
   <th>Android</th>
   <th>Chrome para Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Soporte básico</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="Ver_también">Ver también </h2>

<ul>
 <li>{{jsxref("Function.prototype.call()")}}</li>
 <li>{{jsxref("Function.prototype.bind()")}}</li>
</ul>