Há alguns dias atrás, precisei remover um índice de um array
e por um instante fiquei sem saber o que fazer, mas logo um amigo me ajudou me dando a dica que no JavaScript os arrays
possuem um método chamado Splice, neste post vou explicar este método do JavaScript e como usa-lo de forma inteligente com um outro método do jQuery.
O que o método Splice faz?
O método splice
, em português é algo como “emendar” ou “juntar“, ele altera os índices de um array
enquanto adiciona novos índices ao array em questão.
Um exemplo bem prático seria:
var arr = [0, 1, 2, 3, 4, 5]; arr.splice(1, 0, 'a', 'b'); // agora o arr é: [0, "a", "b", 1, 2, 3, 4, 5]
Como usar o método Splice
A sintaxe do método é:
array.splice(de, até, item1, item2, item3, .... itemN);
Explicação dos parâmetros.
- De
- neste parâmetro definimos o índice que o método começara a adicionar novos itens/índices ao nosso
array
- Até
- neste parâmetro definimos quantas ‘casas’, índices ou itens o método deverá mudar no
array
, atenção que este índice é relativo ao índice passado no primeiro parâmetro, é aqui que uma grande magia acontece, por que todos os índices que ficar entre os números apontados no primeiro e no segundo parâmetro serão removidos permanentemente do nossoarray
. - Item1, item2… itemN
- Logo depois dos dois primeiros parâmetros, todos os demais parâmetros passados serão adicionados como itens do nosso
array
. Se só passarmos os dois primeiros parâmetros ao método, o método irá alterar nossoarray
assumindo que os índices apontados nos dois primeiros parâmetros devem ser substituídos por nada, logo seria o mesmo que remover algo, ou simplesmente não fazer nada dependendo do que você passou nos dois primeiros parâmetros
Então sabendo que os dois primeiros parâmetros são coringas no intuito de fazer o que diz no titulo dessa postagem, logo percebemos que só iremos precisar dos dois primeiros parâmetros, vejamos um exemplo removendo alguns itens de Arrays:
var arr = [0, 1, 2, 3, 4, 5]; // remove os índices de 1 até a quarto índice a partir de 1 arr.splice(1, 4); // Nosso array agora é apenas [0, 5]
Se você precisa remove apenas 1 índice especifico do seu array
, basta passar o segundo parâmetro com valor 1, lembre-se que o segundo parâmetro não é até o índice que você quer remover, e sim quantas ‘casas’ pra frente do índice apontado no primeiro parâmetro, vamos a mais um exemplo:
var arr = [0, 1, 2, 3, 4, 5]; // remove o índice de 3 até 1 índice pra frente arr.splice(3, 1); // Nosso array agora é apenas [0, 1, 2, 4, 5]
Bom, acho que já esta bom de dar exemplos deste método, eu espero que você faça bastantes testes ai no seu console =D.
Mas e o jQuery?
Ainda bem que você notou que ainda não falei de jQuery. Pois bem, imagine que precisamos remover um determinado valor de um array
, mas pra dificultar não sabemos qual é o índice deste valor, ai entra o jQuery com o método $.inArray.
O $.inArray
funciona assim, você passa dois parâmetros, o primeiro é o valor que você quer saber se tem ou não tem no array
, e o segundo é o array
que você quer fazer a verificação, se o método encontrar em algum índice que tenha o valor que você procura, ele irá retornar o número do índice que o valor foi encontrado, se ele não encontrar ira retornar -1.
Vejamos um exemplo, neste array
que esta repleto de nomes de ótimos desenvolvedores:
arr = ['Brendan Eich', 'Felquis Gimenes', 'John Resig', 'Paul Irish', 'Douglas Crockford']; console.log( $.inArray('Felquis Gimenes', arr) ); // Vai retornar 1, por que Ofelquis Gimenes esta no índice 1 deste Array
Então se você quiser remover algum item, cujo você só sabe o valor que pode estar nele, ou você se quer sabe se existe algum item com aquele valor, basta fazer assim:
arr = ['Brendan Eich', 'Felquis Gimenes', 'John Resig', 'Paul Irish', 'Douglas Crockford']; arr.splice($.inArray('Felquis Gimenes', arr), 1); console.log(arr); // Agora nosso Array é apenas 'Brendan Eich', 'John Resig', 'Paul Irish', 'Douglas Crockford'
Se o valor colocado no $.inArray
não for encontrado, ira ser retornado -1, e nenhum item será removido e não ocasionará em nenhum erro.
Certo? Então espero que vocês façam muitos testes ai, e que este post seja útil para alguma ocasião =D