Arrays em Javascript

Vemos o que são os arrays, para que servem e como utilizá-los.

Nas linguagens de programação existem estruturas de dados especiais que nos servem para salvar informações mais complexas do que simples variáveis. Uma estrutura típica em todas as linguagens é o Array, que é como uma variável onde podemos introduzir vários valores, ao invés de somente um como ocorre com as variáveis normais.

Os arrays nos permitem salvar várias variáveis e acessá-las de maneira independente, é como ter uma variável com distintos compartimentos onde podemos introduzir dados distintos. Para isso utilizamos um índice que nos permite especificar o compartimento ou posição ao qual estamos nos referindo.

Os arrays foram introduzidos em versões Javascript 1.1 ou superiores, ou seja, somente podemos utilizá-los a partir dos navegadores 3.0. Para navegadores antigos se pode simular o array utilizando sintaxe de programação orientada a objetos, mas dada a complexidade desta tarefa, pelo menos no momento em que nos encontramos e as poucas ocasiões que os deveremos utilizar, vamos ver como utilizar o autêntico array de Javascript.

Criação de Arrays

O primeiro passo para utilizar um array é criá-lo. Para isso utilizamos um objeto Javascript já implementado no navegador. Veremos adiante um tema para explicar o que é a orientação a objetos, embora não será necessário para poder entender o uso dos arrays. Esta é a sentença para criar um objeto array:

var meuArray = new Array()

Isto cria um array na página que está se executando. O array se cria sem nenhum conteúdo, ou seja, não terá nenhum campo ou compartimento criado. Também podemos criar o array especificando o número de compartimentos que vai ter.

var meuArray = new Array(10)

Neste caso indicamos que o array vai ter 10 posições, ou seja, 10 campos onde salvar dados.

É importante observarmos que a palavra Array em código Javascript se escreve com a primeira letra em maiúscula. Como em Javascript as maiúsculas e minúsculas sim que importam, se escrevemos em minúscula não funcionará.

Podemos introduzir no array qualquer dado, tanto se indicamos ou não o número de campos do array. Se o campo está criado se introduz simplesmente e se o campo não estava ccriado se cria e logo, se introduz o dado, com o qual o resultado final será o mesmo. Esta criação de campos é dinâmica e se produz ao mesmo tempo, que os scripts se executam. Vejamos a seguir como introduzir valores em nossos arrays.

meuArray[0] = 290
meuArray[1] = 97
meuArray[2] = 127

Introduzem-se indicando entre colchetes o índice da posição onde queríamos salvar o dado. Neste caso introduzimos 290 na posição 0, 97 na posição 1 e 127 na 2. Os arrays começam sempre na posição 0, portanto, um array que tenha por exemplo 10 posições, terá campos do 0 ao 9. Para recolher dados de um array fazemos da mesma forma: colocando entre colchetes o índice da posição a qual queremos acessar. Vejamos como se imprimiria na tela o conteúdo de um array.

var meuArray = new Array(3)

meuArray[0] = 155
meuArray[1] = 4
meuArray[2] = 499

for (i=0;i<3;i++){
document.write("Posição " + i + " do array: " + meuArray[i])
document.write("<br>")
}

Criamos um array com três posições, logo introduzimos um valor em cada uma das posições do array e finalmente imprimimos. Em geral, o percurso por arrays para imprimir suas posições ou qualquer outra coisa se faz utilizando loops. Neste caso utilizamos um loop FOR que vai desde o 0 até o 2.

Podemos ver o exemplo em funcionamento em outra página.

Tipos de dados nos arrays

Nos campos dos arrays podemos salvar dados de qualquer tipo. Podemos ver um array onde introduzimos dados de tipo caractere.

meuArray[0] = "Ola"
meuArray[1] = "a"
meuArray[2] = "todos"

Inclusive, em Javascript podemos salvar distintos tipos de dados nos campos de um mesmo array. Ou seja, podemos introduzir números em uns campos, textos em outros, boleanos ou qualquer outra coisa que desejarmos.

meuArray[0] = "criarweb.com"
meuArray[1] = 1275
meuArray[1] = 0.78
meuArray[2] = true

Longitude dos Arrays

Aprendemos mais coisas sobre o funcionamento dos arrays e sua propriedade length.

Todos os arrays em javascript, além de armazenar o valor de cada uma de suas posições também armazenam o número de posições que têm. Para isso, utilizam uma propriedade do objeto array, a propriedade length. Já veremos o que é uma propriedade em objetos, mas para nosso caso podemos imaginar que é como uma variável, adicional às posições, que armazena um número igual ao número de campos do array.

Para acessar a uma propriedade de um objeto há que utilizar o operador ponto. Escreve-se o nome do array que queremos acessar ao número de posições que tem, sem colchetes nem parênteses, seguido de um ponto e a palavra length.

var meuArray = new Array()

meuArray[0] = 155
meuArray[1] = 499
meuArray[2] = 65

document.write("Longitude do array: " + meuArray.length)

Este código imprimiria na tela o número de posições do array, que neste caso é 3. Recordamos que um array com 3 posições abarca desde a posição 0 a 2.

É muito habitual que se utilize a propriedade length para poder percorrer um array por todas suas posições. Para ilustrá-lo vamos ver um exemplo de percurso por este array para mostrar seus valores.

for (i=0;i<meuArray.length;i++){
document.write(meuArray[i])
}

Há que observar que o loop for se executa sempre que i valer menos que a longitude do array, extraída de sua propriedade length.

O seguinte exemplo nos servirá para conhecer melhor os percursos pelos arrays, o funcionamento da propriedade length e a criação dinâmica de novas posições. Vamos criar um array com 2 posições e preencher seu valor. Posteriormente, introduziremos um valor na posição 5 do array. Finalmente, imprimiremos todas as posições do array para ver o que acontece.

var meuArray = new Array(2)

meuArray[0] = "Colômbia"
meuArray[1] = "Estados Unidos"

meuArray[5] = "Brasil"

for (i=0;i<meuArray.length;i++){
document.write("Posição " + i + " do array: " + meuArray[i])
document.write("<br>")
}

O exemplo é simples. Pode-se apreciar que fazemos um percurso pelo array desde 0 até o número de posições do array (indicado pela propriedade length). No percurso vamos imprimindo o número da posição seguido do conteúdo do array nesta posição. Mas podemos ter uma dúvida ao perguntarmos qual será o número de elementos deste array, já que o havíamos declarado com 2 e logo lhe introduzimos um terceiro na posição 5. Ao ver a saída do programa poderemos contestar nossas perguntas. Será algo parecido a isto:

Posição 0 do array: Colômbia
Posição 1 do array: Estados Unidos
Posição 2 do array: null
Posição 3 do array: null
Posição 4 do array: null
Posição 5 do array: Brasil

Pode-se ver claramente que o número de posições é 6, da 0 a 5. O que ocorreu é que ao introduzir um dado na posição 5, todas os campos que não estavam criados até o quinto se criaram também.

As posições da 2 a 4 estão sem iniciar. Neste caso nosso navegador escreveu a palavra null para expressar isto, mas outros navegadores poderão utilizar a palavra undefined. Veremos mais adiante qual é este null e onde o podemos utilizar, o importante agora é compreender como trabalham os arrays e utiliza-los corretamente.

Podemos ver o efeito deste script em seu navegador em uma página a parte.

Arrays multidimensionais
Vemos o que são os arrays multidimensionais e como utilizá-los. Ademais explicamos como iniciar arrays em sua declaração.

Os arrays multidimensionais são estruturas de dados que armazenam os valores em mais de uma dimensão. Os arrays que vimos até agora armazenam valores em uma dimensão, por isso para acessar às posições utilizamos somente um índice. Os arrays de 2 dimensões salvam seus valores de alguma forma como em filas e colunas e por isso, necessitaremos dois índices para acessar a cada uma de suas posições.

Com outras palavras, um array multidimensional é como um contêiner que guardará mais valores para cada posição, ou seja, como se os elementos do array fossem por sua vez outros arrays.

Em Javascript não existe um autêntico objeto array-multidimensinal. Para utilizar estas estruturas poderemos definir arrays onde, em cada uma de suas posições haverá outro array. Em nossos programas poderemos utilizar arrays de qualquer dimensão, veremos a seguir como trabalhar com de duas dimensões, que serão os mais comuns.

Neste exemplo vamos criar um array de duas dimensões onde teremos por um lado cidades e por outro a temperatura média que faz em cada uma durante os meses de inverno.

var temperaturas_medias_cidade0 = new Array(3)
temperaturas_medias_cidade0[0] = 12
temperaturas_medias_cidade0[1] = 10
temperaturas_medias_cidade0[2] = 11

var temperaturas_medias_cidade1 = new Array (3)
temperaturas_medias_cidade1[0] = 5
temperaturas_medias_cidade1[1] = 0
temperaturas_medias_cidade1[2] = 2

var temperaturas_medias_cidade2 = new Array (3)
temperaturas_medias_cidade2[0] = 10
temperaturas_medias_cidade2[1] = 8
temperaturas_medias_cidade2[2] = 10

Com as anteriores linhas criamos três arrays de 1 dimensão e três elementos, como os que já conhecíamos. Agora criaremos um novo array de três elementos e introduziremos dentro de cada um de seus campos os arrays criados anteriormente, com o qual teremos um array de arrays, ou seja, um array de 2 dimensões.

var temperaturas_cidades = new Array (3)
temperaturas_cidades[0] = temperaturas_medias_cidade0
temperaturas_cidades[1] = temperaturas_medias_cidade1
temperaturas_cidades[2] = temperaturas_medias_cidade2

Vemos que para introduzir o array inteiro fazemos referência ao mesmo sem parênteses nem colchetes, simplesmente com seu nome. O array temperaturas_cidades é nosso array bidimensinal.

Também é interessante ver como se realiza um percurso por um array de duas dimensões. Para iso temos que fazer um percorrido por cada um dos campos do array bidimensional e dentro destes fazer um novo percorrido para cada um de seus campos internos. Ou seja, um percorrido por um array dentro de outro.

O método para fazerum percorrido dentro de outro é colocar um loop dentro de outro, o que se chma de loop aninhado. Pode ser complicado fazer um loop aninhado, mas nós já tivemos a oportunidade de praticar em um capítulo anterior. Portanto, neste exemplo vamos colocar um loop FOR dentro de outro. Ademais, vamos escrever os resultados em uma tabela, o que complicará um pouco o script, mas poderemos ver como construir uma tabela de javascript, à medida que realizarmos o percurso aninhado ao loop.

document.write("<table width=200 border=1 cellpadding=1 cellspacing=1>");
for (i=0;i<temperaturas_cidades.length;i++){
document.write("<tr>")
document.write("<td><b>Cidade " + i + "</b></td>")
for (j=0;j<temperaturas_cidades[i].length;j++){
document.write("<td>" + temperaturas_cidades[i][j] + "</td>")
}
document.write("</tr>")
}
document.write("</table>")

Este script é um pouco mais complexo do que os que vimos anteriormente. A primeira ação consiste em escrever o cabeçalho da tabela, ou seja, a etiqueta <TABLE> junto com seus atributos. Com o primeiro loop realizamos um percorrido à primeira dimensão do array e utilizamos a variável i para levar a conta da posição atual. Por cada iteração deste loop escrevemos uma fila e para começar a fila abrimos a etiqueta <TR>. Ademais, escrevemos em um campo o número da cidade que estamos percorrendo nesse momento. Posteriormente, colocamos outro loop que vai percorrendo cada um dos campos do array em sua segunda dimensão e escrevemos a temperatura da cidade atual em cada um dos meses, dentro de sua etiqueta <TD>. Uma vez que acaba o segundo loop se imprimiram as três temperaturas e, portanto, a fila está terminada. O primeiro loop continua se repetindo até que todas as cidades estão impressas e uma vez terminado fechamos a tabela.

Podemos ver o exemplo em funcionamento e examinar o código do script inteiro.

Iniciação de arrays

Para terminar com o tema dos arrays vamos ver uma maneira de iniciar seus valores ao mesmo tempo que o declaramos, assim podemos realizar de uma forma mais rápida o processo de introduzir valores em cada uma das posições do array.

Vimos que o método normal de criar um array era através do objeto Array, colocando entre parênteses o número de campos do array ou não colocando nada, de modo que o array se crie sem nenhuma posição. Para introduzir valores a um array se faz igualmente, porém colocando entre parênteses os valores com os que desejamos preencher os campos separados por vírgula. Vejamos com um exemplo que cria um array com os nomes dos dias da semana.

var diasSemana = new Array("Segunda","Terça","Quarta,","Quinta","Sexta","Sábado","Domingo")

O array se cria com 7 campos, do 0 ao 6 e em cada campo se escreve o dia da semana correspondente (Entre aspas porque é um texto).

Agora vamos ver algo mais complicado, trata-se de declarar o array bidimensional que utilizamos antes para as temperaturas das cidades nos meses em uma só linha, introduzindo os valores de uma só vez.

var temperaturas_cidades = new Array(new Array (12,10,11), new Array(5,0,2),new Array(10,8,10))

No exemplo introduzimos em cada campo do array outro array que tem como valores as temperaturas de uma cidade em cada mês.