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

Os métodos embutidos em JavaScript nos ajudam muito na programação, desde que os entendamos corretamente. Eu gostaria de explicar três deles neste artigo: as slice(), splice()e split()métodos. Talvez porque seus nomes sejam tão semelhantes, eles costumam ficar confusos, mesmo entre desenvolvedores experientes.

Aconselho os alunos e desenvolvedores juniores a lerem este artigo com atenção, porque esses três métodos também podem ser solicitados em ENTREVISTAS DE TRABALHO.

Você pode encontrar um resumo de cada método no final. Se preferir, você também pode assistir a versão em vídeo abaixo:

Então vamos começar…

Arrays JavaScript

Em primeiro lugar, você precisa entender como funcionam os arrays JavaScript . Como em outras linguagens de programação, usamos arrays para armazenar vários dados em JS. Mas a diferença é que os arrays JS podem conter diferentes tipos de dados ao mesmo tempo.

Às vezes, precisamos fazer operações nesses arrays. Em seguida, usamos alguns métodos JS como slice () e splice () . Você pode ver abaixo como declarar uma matriz em JavaScript:

let arrayDefinition = [];   // Array declaration in JS

Agora vamos declarar outro array com diferentes tipos de dados. Vou usá-lo abaixo em exemplos:

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

Este uso é válido em JavaScript. Uma matriz com diferentes tipos de dados: string, números e um booleano.

Fatia ()

O método slice () copia uma determinada parte de uma matriz e retorna essa parte copiada como uma nova matriz. Isso não muda a matriz original.

array.slice(from, until);

  • De: divida a matriz a partir de um índice de elemento
  • Até: divida a matriz até outro índice de elemento

Por exemplo, quero cortar os primeiros três elementos da matriz acima. Como o primeiro elemento de uma matriz é sempre indexado em 0, começo a fatiar “de” 0.

array.slice(0, until);

Agora, aqui está a parte complicada. Quando quero fatiar os três primeiros elementos, devo dar o parâmetro until como 3. O método slice () não inclui o último elemento fornecido.

array[0] --> 1 // included array[1] --> 2 // included array[2] --> 3 // included array[3] --> "hello world" // not included

Isso pode criar alguma confusão. É por isso que chamo o segundo parâmetro de “até”.

let newArray = array.slice(0, 3);   // Return value is also an array

Por fim, atribuo o Array fatiado à variável newArray . Agora vamos ver o resultado:

Nota importante: o método Slice () também pode ser usado para strings.

Splice ()

O nome desta função é muito semelhante a slice () . Essa semelhança de nomenclatura costuma confundir os desenvolvedores. O método splice () altera um array, adicionando ou removendo elementos dele. Vamos ver como adicionar e remover elementos com splice ( ) :

Removendo Elementos

Para remover elementos, precisamos fornecer o parâmetro de índice e o número de elementos a serem removidos:

array.splice(index, number of elements);

O índice é o ponto de partida para a remoção de elementos. Os elementos que possuem umnúmero de índice menor do índice fornecido não serão removidos:

array.splice(2);  // Every element starting from index 2, will be removed

Se não definirmos o segundo parâmetro, todos os elementos a partir do índice fornecido serão removidos da matriz:

Como um segundo exemplo, dou o segundo parâmetro como 1, portanto, os elementos que começam no índice 2 serão removidos um a um cada vez que chamarmos o método splice () :

array.splice(2, 1);

Após a 1ª chamada:

Após a 2ª chamada:

Isso pode continuar até que não haja mais índice 2.

Adicionando Elementos

Para adicionar elementos, precisamos fornecê-los como o 3º, 4º, 5º parâmetro (depende de quantos adicionar) ao método splice () :

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

Como exemplo, eu estou adicionando um e b no início da matriz e eu remove nada:

array.splice(0, 0, 'a', 'b');

Dividido ( )

Os métodos Slice () e splice () são para matrizes. Ométodo split () é usado para strings . Ele divide uma string em substrings e as retorna como uma matriz. Leva 2 parâmetros, e ambos são opcionais.

string.split(separator, limit);

  • Separador: define como dividir uma string ... por uma vírgula, caractere etc.
  • Limite: limita o número de divisões com um determinado número

O método split () não funciona diretamente para arrays . No entanto, podemos primeiro converter os elementos do nosso array em uma string, então podemos usar o método split () .

Vamos ver como isso funciona.

Em primeiro lugar, convertemos nosso array em uma string com o método toString () :

let myString = array.toString();

Agora vamos dividir myString por vírgulas, limitá-los a três substrings e retorná-los como uma matriz:

let newArray = myString.split(",", 3);

Como podemos ver, myString é dividida por vírgulas. Como limitamos a divisão a 3, apenas os 3 primeiros elementos são retornados.

NOTA: Se tivermos um uso como este:array.split("");cada caractere da string será dividido como substrings:

Resumo:

Fatia ()

  • Copia elementos de um array
  • Retorna-os como uma nova matriz
  • Não muda a matriz original
  • Começa o corte de ... até determinado índice: array.slice (de, até)
  • A fatia não inclui o parâmetro de índice “até”
  • Pode ser usado para matrizes e strings

Splice ()

  • Usado para adicionar / remover elementos da matriz
  • Retorna uma matriz de elementos removidos
  • Muda a matriz
  • Para adicionar elementos: array.splice (índice, número de elementos, elemento)
  • Para remover elementos: array.splice (índice, número de elementos)
  • Só pode ser usado para matrizes

Dividido ( )

  • Divide uma string em substrings
  • Retorna-os em uma matriz
  • Aceita 2 parâmetros, ambos são opcionais: string.split (separator, limit)
  • Não muda a string original
  • Só pode ser usado para strings

Existem muitos outros métodos embutidos para arrays e strings JavaScript, que facilitam o trabalho com a programação JavaScript. A seguir, você pode verificar meu novo artigo sobre métodos de substring de JavaScript.

Se você quiser saber mais sobre desenvolvimento web, fique à vontade para me seguir no Youtube !

Obrigado por ler!