Arrays

Agora vamos começar a estudar os objetos built-in do JavaScript, vamos comecar com um objeto muito importante, o objeto Array.

Como vocês devem saber, o Array é uma estrutura de dados, no JavaScript essa é a única estrutura existente (por padrão), os arrays do JavaScript só podem ter índices númericos, na verdade você até pode usar índices associativos, mas na verdade você estará modificando o objeto e não colocando um dado no array. Vamos ver alguns exemplos simples de arrays no JavaScript.

var nomes = new Array();
nomes[0] = 'Maria';
nomes[1] = 'Joao';
nomes[2] = 'Ana';

for(var i = 0; i < nomes.length; i++) {
alert(nomes[i]);
}

Fizemos um simples array, colocamos uma string em cada item do nosso array colocamos uma string, depois fizemos um for que percorre os itens do nosso array. Note o uso da variável length do array, essa variável nos retorna a quantidade atual de itens no array. Vamos ver outras formas para criar esse mesmo array:

var nomes = [];
nomes[0] = 'Maria';
nomes[1] = 'Joao';
nomes[2] = 'Ana';

for(var i = 0; i < nomes.length; i++) {
alert(nomes[i]);
}

var nomes = ['Maria', 'Joao', 'Ana'];

for(var i = 0; i < nomes.length; i++) {
alert(nomes[i]);
}

var nomes = new Array('Maria', 'Joao', 'Ana');

for(var i = 0; i < nomes.length; i++) {
alert(nomes[i]);
}

var nomes = [];
nomes.push('Maria');
nomes.push('Joao');
nomes.push('Ana');

for(var i = 0; i < nomes.length; i++) {
alert(nomes[i]);
}

Agora eu mostrei que podemos substituir o new Array() por [], eles funcionam da mesma maneira, use o de sua preferência. Também vimos que é possivel inicializar um array já com valores, quando sabemos os valores isso é util, mas na maioria dos casos nós precisamos sair colocando valores ao longo do tempo, usando o método push do array, nós inserimos um valor no final do array, podemos inserir varios valores usando apenas um push, como veremos abaixo:

var nomes = [];
nomes.push('Maria', 'Joao', 'Ana');

for(var i = 0; i < nomes.length; i++) {
alert(nomes[i]);
}

Os arrays do JavaScript são bastante dinâmicos, o mesmo array pode ter valores numéricos, strings, objetos e outros, tudo num mesmo array, o JavaScript não faz distinção. Os arrays em JavaScript tem métodos úteis para podermos usa-lo como uma pilha ou fila por exemplo.

Vou falar rapidamente sobre os métodos mais usados do array:

• push() - adiciona um ou mais itens ao final do array


• pop() - retorna e remove o último elemento do array


• shift() - retorna e remove o primeiro elemento do array


• unshift() - adiciona um ou mais itens no início do array


• join() - ele cola todos os elementos do array, usando uma string (passada por parâmetro) como separador, e retorna essa string

Vamos agora construir um programinha simples, que coleta dados de pessoas, armazena esses dados em um array, e depois gera um simples relatório. Vamos explicar melhor o nosso programa:

1 - coleta de dados
Usando o comando prompt do JavaScript, vamos coletar dados de 10 pessoas, os dados coletados serão: nome, idade e sexo.

2 - processamento de dados
Vamos tratar nossos dados e conseguir as informações desejadas, nesse nosso caso, vamos mostrar ao final, o nome do homem mais velho e sua idade, o nome da mulher mais nova e sua idade, quantos homens e quantas mulheres foram entrevistados.

3 - exibicao de dados
Vamos mostrar os dados gerados na tela.

Antes de começar, eu devo dizer que esta não é forma mais simples de fazer esse algorimo, mas minha intenção é mostrar mais recursos do array. Nessa forma, vamos olhar como fazer usando a função sort do array.

A primeira coisa a ser feita, é criar um objeto Pessoa, que vai ser uma estrura que irá guardar os dados de cada entrevistado:

var Pessoa = function(nome, idade, sexo) {
this.nome = nome;
this.idade = idade;
this.sexo = sexo;
};

Bem simples, apenas um objeto que guarda os dados que precisamos. Vamos agora definir as variáveis que farão parte do programa:

var numPessoas = 5;
var homens = [];
var mulheres = [];

A variável numPessoas vai dizer quantas pessoas serão entrevistas, no array homens vamos guardas os entrevistados do sexo masculino, e no array mulheres os do sexo feminino .

Vamos agora fazer a primeira parte, a coleta de dados:

for(var i = 0; i < numPessoas; i++) {
var nome = prompt('Digite o nome:');
var idade = prompt('Digite a idade:');
var sexo = prompt('Digite o sexo (M para masculino, F para feminino):');

idade = parseInt(idade); //convertendo a string em numero
sexo = sexo.toUpperCase(); //convertendo para maiusculo

var p = new Pessoa(nome, idade, sexo);

if(sexo == 'M')
homens.push(p);
else
mulheres.push(p);
}

Pronto, com isso ja teremos os nossos arrays preenchidos. Para usarmos a função sort num objeto como o nosso, precisaremos criar uma função separada que vai definir quando um objeto é superior, inferior ou igual ao outro, vamos criar essa função:

var PessoaIdadeSorter = function(obj1, obj2) {
if(obj1.idade == obj2.idade)
return 0;

return obj1.idade > obj2.idade ? 1 : -1;
};

A função compara a idade das pessoas, e retorna o valor de acordo. Agora basta classificarmos nossos arrays:

homens.sort(PessoaIdadeSorter);
mulheres.sort(PessoaIdadeSorter);

Pronto, nossos arrays já estão classificados por idade, agora é facil terminar, vamos fazer a exibição:

var qtdHomens = homes.length;
var qtdMulheres = mulheres.length;
var homemMaisVelho = homens.pop();
var mulherMaisNova = mulheres.shift();

document.write('Foram entrevistados ' + qtdHomens + ' homens e ' + qtdMulheres + ' mulheres.
');
document.write('O homem mais velho se chama ' + homemMaisVelho.nome + ' com ' + homemMaisVelho.idade + ' anos
');
document.write('A mulher mais nova se chama ' + mulherMaisNova.nome + ' com ' + mulherMaisNova.idade + ' anos
');

Como nossos arrays estão ordenados pela idade, então o homem mais velho é o ultimo elemento do array homens, e a mulher mais nova é o primeiro elemento do array das mulheres.

Vou colocar o código completo abaixo (só pra facilitar):

var Pessoa = function(nome, idade, sexo) {
this.nome = nome;
this.idade = idade;
this.sexo = sexo;
};

var numPessoas = 5;
var homens = [];
var mulheres = [];

for(var i = 0; i < numPessoas; i++) {
var nome = prompt('Digite o nome:');
var idade = prompt('Digite a idade:');
var sexo = prompt('Digite o sexo (M para masculino, F para feminino):');

idade = parseInt(idade); //convertendo a string em numero
sexo = sexo.toUpperCase(); //convertendo para maiusculo

var p = new Pessoa(nome, idade, sexo);

if(sexo == 'M')
homens.push(p);
else
mulheres.push(p);
}

var PessoaIdadeSorter = function(obj1, obj2) {
if(obj1.idade == obj2.idade)
return 0;

return obj1.idade > obj2.idade ? 1 : -1;
};

homens.sort(PessoaIdadeSorter);
mulheres.sort(PessoaIdadeSorter);

var qtdHomens = homes.length;
var qtdMulheres = mulheres.length;
var homemMaisVelho = homens.pop();
var mulherMaisNova = mulheres.shift();

document.write('Foram entrevistados ' + qtdHomens + ' homens e ' + qtdMulheres + ' mulheres.
');
document.write('O homem mais velho se chama ' + homemMaisVelho.nome + ' com ' + homemMaisVelho.idade + ' anos
');
document.write('A mulher mais nova se chama ' + mulherMaisNova.nome + ' com ' + mulherMaisNova.idade + ' anos
');

Com isso eu termino os arrays, vou a referência do objeto Array para quem tiver interesse:

Array (Built-in Object)
Arrays store ordered lists of data. Data is stored at indices enumerated beginning with zero, which are accessed using the array access ([]) operator. Allocation of array memory is handled by the interpreter, so there is no need to explicitly resize arrays to accommodate more data. In addition, arrays are permitted to be sparse, that is, to have “holes” consisting of an arbitrary number of unused indices. Any index that has not been assigned data has value undefined, and the highest index addressable is 232 –1 because indices are converted to unsigned 32-bit integers before use. JavaScript arrays are one-dimensional, but since array elements can be of any type, multidimensional arrays are supported as arrays with elements that are arrays.

You can explicitly remove a value from an array using the delete operator, but there is no way to destroy an array other than by setting the variable that holds its reference to null.

Constructor
var instanceName = new Array([ val1 [, val2 [, val3 ... ] ] ]);

where the comma-separated values are treated as initial values for array indices 0, 1, 2, and so on. The exception is if a single numeric parameter is supplied, in which case the array’s length property is set to this value.

Properties
constructor Reference to the constructor object, which created the object. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

length Numeric value indicating the next empty index at the end of the array (not the number of elements in the array). Setting this property to a value less than its current value will undefine any elements with index >= length. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

prototype Reference to the object’s prototype. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Methods
concat([item1 [, item2 [, ...]]]) Appends the comma-separated list of items to the end of the array and returns the new array (it does not operate on the array in place). If any item is an array, its first level is flattened (that is, the item’s elements are appended each as a separate element). (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 1)

join([separator]) Returns the string obtained by concatenating all the array’s elements. If the string separator is supplied, separator will be placed between adjacent elements. The separator defaults to a comma. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

pop() Removes the last element of the array and returns it. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

push([item1 [, item2 [, ...]]]) Appends the parameters (in order) to the end of the array and returns the new length. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

reverse() Reverses the order of the elements (in place). (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

shift() Removes the first element from the array, returns it, and shifts all other elements down one index. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

slice(begin [, end]) Returns a new array containing the elements from index begin up to but not including index end. If end is omitted, all elements to the end of the array are extracted. If end is negative, it is treated as an offset from the end of the array. (IE4+ (JScript 3.0+), MOZ, N4+ (JavaScript 1.2), ECMA Edition 3)

sort([compareFunc]) Sorts the array in place in lexicographic order. The optional argument compareFunc is a function that can change the behavior of the sort. It will be passed two elements and should return a negative value if the first element is less than the second, a positive value if the second is less than the first, or zero if they are equal. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

splice(start, howMany [, item1 [, item2 [, ...]]]) Removes howMany elements from the array beginning at index start and replaces the removed elements with the itemN arguments (if passed). An array containing the deleted elements is returned. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

toString() Returns a string containing the comma-separated list of elements. (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

unshift([item1 [, item2 [, ...]]]) Inserts the items (in order) at the front of the array, shifting existing values up to higher indices. (IE5.5+ (JScript 5.5+), MOZ, N4+ (JavaScript 1.2+), ECMA Edition 3)

valueOf() Same as toString(). (IE4+ (JScript 2.0+), MOZ, N3+ (JavaScript 1.1+), ECMA Edition 1)

Support
Supported in IE4+ (JScript 2.0+), Mozilla, N3+ (JavaScript 1.1+), ECMAScript Edition 1.

Notes
In Netscape 4.0–4.05 (JavaScript 1.2) a single numeric parameter to the constructor is added to the single array element—it is not treated as an initial value for length.

Por hoje é tudo, no próximo artigo eu irei falar sobre o objeto String. E plz, comentem, seu comentário é muito importante ;)