Funções de manipulação de vetores do Javascript

Veja neste artigo quais são e como utilizar as funções nativas de manipulação de vetores na linguagem Javascript.

por Joel Rodrigues

Na computação em geral, vetor é uma das senão a estrutura de dados mais utilizada. A maioria das linguagens de programação atuais implementam arrays e fornecem funções nativas para manipulá-los.

Neste artigo, serão apresentadas as funções disponíveis nativamente na linguagem Javascript para se trabalhar com vetores, permitindo, por exemplo, adicionar, remover, localizar e ordenar elementos da coleção.

Além da apresentação conceitual, será mostrado um exemplo prático de uso de cada função, bem como uma breve discussão sobre os resultados obtidos.

concat

O método concat é utilizado para juntar dois ou mais vetores a um vetor que invoca a função. Os objetos iniciais não são alterados, apenas o resultado é um vetor contendo os dados do primeiro array seguido dos elementos dos arrays passados como parâmetro.

Listagem 1: Exemplo de uso do concat

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3);
	var vetor2 = new Array(4, 5, 6);
	var vetor3 = new Array(7, 8, 9);
	var result = vetor1.concat(vetor2, vetor3);
	document.write(result);
</script>

Executando este código, tem-se um vetor resultante contendo os elementos 1, 2, 3, 4, 5, 6, 7, 8 e 9, nessa ordem. Após a chamada ao método, nenhum dos vetores originais sofreu alterações.

indexOf

Esta função recebe como parâmetro um valor a ser localizado no array e retorna, caso ele seja encontrado, a sua posição na lista. A contagem das posições inicia em zero e não em um como estamos acostumados em nosso dia-a-dia. Caso o elemento não seja localizado, o retorno é o valor -1.

Listagem 2: Exemplo de uso do indexOf

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	var indice = vetor1.indexOf(3);
	document.write(indice);
</script>

Nesse caso, o valor exibido no browser será “2”, pois o elemento 3 encontra-se na segunda posição do vetor.

join

A função join pode ser chamada de duas formas: na primeira não são informados parâmetros e o retorno é um string contendo todos os elementos do vetor separados por vírgula. Na segunda chamada é informado um texto para ser vir como separador, e o retorno é semelhante à primeira forma, mas no lugar das vírgulas é exibido o separador indicado.

Listagem 3: Exemplo de uso do join

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	var elementos = vetor1.join(“-“);
	document.write(elementos);
</script>

O resultado, nesse caso, é o texto “1-2-3-4-5”. Caso não fosse informado o separador, o resultado seria “1,2,3,4,5”.

lastIndexOf

Semelhante ao indexOf, mas retorna a posição da última ocorrência de um elemento no vetor, ou seja, caso o elemento apareça mais de uma vez na lista, o retorno é a posição da última. Da mesma forma que no indexOf, se o elemento não existir na lista, o retorno é -1.

Listagem 4: Exemplo de uso do lastIndexOf

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 2, 7);
	var indice = vetor1.lastIndexOf(2);
	document.write(indice);
</script>

pop

O método pop remove o último elemento do vetor e o retorna como resultado. Nesse caso o array original é alterado.

Listagem 5: Exemplo de uso do pop

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 2, 7);
	var ultimo = vetor1.pop();
	document.write(ultimo);
</script>

Na execução do código acima, o número 7 é exibido na tela, pois ele é o último elemento do vetor, que passa a ter quatro itens.

push

O push é usado para adicionar um ou vários elementos, recebidos como parâmetro, no final do vetor que o invoca. A seguir temos um exemplo utilizando o mesmo vetor da Listagem 5. Nele inserimos os valores 9 e 5 no final do vetor.

Listagem 6: Exemplo de uso do push

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 2, 7);
	vetor1.push(9, 5);
	document.write(vetor1);
</script>

Como é de se esperar, será escrito no browser o texto “1,2,3,2,7,9, 5”, ou seja, o novo conteúdo do array.

reverse

Como o nome sugere, o método reverse inverte os elementos de um vetor, fazendo com que o último se torne o primeiro, o primeiro se torne o último e os intermediários sigam a mesma lógica. A chamada a este método não requer nenhum parâmetro.

Listagem 7: Exemplo de uso do reverse

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	vetor1.reverse();
	document.write(vetor1);
</script>

Após invocar o método reverse, o vetor original é alterado e o texto exibido no browser é “5,4,3,2,1”.

shift

Esta função remove o primeiro elemento de um vetor qualquer e o retorna como resultado. Assim como no pop, o vetor que origina a chamada a este método fica alterado após sua execução.

Listagem 8: Exemplo de uso do shift

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	var primeiro = vetor1.shift();
	document.write(primeiro);
</script>

Nesse caso tem-se como resultado o valor 1, ou seja, o primeiro elemento da lista.

slice

A função slice recebe como parâmetros dois valores inteiros e retorna uma fração do vetor original com base nos limites que foram informados. O primeiro parâmetro indica a posição do primeiro elemento do vetor a fazer parte da seleção, enquanto o segundo indica a posição seguinte a do último elemento selecionado (um a mais que a posição deste).

No exemplo a seguir, selecionamos os elementos 2, 3, e 4 do vetor original, informando a posição do elemento 2 (primeiro da seleção) e do elemento 5 (sucessor do 4 que é o final da seleção).

Listagem 9: Exemplo de uso do slice

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	var selecao = vetor1.slice(1, 4);
	document.write(selecao);
</script>

sort

Este método, de nome sugestivo, ordena os elementos do vetor. A chamada mais simples a essa função não requer parâmetros e ordena no array e ordem crescente. Uma chamada mais complexa recebe uma função de ordenação como parâmetro, esta função define o cálculo a ser considerado na comparação entre dois elementos.

Listagem 10: Exemplo de uso do sort

<script type="text/javascript">
	var vetor1 = new Array(3, 2, 1, 5, 4);
	vetor1.sort();
	document.write(vetor1);
</script>

O resultado é o vetor ordenado desde o elemento 1 até o 5 em ordem crescente.

splice

Até aqui o splice é o método mais complexo apresentado, ele serve para remover e/ou adicionar items de/em um vetor. A chamada a este método requer dois ou vários (três ou mais) parâmetros.

O primeiro parâmetro representa a posição do elemento a ser removido (começando do zero) e o segundo indica a quantidade de elementos a serem removidos do vetor, a partir da posição indicada. Caso não se deseje remover nenhum item, basta passar 0 (zero) como segundo parâmetro. No exemplo a seguir o segundo e o terceiro elementos são removidos.

Listagem 11: Exemplo de uso do splice para remoção de elementos

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	vetor1.splice(1,2);
	document.write(vetor1);
</script>

Caso se deseje apenas inserir elementos em determinada posição, basta informá-la como primeiro parâmetro, informar 0 (zero) no segundo e, a partir daí, informar o(s) elemento(s) a ser(em) adicionado(s).

Listagem 12: Exemplo de uso do splice para adição de elementos

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	vetor1.splice(1, 0, 9, 8);
	document.write(vetor1);
</script>

O código acima faz com que os valores 9 e 8 sejam adicionados após o segundo elemento. O texto exibido é, então, “1, 9, 8, 2, 3, 4, 5”.

Uma terceira forma de usar essa função seria para remover e adicionar elementos ao mesmo tempo. Com base nos exemplos anterior, o código da Listagem 13 remove o segundo e o terceiro elementos e insere os valores 9 e 8 em seus lugares.

Listagem 13: Exemplo de uso do splice para remoção e adição de elementos

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	vetor1.splice(1,2, 9, 8);
	document.write(vetor1);
</script>

O resultado agora é “1, 9, 8, 4, 5”.

toString

Método comum a todos os objetos, o toString converte o vetor para string, retornando esse texto como resultado. No caso de vetores, o resultado contém todos os elementos separados por vírgula.

Listagem 14: Exemplo de uso do toString

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	vetor1.unshift(-1, 0);
	document.write(vetor1);
</script>

O resultado exibido no browser é “1, 2, 3, 4, 5”.

unshift

A função unshit funciona semelhante à push, mas o invés de inserir elementos no final do array, os insere no início. Podem ser passados um ou vários elementos como parâmetro.

Listagem 15: Exemplo de uso do unshift

<script type="text/javascript">
	var vetor1 = new Array(-1, 0 ,1, 2, 3, 4, 5);
	var texto = vetor1.toString();
	document.write(texto);
</script>

O código da Listagem 15 faz com que os valores -1 e 0 sejam inseridos no início do vetor, tornando-se o primeiro e segundo elementos.

valueOf

Essa última função, talvez a menos utilizada, tem como resultado a representação primitiva do vetor, ou seja, um texto contendo todos os seus elementos separados por vírgula. Sua chamada não requer parâmetros.

Listagem 16: Exemplo de uso do valueOf

<script type="text/javascript">
	var vetor1 = new Array(1, 2, 3, 4, 5);
	var texto = vetor1.valueOf();
	document.write(texto);
</script>

O resultado nesse caso é o mesmo que o do método toString, ou seja, “1, 2, 3, 4, 5”.

Conclusão

Como vimos, o Javascript nos fornece uma série de funções que facilitam bastante o trabalho com vetores. Conhecê-las é fundamental para os programadores web que utilizam esta linguagem em seus projetos, posto que a manipulação de arrays é comumente necessária no mundo da programação.

Espero que o conteúdo aqui apresentado possa ser útil para quem dele possa precisar. Agradeço a atenção do leitor e por aqui me despeço. Até a próxima.