Qual a diferença entre os métodos splice()
e slice()
do objeto Array
do JavaScript e quando cada um deles deve ser utilizado?
2 Respostas
Por mais que pareçam iguais ou parecidos, eles operam de forma bem diferente.
Splice
Opera com 1 ou mais (indefinidos parâmetros). O primeiro parâmetro é o index de onde deve iniciar a remoção, o segundo a quantidade de valores removidos(se não informado, removerá todos os valores do index início até o final da array), e do terceiro em diante serão valores novos que entrarão no lugar dos valores removidos. Logo:
var arr = [1, 2, 3, 4, 5]
var spliced = arr.splice(1, 2, 'banana'); // [2, 3]
console.log(arr, spliced); // [1, 'banana', 4, 5] [2, 3]
splice
altera o array, removendo os valores dentro dele e substituindo por outros valores caso seja solicitado isso ao mesmo.
Slice
O slice
tem 3 diferenças do splice
. A primeira e mais importante é que ele não altera o array original, apenas retorna um array com os valores capturados. Logo:
var arr = [1, 2, 3, 4, 5]
var sliced = arr.slice(1, 3); // [2,3]
console.log(arr, sliced) //[1, 2, 3, 4, 5] [2, 3]
A segunda diferença, como pode notar no exemplo acima, é que o segundo valor não é a quantidade de valores para serem capturados, mas sim o index onde deve parar de capturar, não incluído. Ou seja, passando 1, 3
para o slice
, pegamos os indexes 1 e 2, pois o 3 não está incluído. Também irá remover todos os valores da array até o final caso não seja informado. A terceira diferença, é que o slice
não aceita mais de dois parâmetros, ao contrario do splice
, então não substitui nada na array original.
Sobre os casos de uso, depende o que você deseja fazer. Creio que com a explicação de como cada um funciona, já dê para ter uma ideia.
Links externos para mais informações:
-
2Boa resposta. Sugiro colocar os exemplos de código como snippets para ser possível de executar o código.– IsacCommented 19/11/2018 às 17:43
-
2Creio que "quando usar um ou outro" está na própria diferença entre ambos. 👍– SamCommented 19/11/2018 às 17:43
-
2Eu costumo fazer snippets apenas quando tem html incluído, mas de qualquer forma, segui a sugestão e editei. Commented 19/11/2018 às 18:01
-
2Vou colaborar com meu +1 . Apenas sugiro que sempre coloque links pra documentações confiáveis como a MDN (W3Schools não, por favor :D) Commented 19/11/2018 às 18:05
-
1Vou seguir a sugestão então, obrigado a todos pela ajuda. Commented 19/11/2018 às 18:11
Em Javascript, confundir slice
com splice
, ou vice-versa, é um engano comum. Essas duas funções, apesar de possuírem nomes parecidos, realizam duas ações completamente distintas.
A primeira diferença é que o método slice não modifica o próprio array que invoca o método, splice sim.
A segunda diferença consiste nos argumentos. Slice (verbo fatiar) possui a sintaxe arr.slice([índiceInicial[,índiceFinal]])
. Sendo os dois parâmetros facultativos.
Enquanto Splice
(verbo costurar) possui sintaxe array.splice(índiceInicio , quantidadeExcluídos[, item1[,item2[,... itemN]]])
. O primeiro dos dois parâmetros obrigatórios é um inteiro de índice com base zero que aponta para o primeiro item a ser removido do array atual. O segundo parâmetro é outro inteiro que indica quantos itens sequenciais devem ser removidos do array. A remoção de itens do array afeta o tamanho do array, e os itens que são removidos são retornados pelo método splice como um array separado.
Você também pode usar o método splice para substituir itens de array. Parâmetros opcionais a partir do terceiro permitem que você ofereça elementos de dados que devem ser inseridos no array no lugar dos itens removidos. Cada item adicional pode ter qualquer tipo de dado Javascript. Na verdade. especificando zero no segundo parâmetro, você pode usar splice para inserir um ou mais itens em qualquer posição do array
Brincando com Slice
var mainString = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
function showResults() {
var form = document.forms[0]
var param1 = parseInt(form.param1.options[form.param1.selectedIndex].value)
var param2 = parseInt(form.param2.options[form.param2.selectedIndex].value)
if (!param2) {
form.result1.value = mainString.slice(param1)
} else {
form.result1.value = mainString.slice(param1, param2)
}
}
<BODY onLoad="showResults()">
<B>Método slice()</B>
<HR>
<TABLE BORDER=1>
<FORM>
<TR><TH>Parâmetos</TH><TH>Resultado</TH></TR>
<TR>
<TD ROWSPAN=3 VALIGN=middle>
( <SELECT NAME="param1" onChange="showResults()">
<OPTION VALUE=0>0
<OPTION VALUE=1>1
<OPTION VALUE=2>2
<OPTION VALUE=3>3
<OPTION VALUE=5>5
</SELECT>,
<SELECT NAME="param2" onChange="showResults()">
<OPTION >(Nenhum)
<OPTION VALUE=4>4
<OPTION VALUE=6>6
<OPTION VALUE=-1>-1
<OPTION VALUE=-3>-3
<OPTION VALUE=-10>-10
</SELECT> ) </TD>
<TD><INPUT TYPE="text" NAME="result1" SIZE=25></TD>
</TR>
</FORM>
</TABLE>
</BODY>
</HTML>
Exemplos Splice
var frutas = ["goiaba", "manga", "laranja", "abacate"];
//remove 1 elemento posição 1 (remove manga)
var frutasRemovida = frutas.splice(1, 1);
var nomes = ["Leo", "inova pixel", "Anderson Carlos Woss", "fernandoandrade", "mengano", "fulano", "ciclano", "beltrano", "sicrano"];
//remove 3 elementos começando da posição 2 (remove Anderson Carlos Woss, fernandoandrade e mengano)
var nomesRemovidos = nomes.splice(2, 3);
console.log(frutas);
console.log(frutasRemovida);
console.log(nomes);
console.log(nomesRemovidos);
var numeros = [1, 2, 3, 4, 5];
//remove 1 elemento começando da posição 3 e inclui os elementos "a" "b" a começando da posição 3
var add = numeros.splice(3,1,"a","b");
console.log(numeros);
console.log(add);