No tutorial de hoje, vou lhes mostrar algumas das funções nativas existentes para manipulação de vetores, ou seja, arrays em JavaScript.

Na programação de sistemas, ou de pequenas rotinas, manipulações de arrays são umas das coisas mais importantes que devemos saber tanto como cria-las, modifica-las e ou excluí-las.

No JavaScript como qualquer outra linguagem, temos funções nativas, ou seja, funções próprias da tecnologia utilizada para realizar este tipo de procedimento e facilitar nossas vidas.

Vou lhes apresentar as funções nativamente disponíveis na linguagem JavaScript para se trabalhar com arrays, 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 arrays a um array que invoca a função. Os objetos iniciais não são alterados, apenas o resultado é um array contendo os dados do primeiro array seguido dos elementos dos arrays passados como parâmetro.

<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 array 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 arrays 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.

<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 é uma 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.

<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 array, 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.

<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 array e o retorna como resultado. Nesse caso o array original é alterado.

<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 array, que passa a ter quatro itens.

push

O push é usado para adicionar um ou vários elementos, recebidos como parâmetro, no final do array que o invoca. A seguir temos um exemplo inserindo os valores 9 e 5 no final do array.

<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 array, 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.

<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 array original é alterado e o texto exibido no browser é “5,4,3,2,1”.

shift

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

<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 array original com base nos limites que foram informados. O primeiro parâmetro indica a posição do primeiro elemento do array 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 array 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).

<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, com um nome muito intuitivo, ordena os elementos do array. 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.

<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 ,2,3,4 e 5 em ordem crescente.

splice

Até aqui o splice é o método mais complexo apresentado, ele serve para remover e/ou adicionar itens de/em um array. 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 array, 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 abaixo o segundo e o terceiro elementos são removidos.

<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) desta forma:

<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 desta forma:

<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 array para string, retornando esse texto como resultado. No caso de arrays, o resultado contém todos os elementos separados por vírgula.

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

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

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

valueOf

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

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

Como podemos notar, o JavaScript nos fornece vários métodos para se trabalhar com arrays que facilitam e muito todo trabalho manual, conhecê-las é essencial para nos programadores web que utilizam esta linguagem em seus projetos, sistemas ou sites, não somente nesta linguagem mas em qualquer outra que possua suas funções nativas.

Dominar ou ter um excelente conhecimento na manipulação de arrays pode determinar o sucesso de uma programação bem executada.

Dúvidas críticas ou sugestões comentem abaixo que teremos o prazer em tentar ajuda-los. =)