We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

O método slice() retorna uma cópia rasa de parte de um array em um novo objeto array.

Syntaxe

arr.slice([begin[, end]])

Parâmetros

begin
Índice baseado em zero no qual se inicia a extração.
Como um índice negativo, begin indica um deslocamento em relação ao fim da sequência. slice(-2) extrai os dois últimos elementos da sequência.
Se begin for omitido, slice inicia a partir do índice 0.
end
Índice baseado em zero (origem iniciando em zero) o qual é o final da extração. slice extrai até, não incluindo end.
slice(1,4) extrai do segundo até o quarto elemento (elementos de índice 1, 2 e 3).
Como índice negativo, end indica um deslocamento em relação ao fim da sequência. slice(2,-1) extrai o terceiro elemento através do segundo-para-o-último elemento na sequência.
Se end for omitido, slice extrairá o fim da sequência (arr.length).

Descrição

slice não altera o array original. Retorna uma cópia de elementos do array original. Elementos do array original são copiados para o array retornado da seguinte maneira:

  • Para referências de objeto (e não 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 alterações são visiveis em ambos, no novo array e no array original.
  • Para strings e números (não objetos StringNumber), slice copia strings e números em um novo array. Alterações na string ou número em um array não afetam o outro array.

Se um novo elemento é adicionado a qualquer array, o outro não é afetado.

Exemplos

Retorna uma parte de um array existente

// Exemplo extrair nossos bons amigos, os cítricos, das frutas
var frutas = ['Banana', 'Laranja', 'Limao', 'Maçã', 'Manga'];
var citricos = frutas.slice(1, 3);

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

Usando slice

No exemplo seguinte, slice cria um novo array, novoCarro, from meuCarro. Ambos incluem uma referência ao objeto,  meuHonda. Quando a cor de meuHonda é alterada para  roxo, ambos os arrays sofrem alteração.

// 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 condições', '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 condições', '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 método slice pode também ser chamado para converter objetos ou coleções Array-like em um novo Array. Você só precisa encadear o método no Array. Os arguments dentro de uma função são um exemplo de 'objeto array-like'.

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

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

Ligações  podem ser feitas com a função .call de Function.prototype and it can also be reduced using [].slice.call(arguments) ao invés 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) não sejam obrigados pela especificação a seguir o comportamento do Mozilla quando convertidos por Array.prototype.slice e IE <9 não o fazem, versões do IE começando pela versão 9 permitem isso. “Shimming” pode permitir um comportamento confiável entre navegadores. Enquanto outros navegadores modernos continuem suportando essa habilidade, como atualmente IE, Mozilla, Chrome, Safari, e Opera fazem, desenvolvedores lendo (DOM-supporting) o código slice confiando neste shim não serão desencaminhados pela semântica; eles podem confiar seguramente na semântica para fornecer o agora aparentemente comportamento padrão de fato. (The shim also fixes IE to work with the second argument of slice() being an explicit null/undefined value as earlier versions of IE also did not allow but all modern browsers, including IE >= 9, now do.)

/**
 * Shim for "fixing" IE's lack of support (IE < 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 < 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 < 9
    _slice.call(document.documentElement);
  } catch (e) { // Fails in IE < 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 < 9)
    Array.prototype.slice = function(begin, end) {
      // IE < 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 >= 0) ? start : Math.max(0, len + start);

      // Handle negative value for "end"
      var upTo = (typeof end == 'number') ? Math.min(end, len) : len;
      if (end < 0) {
        upTo = len + end;
      }

      // Actual expected size of the 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;
    };
  }
}());

Especificações

Especificação Status Comentário
ECMAScript 3rd Edition (ECMA-262) Padrão Definição inicial. Implementada no JavaScript 1.2.
ECMAScript 5.1 (ECMA-262)
The definition of 'Array.prototype.slice' in that specification.
Padrão  
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Array.prototype.slice' in that specification.
Padrão  

Compatibilidade de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) (Yes) (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)

Veja também

Etiquetas do documento e colaboradores

Etiquetas: 
Colaboradores desta página: proxy-chan, odahcam, nelson777, vandercijr
Última atualização por: proxy-chan,