Iniciando no Javascript: Arrays multidimensionais


Autor/fonte: CriarWeb.com
E-mail/Url: http://www.criarweb.com/artigos/241.php



Digg del.icio.us

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.length;j++){
       document.write("<td>" + temperaturas_cidades[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.




Enviado por xKuRt em 21/11/2006 às 17:18


Avaliação

Esta publicação ainda não foi avaliada!


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

Este artigo ainda não foi comentado ou o(s) comentário(s) que foi(ram) enviado(s) a ele ainda não foi(ram) publicado(s).


Envio de comentário:




  

Sexta, 18 de Abril de 2014




Top 5 membros

Últimos membros online

Últimos membros cadastrados



Capa do livro
Grafos: Conceitos, Algorítmos e Aplicações


Capa do livro
SOA: Modelagem, Análise e Design


Capa do livro
Desenvolvendo Para Web Usando o Visual Studio 2008





Hostnet

IMD