Array.prototype.slice()

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since julio de 2015.

Learn more
See full compatibility

El mtodo slice() devuelve una copia de una parte del array dentro de un nuevo array empezando por inicio hasta fin (fin no incluido). El array original no se modificar.

Sintaxis

arr.slice([inicio [, fin]])

Parmetros

inicio

ndice donde empieza la extraccin. El primer elemento corresponde con el ndice 0.

Si el ndice especificado es negativo, indica un desplazamiento desde el final del array.slice(-2) extrae los dos ltimos elementos del array

Si inicio es omitido el valor por defecto es 0.

Si inicio es mayor a la longitud del array, se devuelve un array vaco.

fin

ndice que marca el final de la extraccin. slice extrae hasta, pero sin incluir el final.

slice(1,4) extrae desde el segundo elemento hasta el cuarto (los elementos con ndices 1, 2, y 3).

Con un ndice negativo, fin indica un desplazamiento desde el final de la secuencia. slice(2,-1) extrae desde el tercer hasta el penltimo elemento en la secuencia.

Si fin es omitido, slice extrae hasta el final de la secuencia (arr.length).

Si fin es mayor a la longitud del array, slice extrae hasta el final de la secuencia (arr.length).

`Valor de retorno`

Un nuevo array con los valores extrados.

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

Para referencias de objeto ( no el objeto en s ), slice copia la referencia dentro del nuevo array. Ambos, el array original y el nuevo, referencian al mismo objeto. Si un objeto referenciado cambia, los cambios son visibles para ambos arrays.
Para strings, numbers y boolean (no objetos String y Number), slice 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.

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

Ejemplos

Ejemplo: Devolver una porcin de un array existente

var nombres = ["Rita", "Pedro", "Miguel", "Ana", "Vanesa"];
var masculinos = nombres.slice(1, 3);

// masculinos contiene ['Pedro','Miguel']

Ejemplo: Utilizando slice

Presta especial atencin a:

Valores de tipos bsicos, como string o number, son copiados al nuevo array. Cambiar estos valores en la copia no afecta al array original.
Las referencias tambin se copian. Mismas referencias acceden al mismo objeto destino. Cambios en el objeto destino son compartidos por todos sus accesos.

En el siguiente ejemplo, slice crea un nuevo array, nuevoCoche, de myCoche. Los dos incluyen una referncia al objecto miHonda se cambia a prpura, ambas matrices reflejan el cambio.

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

//  Muestra los valores de myCar, newCar y el color de myHonda.
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);

// 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.
console.log("miCoche[0].color = " + miCoche[0].color);

console.log("nuevoCoche[0].color = " + nuevoCoche[0].color);

Este script escribe:

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

Objetos array-like

Nota: Se dice que un objeto es array-like ( similar o que se asemeja a un array) cuando entre sus propiedades existen algunas cuyos nombres son nmeros y en particular tiene una propiedad llamada length. Este hecho hace suponer que el objeto es algn tipo de coleccin de elementos indexados por nmeros. Es conveniente, a veces, convertir estos objetos a arrays para otorgarles la funcionalidad que de serie se incorpora en todos los arrays a travs de su prototipo.

El mtodo slice puede ser usado para convertir objetos parecidos a arrays o colecciones a un nuevo Array. Simplemente debe enlazar el mtodo al objeto. El arguments dentro de una funcin es un ejemplo de un objeto parecido a arrays.

function list() {
  return Array.prototype.slice.call(arguments, 0);
}

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

El enlazado puede realizarse con la funcin .call de Function y puede ser abreviado tambin usando [].slice.call(arguments) en lugar de Array.prototype.slice.call. En cualquier caso, puede ser simplificado usando bind.

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]

Coordinacin del comportamiento entre navegadores

La especificacin permite a los objetos del host ( entre ellos los objetos del DOM ) ser dependientes de la implementacin. Esta NO obligatoriedad, origina diferencias en el comportamiento entre aquellos comprometidos con los estndares, como Mozilla, y los que no. En lo que concierne a Array.prototype.slice , por lo tanto, existen importantes incompatibilidades en IE < 9 . Versiones de IE a partir de la 9 permiten un comportamiento compatible ms fiable. Se puede recurrir al "shimming" para alcanzar la compatibilidad en otros casos. Mientras otros navegadores modernos continan mejorando para soportar esta habilidad, en la forma en que actualmente lo hacen Mozilla, Chrome, Safari, Opera e IE, los desarrolladores de cdigo preocupados por el soporte DOM que confen en este shim no deben dejarse engaar por la semntica, deben confiar de forma segura en ella para proporcionar el comportamiento estndar que aparentemente ahora es la norma.

El shim tambin soluciona que IE pueda tratar con el caso de que el segundo argumento de slice() pueda ser un valor null/undefined explcito. Esto era un problema en versiones anteriores de IE, pero todos los navegadores modernos, includo IE >= 9, lo hacen actualmente.

/**
 * Shim para "solucionar" la falta de soporte de IE (IE < 9) para aplicar slice
 * sobre objetos del host, tal como NamedNodeMap, NodeList, y HTMLCollection
 * (tcnicamente, al ser los objetos del host dependientes de la implementacin,
 * al menos anteriormente a ES2015, IE no tena la necesidad de trabajar de este modo).
 * Tambin funciona sobre strings, solucionando que IE < 9 admita un undefined explcito
 * 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 < 9
    _slice.call(document.documentElement);
  } catch (e) {
    // Fails in IE < 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 < 9)
    Array.prototype.slice = function (begin, end) {
      // A IE < 9 no le gustan los undefined como argumento end.
      end = typeof end !== "undefined" ? end : this.length;

      // Con objetos Array nativos, podemos usar la funcin 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 >= 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 < 0) {
        upTo = len + end;
      }

      // Tamao esperado para el 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;
    };
  }
})();