Olá, pessoal!
Quando não se conhece muito bem como o JavaScript trabalha com seus Arrays e Objetos é possível que acabemos tendo resultados incoerentes em nossa aplicação.
A primeira coisa a se saber é que o Array no JavaScript é um tipo especial de Objeto. Um objeto que trabalha apenas com índices numéricos.
Sendo assim, vejamos alguns exemplos simples de comportamentos inesperados:
Quando estamos a instanciar um Array vazio:
var quantidades = new Array();
var quantidades = [];
Ambas criarão um Array vazio, porém a melhor forma é a segunda. Veremos logo adiante porquê.
Vamos indicar algumas quantidades para o Array:
var quantidades = new Array(50, 80);
var quantidades = [50, 80];
Também ambas criarão um Array com dois itens. A melhor forma continua sendo a a segunda.
Digamos que por algum motivo você terá apenas um item para o Array:
var quantidades = new Array(80);
var quantidades = [80];
A primeira forma criará um Array com oitenta índices indefinidos, enquanto a segunda criará um Array com um único índice armazenando a quantidade oitenta.
Vamos agora ver o que ocorre quando trabalhamos com índices associativos:
var cars = [];
cars['cor'] = 'vermelho';
cars['marca'] = 'Ferrari';
cars['potencia']= '700';
cars['blindado']= false;
cars['aro'] = 21;
Veja o que acontece caso queiramos retornar dados do array:
var total = cars.length; //retornará ZERO
var ultimo_val = cars[cars.length];//retornará undefined
var potencia = cars[2]; //retornará undefined
Afinal, como utilizar um Array associativo?
A melhor forma é aceitar que índices associativos (ou nomeados) apenas podem trabalhar em forma de Objeto:
var cars = {};
cars.cor = 'vermelho';
cars.marca = 'Ferrari';
cars.potencia = '700';
cars.blindado = false;
cars.aro = 21;
var cars = {
cor : 'vermelho',
marca : 'Ferrari',
potencia: '700',
blindado: false,
aro : 21
};
Ambos exemplos acima funcionarão corretamente! Vejamos:
var cor = cars.cor; //Retornará vermelho
var marca = cars['marca'];//sim, dessa forma retornará Ferrari corretamente
var qtd = cars.length; //Retornará undefined pois é diretamente implícito que o objeto tem apenas uma dimensão de dados
Agora, dentro destas regras acima, como criar um Array Multidimensional?
Basta acolhermos nossos Objetos dentro de um Array comum:
var cars = [
{
cor : 'vermelho',
marca : 'Ferrari',
potencia: '700',
blindado: false,
aro : 21
},
{
cor : 'azul',
marca : 'Dodge',
potencia: '700',
blindado: false,
aro : 22
}
];
As informações do Objeto acima podem ser acessadas da seguinte forma:
var cor_ferrari = cars[0].cor; //Retornará vermelho
var cor_dodge = cars[1].cor; //Retornará azul
var aro_ferrari = cars[0]['aro'];//sim, dessa forma retornará 21 corretamente
var aro_dodge = cars[1]['aro'];//sim, dessa forma retornará 22 corretamente
var qtd = cars.length; //Retornará dois
Esta mesma estrutura também pode ser feita com Arrays numéricos! Vejamos:
var z = [ [0,1,2], ['ser',7,'programador'], [34,56,78] ];
As informações do Objeto acima podem ser acessadas da seguinte forma:
var qtd_total = z.length; //Retornará três
var qtd_um = z[0].length; //Retornará três
var site = z[1][0]+z[1][2]+'.com.br'; //Retornará serprogramador.com.br
Você também pode trabalhar - se cabe à sua aplicação trabalhar dessa forma - com um único Objeto Multidimensional:
var cars = {
enzo : {
cor : 'vermelho',
marca : 'Ferrari',
potencia: '700',
blindado: false,
aro : 21
},
viper : {
cor : 'azul',
marca : 'Dodge',
potencia: '700',
blindado: false,
aro : 22
}
};
Sendo assim você acessa as informações como segue:
var qtd_total = z.length; //Retornará undefined pois estamos trabalhando com um único Objeto multidimensional
var qtd_enzo = z.enzo.length //Retornará undefined da mesma forma
var data_enzo = z[0] //Retornará undefined
var cor_enzo = z[0].cor //Retornará erro pois tenta acessar propriedade "cor" de objeto indefinido
var cor_enzo = z.enzo.cor; //Retornará vermelho
var cor_viper = z.viper.cor; //Retornará azul