Vamos esclarecer a confusão dos métodos slice(), splice() e split() em JavaScript

Allan Ramos
Nov 13 · 6 min read

Esse artigo é uma tradução livre de Let’s clear up the confusion around the slice( ), splice( ), & split( ) methods in JavaScript, de Cem Eygi.

Os métodos internos do Javascript nos ajudam muito enquanto programamos assim que os entendemos corretamente. Eu gostaria de explicar três desses métodos nesse artigo: slice (), splice () e split (). Possivelmente por conta de seus nomes serem parecidos, acontecem confusões até mesmo entre os mais experientes.

AVISO: Estudantes e devs juniors leiam esse artigo calmamente, pois esses 3 métodos são discutidos em ENTREVISTAS.

Você encontrará um resumo de cada método ao fim do artigo. Então bora lá!

Arrays em JavaScript

Primeiramente, você precisa entender como os arrays em Javascript funcionam. Assim como em outras linguagens, usamos arrays para armazenar múltiplos dados. Mas a diferença é que os arrays em JS podem conter dados de diferentes tipos de uma vez.

Algumas vezes precisamos fazer operações com esses arrays, então usamos métodos do JS como slice() e splice(). Você pode ver abaixo como declarar um array em Javascript:

let criacaoDeArray = [];   // Como declarar um array em JS

Agora vamos criar outro array com tipos diferentes de dados. Segue o exemplo:

let array = [1, 2, 3, "hello world", 4.12, true];

Essa forma é considerada válida pelo Javascript. Um array com diferentes tipos de dados: string, numbers, and a boolean.

Observação: A keyword let foi introduzida no ES6(ES2015). Você pode obter mais informações sobre isso clicando aqui.

Slice ( )

O método slice() copia uma parte de um array e o retorna como um novo array. Isso não modifica o array original.

array.slice(de, ate);
  • De: Corta o array a partir do índice informado;
  • Ate: Corta o array até o índice informado.

Por exemplo, eu desejo cortar os 3 primeiros elementos do array abaixo. Já que o primeiro elemento do array sempre será o índice 0, colocarei esse valor no “de”.

array.slice(0, ate);

Agora a parte complicada. Como eu desejo pegar os 3 primeiros elementos, preciso informar como segundo parâmetro “3”. O método slice () não inclui o último elemento dado.

array[0] --> 1              // incluído
array[1] --> 2 // incluído
array[2] --> 3 // incluído
array[3] --> "hello world" // não incluído

Isso pode criar uma confusão. É por isso que chamo o segundo parâmetro de “ate”.

let newArray = array.slice(0, 3);   // O valor retornado também será um array

Finalmente eu atribuí o array cortado a uma nova variável. Agora vamos ver o resultado.

O array foi fatiado e atribuído a variável newArray
A variável newArray é também um array, e o array original permanece o mesmo

Observação importante: O método Slice( ) também pode ser usada para Strings.

Splice ( )

O nome dessa função é bem parecido com slice( ). Essa similaridade de nomes algumas vezes confundem os desenvolvedores. O método splice() altera(muta) o array, seja adicionando ou removendo elementos dele. Vamos ver como fazer essas operações com esse método:

Para remover um elemento, precisamos do índice, e o número de elementos a serem removidos:

array.splice(índice, número de elementos);

O índice é o ponto de início para a remoção dos elementos. Elementos que têm um número de índice menor que o índice fornecido não serão removidos:

array.splice(2);  // Todos os elementos a partir do índice 2 serão removidos

Se não definirmos o segundo parâmetros, todos os elementos começando do índice informado serão removidos do array.

apenas o índice 0 e 1 permanecem

Como um segundo exemplo, se eu passar o primeiro parâmetro como 1, elementos que começarem no índice 2 serão removidos um por um, cada vez que a função splice() for executada:

array.splice(2, 1);
Array no começo

Depois de chamar pela primeira vez:

3 foi removido, portanto “hello world” está no índice 2

Depois de chamar pela segunda vez:

Dessa vez o “hello world” foi removido possuindo o índice: 2

Isso pode acontecer até não existir o índice 2.

Para adicionar novos elementos precisamos inserir um 3º, 4º e 5º parâmetro (dependendo de quantos itens formos adicionar) ao método splice():

array.splice(índice, número de elementos, elemento, elemento);

Como exemplo, estou adicionando a e b no começo do array, e não removendo nada.

array.splice(0, 0, 'a', 'b');
a e b são adicionados no começo do array e nada é removido

Split ( )

Slice( ) e splice( ) são métodos para arrays. O método split( ) é usado para strings. Ele divide a string em substrings e a retorna como parte de um array. Ela precisa de dois parâmetros, ambos opcionais.

string.split(separador, limite);
  • Separador: Define como dividir uma string, seja por uma vírgula, caracter, etc;
  • Limite: Limita o número de divisões (splits) a partir de um número.

O método split( ) não funciona diretamente para arrays. Entretanto, podemos converter os elementos do nosso array para string, para então podermos usar esse método.

Vamos ver como isso funciona.

Primeiramente, vamos converter o array para string usando a função toString():

let myString = array.toString();

Agora vamos dividir myString por vírgulas, limitando-a em 3 substrings, e retorná-la como um array:

let newArray = myString.split(",", 3);
Apenas os 3 primeiros elementos são retornados

Como podemos ver, myString foi divida por vírgulas. Como dividimos em 3 partes, somente os 3 primeiros elementos foram retornados.

OBSERVAÇÃO: Se a usássemos como: array.split(""); então cada caracter da string seria divida em uma substring:

Each character split one by one

Resumo:

  • Copia elementos de um array;
  • O retorna como um novo array;
  • Não modifica o novo array;
  • Começa dividindo de…até o índice informado: array.slice (de, ate);
  • Ele não inclui o índice do parâmetro “ate” se você não o passar;
  • Pode ser usado para arrays e strings.
  • Usado para adicionar/remover elementos de um array;
  • Retorna um array dos elementos adicionados/removidos;
  • Muta o array;
  • Par adicionar elementos: array.splice (índice, numero de elementos, novo elemento);
  • Para remover elementos: array.splice (índice, número de elementos);
  • Só pode ser usado em arrays.
  • Divide uma string em substrings;
  • Retorna o valor em um array;
  • Usa 2 parâmetros, ambos opcionais: string.split(separador, limite);
  • Não modifica a string original;
  • Só pode ser usado para strings.

Existem muitas outros métodos internos do Javascript para arrays e strings. Se você aprender a usá-los, esses métodos facilitarão sua vida como programador.

Eu espero que você tenha entendido melhor como os métodos funcionam. Se não, não existe em perguntar na parte de comentários. Você também pode ver meus outros artigos de CSS abaixo. Obrigado por ler meu artigo até o fim.

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Allan Ramos

Written by

Training Center

Conectamos pessoas que querem aprender algo relacionado a desenvolvimento de software com gente que pode guiá-las.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade