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 julho de 2015.

Learn more
See full compatibility

O mtodo slice() retorna uma cpia de parte de um array a partir de um subarray criado entre as posies incio e fim (fim no includo) de um array original. O Array original no modificado.

Experimente

const animals = ["ant", "bison", "camel", "duck", "elephant"];

console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]

console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]

Syntaxe

arr.slice([incio[,fim]])

Parmetros

incio Optional

ndice baseado em zero no qual se inicia a extrao.

Como um ndice negativo, incio indica um deslocamento em relao ao fim da sequncia. slice(-2) extrai os dois ltimos elementos do array.

Se incio for omitido, slice inicia a partir do ndice 0.

Se incio for maior que o comprimento do array, retornado um array vazio.

fim Optional

ndice baseado em zero o qual o final da extrao. slice extrai at, no incluindo, fim.

slice(1,4) extrai do segundo at o quarto elemento (elementos de ndice 1, 2 e 3).

Como ndice negativo, fim indica um deslocamento em relao ao fim do array. slice(2,-1) extrai o terceiro elemento atravs do segundo-para-o-ltimo elemento no array.

Se fim for omitido ou for maior que o tamanho do array, slice considerar o ltimo elemento do array como sendo o fim (arr.length).

Valor de retorno

Um novo array contendo os elementos extrados.

Descrio

slice no altera o array original. Retorna uma cpia de elementos do array original. Elementos do array original so copiados para o array retornado da seguinte maneira:

Para referncias de objeto (e no o objeto real), slice copia referencias de objeto em um novo array. Ambos, o original e o novo array referem-se ao mesmo objeto. Se um objeto referenciado alterado, as alteraes so visiveis em ambos, no novo array e no array original.
Para strings e nmeros (no objetos String e Number), slice copia strings e nmeros em um novo array. Alteraes na string ou nmero em um array no afetam o outro array.

Se um novo elemento adicionado a qualquer array, o outro no afetado.

Exemplos

Retorna uma parte de um array existente

// Exemplo para extrair 'Laranja' e 'Limao' do array frutas
var frutas = ["Banana", "Laranja", "Limao", "Ma", "Manga"];
var citricos = frutas.slice(1, 3);

// citricos contem ['Laranja','Limao']

No exemplo seguinte, slice cria um novo array, novoCarro, do original meuCarro. Ambos incluem uma referncia ao objeto, meuHonda. Quando a cor de meuHonda alterada para roxo, ambos os arrays sofrem alterao.

// Usando slice para criar novoCarro a partir de meuCarro.
var meuHonda = {
  cor: "vermelho",
  rodas: 4,
  motor: { cilindros: 4, tamanho: 2.2 },
};
var meuCarro = [meuHonda, 2, "perfeitas condies", "comprado em 1997"];
var novoCarro = meuCarro.slice(0, 2);

// Exibe os valores de meuCarro, novoCarro, e a cor de meuHonda
//  referenciado de ambos arrays.
console.log("meuCarro = " + meuCarro.toSource());
console.log("novoCarro = " + novoCarro.toSource());
console.log("meuCarro[0].cor = " + meuCarro[0].cor);
console.log("novoCarro[0].cor = " + novoCarro[0].cor);

// Altera a cor de meuHonda.
meuHonda.cor = "roxo";
console.log("A nova cor do meu Honda  " + meuHonda.cor);

// Exibe a cor de meuHonda referenciado de ambos arrays.
console.log("meuCarro[0].cor = " + meuCarro[0].cor);
console.log("novoCarro[0].cor = " + novoCarro[0].cor);

Esse script escreve:

meuCarro = [{cor:'vermelho', rodas:4, motor:{cilindros:4, tamanho:2.2}}, 2,'perfeitas condies', 'comprado em 1997']
novoCarro = [{cor:'vermelho', rodas:4, motor:{cilindros:4, tamanho:2.2}},2]
meuCarro[0].cor = vermelho
novoCarro[0].cor = vermelho
A nova cor do meu Honda  roxo
meuCarro[0].cor = roxo
novoCarro[0].cor = roxo

Objetos Array-like

O mtodo slice pode tambm ser chamado para converter objetos ou colees Array-like em um novo Array. Voc s precisa encadear o mtodo no Array. Os arguments dentro de uma funo so um exemplo de 'objeto array-like'.

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

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

Ligaes podem ser feitas com a funo .call de Function and it can also be reduced using [].slice.call(arguments) ao invs de Array.prototype.slice.call. De qualquer forma, ela pode ser simplificada com bind.

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]

Simplificando o comportamento entre navegadores

Embora os objetos de host (como objetos DOM) no sejam obrigados pela especificao a seguir o comportamento do Mozilla quando convertidos por Array.prototype.slice e IE <9 no o fazem, verses do IE comeando pela verso 9 permitem isso. "Shimming" pode permitir um comportamento confivel entre navegadores. Enquanto outros navegadores modernos continuem suportando essa habilidade, como atualmente IE, Mozilla, Chrome, Safari, e Opera fazem, desenvolvedores lendo (DOM-supporting) o cdigo slice confiando neste shim no sero desencaminhados pela semntica; eles podem confiar seguramente na semntica para fornecer o agora aparentemente comportamento padro de fato. (Isso tambm corrige o problema com IE < 9 onde o segundo argumento do slice era explicitamente null/undefined)

(function () {
  "use strict";
  var _slice = Array.prototype.slice;

  try {
    // Produzir erro no IE < 9
    _slice.call(document.documentElement);
  } catch (e) {
    // Funciona para arrays, objetos array-like,
    // NamedNodeMap (atributos, entidades, notaes),
    // NodeList (por exemplo, getElementsByTagName), HTMLCollection (por exemplo, childNodes),
    // e no vai falhar em outros objetos do DOM (como falham no IE < 9)
    Array.prototype.slice = function (begin, end) {
      end = typeof end !== "undefined" ? end : this.length;

      // Para arrays, chamamos o mtodo nativo
      if (Object.prototype.toString.call(this) === "[object Array]") {
        return _slice.call(this, begin, end);
      }

      // Para array-like, o processo  manual.
      var i,
        cloned = [],
        size,
        len = this.length;

      // Lidando com valor negativo para "begin"
      var start = begin || 0;
      start = start >= 0 ? start : Math.max(0, len + start);

      // Lidando com valor negativo para "end"
      var upTo = typeof end == "number" ? Math.min(end, len) : len;
      if (end < 0) {
        upTo = len + end;
      }

      // Tamanho real do corte feito pelo 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;
    };
  }
})();