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.

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:

Removendo elementos

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.

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

Depois de chamar pela primeira vez:

Depois de chamar pela segunda vez:

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

Adicionando elementos

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

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

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:

Resumo:

Slice ( )

• 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.

Splice ( )

• 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.

Split ( )

• 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.