Conhecendo JavaScript - Array

Arrays

Array também conhecido pelo nome de Vetores, são lista ordenadas com índices, onde usamos o índice para localizar algo nessa lista.

Exemplo:
  Lista de Material Escolar
 1 - Lápis.
 2- Tesoura.
 3 - Papel
 4 - Borracha

No mundo da programação segue a mesma ideia onde uma variável armazena índice e valores, e assim, podemos acessar a esse índice como uma chave para chegar até o que queremos nessa lista, veremos como criar um array na prática.

Para Criação de uma Variável no JavaScript é necessário dizer que ela recebe o Objeto do tipo Array
variavel = Array( );

Criando o Array,  ( Modelo 1).

var lista_Mat_Escola  = Array( );

lista_Mat_Escola[1] = "Lápis";
lista_Mat_Escola[2] = "Tesoura";
lista_Mat_Escola[3] = "Papel";
lista_Mat_Escola[4] = "Borracha";

alert(lista_Mat_Escola[3]);


Imagem Exemplo.


(*Obs vamos criar uma nova pagina Arrays.html para novos testes ).

Criando o Array,  ( Modelo 2).

var lista_Mat_Escola  = Array("Lápis","Tesoura","Papel","Borracha");
alert(lista_Mat_Escola[0]);

Usando o modelo 2, o próprio construtor do Array cria os índices de acordo com a posição. Sua escrita é mais simplificada,  a sua maior diferença é indexação automática de índices que sempre começa a partir da chave / índice 0.

Imagem Exemplo.

Criando o Array,  ( Modelo 3 e Modelo 4).

var lista_Viagem  = [ ];

lista_Viagem  [1] = "Protetor Solar";
lista_Viagem  [2] = "Toalhas";
lista_Viagem  [3] = "Roupa de Banho";
lista_Viagem  [4] = "Bebidas";

Nesse modelo é passado os colchetes no lugar de Array() o interpretador do JavaScritp identifica igualmente. Lembrando que se for passado um índice não existente ele mostra undefinied/ valor indefinido;

E também pode ser usado da mesma maneria que o modelo 2 segue exemplo.

var lislista_Viagem  = ["Protetor Solar","Toalhas","Roupa de Banho","Bebidas"] ;

Exercício de fixação.

Criar uma lista qualquer com apresentação usando alert, seguinte detalhe do nosso desafio, será informado pelo usuário qual opcão que ele deseja na lista e exibir o resultado em um alert ou no browser ;

/*No meu exemplo vou utilizar um pouco de cada coisa vista até o momento
 * Estou criando pensando em uma Oficina de Carros */

  //criar variaveis
var promo_Pintuta, descont_Balanceamento, leve_3_Ganhe1;
var minha_Lista = [ ];
var escreveAew;

//atribuir conteúdo
promo_Pintura = "Grande Promoção.... 30% de na Pintura do seu Carro";
descont_Balanceamento = "No Serviço de Balanceamento, Ganha 25% no Rodizio de Pneus ";
leve_3_Ganhe1  = "Na compra de 3 Pneus Ganha o 4";

minha_Lista [1] = promo_Pintura;
minha_Lista [2] = descont_Balanceamento;
minha_Lista [3] = leve_3_Ganhe1;

alert("Loja Virtual Opções  1-Pintura | 2- Balanceamento | 3-Pneus");
escreveAew = prompt("Digite aqui sua escolha");

alert(minha_Lista[escreveAew]);
document.write("Bem Vindo a Nossa Loja");


Array Multidimensional


Um Array multidimensional são Arrays ou Array dentro de outro Array, um exemplo mais próximo e prático para ilustração ao meu ver são as tabelas do Excel que contem linhas e colunas, linhas com numeração, ou seja,  um identificador para cada linha e uma letra para cada coluna. 

Ou podemos ainda ser mais lúdico e usar o jogo de Xadrez, que segue o mesmo principio.

Podemos imaginar da seguinte maneira usando o Excel como um exemplo,  (na linha 1 e na casa A temos o valor 10 , na linha 3 na casa B temos 300, na linha 3 casa C temos 2 ), ou seja, um Array com duas dimensões nesse caso, existe um índice para as linhas e outro para as colunas.

Segue na Prática,

Vou criar uma tabela simples como exemplo:

A B C
1
10
2
3
300 2

Podemos da mesma maneira, criar um array nesse caso Bidimensional (duas Dimensões).
var tabela_bidimensional = [ ]
tabela_bidimensional[ 1 ] = [ ];
tabela_bidimensional [1]['A'] = 10;

Fica bem fácil pensar agora, podemos atribuir chaves com valores numericos e alfanumericos,
e assim utilizar também mais dimensões associando um novo objeto array . Exemplo seguindo a tabela acima.

var tabela_bidimensional [1]['A'] = 10;
var tabela_bidimensional [2]['B'] = "";
var tabela_bidimensional [3]['C'] = "";

var tabela_bidimensional [1]['A'] = "";
var tabela_bidimensional [2]['B'] = "";
var tabela_bidimensional [3]['C'] = "";

var tabela_bidimensional [1]['A'] = "";
var tabela_bidimensional [2]['B'] =  300;
var tabela_bidimensional [3]['C'] = 2;

   Já o necessário para compreensão para o Array Multidimensional, no caso adicionar um terceiro Array [ ] [ ] [ ], ou ainda, adicionar array a outro.

Para uma melhor compreensão podemos pensar na teoria dos conjuntos como exemplo.
Um Conjunto B e seus elementos estão contidos no conjunto A ...
Dessa maneira ou nessa Lógica podemos criar um Array assim;

var conjuntos = [ ];

 conjuntos['conjunto_A'] = [ ]; // atribiumos outro array ao objeto conjunto A

 conjuntos['conjunto_A']['conjunto_B']= "Eu sou um Elemento ou um Objeto";

 document.write(conjuntos['conjunto_A']['conjunto_B']);

Resultado:
Podemos adicionar um índice e deixar ele agora realmente multidimensional, usar um numero/índice para facilitar na busca a essa informação, o mais comum é ver ele no inicio ([ 1] ['texto']), porém para realçar a experiencia deixei ele no fim.

var conjuntos = [ ];

conjuntos['conjunto_A'] = [ ];

conjuntos['conjunto_A']['conjunto_B']= [ ];
conjuntos['conjunto_A']['conjunto_B'][1]="Continue a nadar... Continue a nadar!!";

 document.write(conjuntos['conjunto_A']['conjunto_B'][1]);




 Para ampliar um pouco mais, podemos ainda utilizar da mesmo array para um novo totalmente diferente. segue exemplo;

var conjuntos = [ ];

conjuntos['conjunto_A'] = [ ];
conjuntos['amigos']= [ ];

conjuntos['conjunto_A']['conjunto_B']= [ ];
conjuntos['conjunto_A']['conjunto_B'][1]="Continue a nadar... Continue a nadar!!";

 document.write(conjuntos['conjunto_A']['conjunto_B'][1]+"</br>");

conjuntos['amigos']['familia']=[];

conjuntos['amigos']['familia'][1] = "Tudo Gente Boa";

document.write(conjuntos['amigos']['familia'][1]);



Podemos também adicionar todos Arrays em um novo Array simples, deixando com mais multi-dimensões . Segue exemplo:

var conjuntos = [ ];

conjuntos['conjunto_A'] = [ ];
conjuntos['amigos']= [ ];

conjuntos['conjunto_A']['conjunto_B']= [ ];
conjuntos['conjunto_A']['conjunto_B'][1]="Para Voar... primeiro: - >";

conjuntos['amigos']['familia']=[];

conjuntos['amigos']['familia'][1] = "Precisamos aprender a bater as Asas ";

var simples = Array(conjuntos['conjunto_A']['conjunto_B'][1],conjuntos['amigos']['familia'][1]);

document.write(simples[0]+"</br>",simples[1]);


É realmente impressionante o que pode se fazer com arrays, no campo da matemática podemos usar matrizes do tipo    " [ 1 ] [ 32] [ 15] [ 23] ", fazer cálculos diversos, estatísticas, porem já é um assunto mais avançado só para ter uma ideia onde pode ser aplicado.

Espero neste post ter explicado e simplificado a compreensão sobre Arrays,
Até mais.


Comentários

Postagens mais visitadas deste blog

Botões Bootstrap Exemplos.

Conhecendo JavaScript - Eventos

Conhecendo JavaScript - HTML DOM