Arranjos em Javascript - Tutorial definitivo - (Javascript Arrays)

Este artigo é direcionado a exemplos, pois a Internet tem muita falação e pouca prática, levando os programadores e até analistas a conclusões e usos errados dos Arrays.

Arrays

Formato de dados mais estruturado e de mais fácil acesso iterativo para linguagens.

Arrays no formato de objeto

Como a maior parte dos programadores não aceita mais os Arrays no formato de índice, e sim no formato factível de ser acessado por propriedades, este será o nosso primeiro exemplo.

var a_AMOSTRA =  {
'Caso 01': {'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
'Caso 02': {'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
'Caso 03': {'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
'Caso 04': {'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
'Caso 05': {'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
'Caso 06': {'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};

Observe:

1. Os delimitadores de Array e de itens são chaves "{" e "}";
2. As referências aos itens estão nas tags entre apóstrofos (exemplo 'Caso 01');
3. As referências aos atributos (ou propriedades, quando se fala em objetos) estão entre apóstrofos;
4. Não se utiliza a instanciação ( var ___ = new Array ___ );  

Estes itens é que provocam a maior parte das confusões em torno de Arrays em Javascript.

Como se referir aos itens do Array em formato Objeto ?

alert(a_AMOSTRA['Caso 01']['area']);

ou

document.write(a_AMOSTRA['Caso 01']['area']);

As 'tags' são colocadas explicitamente dentro dos colchetes.

Como percorrer os itens do Array em formato Objeto ?

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+" ");
}
document.write("<br>");
}

Um erro muito comum é achar que o item enumerado guarda o conteúdo. Isto é um engano. Ele é apenas um índice a ser colocado no interior dos colchetes ("[" e "]").

Arrays no formato Objeto sem tags

Apenas para obedecer os requisitos de sintaxe, utilizamos qualquer coisa para nos referirmos aos itens:

var a_SAMPLE =  {
a:{'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
b:{'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
c:{'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
d:{'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
e:{'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
f:{'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};

As tags a, b, c, d, e e f não precisam estar definidas como variáveis em lugar nenhum do fonte.

Para se referir a um item e percorrer o Array, valem as mesmas providências utilizadas no formato Objeto anterior.

Arrays no formato Objeto com tags indiretas

  var p = 'pessoas';
var d = 'dias';
var t = 'temperatura';
var a = 'area';

var a_TAG =  {
a:{p:3, d:5, t:24, a:24},
b:{p:3, d:5, t:28, a:26},
c:{p:3, d:5, t:30, a:25},
d:{p:3, d:5, t:31, a:25},
e:{p:6, d:5, t:24, a:32},
f:{p:6, d:5, t:30, a:30}
};

As variáveis definidas antes do Array não tem associação direta com o Array em sua definição. Apenas servirão a um artifício para referência aos itens, sem perder seu significado.

Percorrendo o Array com tags indiretas

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(eval(item)+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}

Nesta enumeração, repare a instrução:

document.write(eval(item)+"-"+arr[item]+"&nbsp;");

A desvantagem deste formato é a de não permitir o acesso a um item específico. Portanto, só deve ser usado quando esta necessidade não existir. Um dos casos é quando se quer utilizar o formato objeto, mas apenas para acesso global aos itens, como no caso de seleção por algumas propriedades.

Formato de Array padrão (não objeto)

É feito utilizando-se os colchetes "[" e "]":

var a_PADRAO =  [
[3, 5, 24, 24],
[3, 5, 28, 26],
[3, 5, 30, 25],
[3, 5, 31, 25],
[6, 5, 24,32],
[6, 5, 30,30]
];

É o mais simples. As strings (entre apóstrofos) podem ser utilizadas como conteúdos.

Percorrendo o Array Padrão

for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}

Você deve estar se perguntando como se pode percorrer um Array padrão com as mesmas instruções utilizadas para Arrays no formato objeto.

Tal coisa se dá pelo fato de internamente ambos terem o armazenamento de uma forma que permite a recuperação dos valores por iteração.

Fonte completo do Exemplo

<html>
<head>
<script type="text/javascript">
// Definição de Array no formato objeto com "tags" explícitas
var a_AMOSTRA =  {
'Caso 01': {'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
'Caso 02': {'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
'Caso 03': {'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
'Caso 04': {'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
'Caso 05': {'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
'Caso 06': {'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};
// Definição usando referências sem tags
var a_SAMPLE =  {
a:{'pessoas':3, 'dias':5, 'temperatura':24, 'area':48},
b:{'pessoas':3, 'dias':5, 'temperatura':28, 'area':46},
c:{'pessoas':3, 'dias':5, 'temperatura':30, 'area':45},
d:{'pessoas':3, 'dias':5, 'temperatura':31, 'area':45},
e:{'pessoas':6, 'dias':5, 'temperatura':24, 'area':64},
f:{'pessoas':6, 'dias':5, 'temperatura':30, 'area':61}
};
// Definição usando tags indiretas
var p = 'pessoas';
var d = 'dias';
var t = 'temperatura';
var a = 'area';
var a_TAG =  {
a:{p:3, d:5, t:24, a:24},
b:{p:3, d:5, t:28, a:26},
c:{p:3, d:5, t:30, a:25},
d:{p:3, d:5, t:31, a:25},
e:{p:6, d:5, t:24, a:32},
f:{p:6, d:5, t:30, a:30}
};
var a_PADRAO =  [
[3, 5, 24, 24],
[3, 5, 28, 26],
[3, 5, 30, 25],
[3, 5, 31, 25],
[6, 5, 24,32],
[6, 5, 30,30]
];
// Exibe um item específico
alert('Amostra:'+a_AMOSTRA['Caso 01']['area']);
alert('Tag:'+a_TAG[2][a]);
// Rastreia os itens e mostra o parâmetro area
for( caso in a_AMOSTRA ){
alert(a_AMOSTRA[caso]['area']);
}
// Rastreia os itens e mostra os subítens
function showInputLayer(oArranjo){
for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(item+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}
}
// Rastreia os itens e mostra os subítens com as tags indexadas
function showInputLayer1(oArranjo){
for( caso in oArranjo ){
var arr =oArranjo[caso];
for( item in arr ){
document.write(eval(item)+"-"+arr[item]+"&nbsp;");
}
document.write("<br>");
}
}
document.write('<h4>Array no formato objeto com "tags" explícitas</h4>');
showInputLayer(a_AMOSTRA);
document.write('<h4>Array no formato objeto sem "tags" explícitas</h4>');
showInputLayer(a_SAMPLE);
document.write('<h4>Array no formato objeto com "tags" indiretas</h4>');
showInputLayer1(a_TAG);
document.write('<h4>Array no formato padrão</h4>');
showInputLayer(a_PADRAO);

</script>
</head>
<body>
</body>
</html>

Conclusão

Façam bom proveito