Nenhum produto encontrado nessa seleção.
O objeto array em Javascript é utilizado para salvar vários dados em uma única matriz. Você pode salvar praticamente qualquer coisa que quiser, como números (number), strings, booleanos, funções, outros arrays e assim por diante.
Ele é um objeto como todos os outros que já vimos anteriormente, porém, conta com índices para identificar cada um dos valores que estão dentro dele. Tais índices são números que vão de zero (0) ao número de elementos presentes no array, menos um.
Por exemplo: Um array com 5 elementos, teria índices de 0 a 4.
// Meu array contém vários navegadores var navegadores = new Array( 'Safari', 'IE', 'Firefox', 'Chrome', 'Opera' ); // Quero exibir o firefox alert( navegadores[2] ); // Resultado: Firefox
No exemplo acima, criei um array utilizando a palavra new em seguida Array, para especificar que eu estava criando um novo objeto array em Javascript. Essa é a forma mais longa para se utilizar, já que você pode criar seu array com um comando literal:
// Meu array contém vários navegadores var navegadores = ['Safari', 'IE', 'Firefox', 'Chrome', 'Opera'];
Ou de maneira separada, se for da sua necessidade:
// Meu array contém vários navegadores var navegadores = new Array(); navegadores[0] = 'Safari'; // Índice 0 navegadores[1] = 'IE'; // Índice 1 navegadores[2] = 'Firefox'; // Índice 2 navegadores[3] = 'Chrome'; // Índice 3 navegadores[4] = 'Opera'; // Índice 4 // Quero exibir o firefox alert( navegadores[2] ); // Resultado: Firefox
Os índices do array vêm logo na frente do nome da variável que recebeu este valor, entre [chaves], por exemplo.
// Crio a variável var meu_array; // Crio a instância do array meu_array = new Array(); // Aqui você vê o índice [0] recebendo um valor meu_array[0] = 11.5; // Tipo number // Aqui você vê outro índice - [1] - recebendo um valor meu_array[1] = true; // Tipo boolean // Aqui você vê outro índice - [2] - recebendo um valor meu_array[2] = 'Sou uma string'; // Tipo string // Aqui acessamos o índice 2 - [2] alert( meu_array[2] ); // Resultado: Sou uma string
Observação: O exemplo acima é bastante longo para ser utilizado em uma aplicação, serve apenas como exemplo para você entender o processo. O mesmo poderia ser atingido com o trecho abaixo:
// Aqui os índices são gerados na ordem 0,1,2... var meu_array = [11.5, true, 'Sou uma string']; // Aqui acessamos o índice 2 alert( meu_array[2] ); // Resultado: Sou uma string
Qualquer valor de um índice pode ser tratado como o tipo de dados correspondente, por exemplo, posso utilizar o objeto math para manipular o número existente no índice 0 do array que criamos anteriormente.
// Crio a variável var meu_array = [11.5, true, 'Sou uma string']; // Aqui acessamos o índice 0 alert( Math.round( meu_array[0] ) ); // Resultado: 12
Porém, eu não alterei o valor do array, apenas mostrei na tela como um alerta ao usuário, se eu quisesse modificar o valor de um índice do array, eu teria que fazer o seguinte:
// Crio um array var meu_array = [11.5, true, 'Sou uma string']; // Altera o valor do índice 0 meu_array[0] = Math.round( meu_array[0] ) // Aqui acessamos o índice 0 alert( meu_array[0] ); // Resultado: 12
Arrays unidimensionais e multidimensionais
Um array unidimensional é um array que contém "apenas um nível de índices", por exemplo:
// Crio um array unidimensional var meu_array = new Array(); meu_array[0] = 'Olá';
Já um array multidimensional é um array que contém outros arrays dentro dele:
// Crio um array multidimensional var meu_array = new Array(); meu_array[0] = new Array(1,2,3,4); meu_array[1] = new Array(5,6,7);
Neste caso, se você quiser acessar o índice 2 do array que está dentro do índice 1 de meu_array, terá que fazer o seguinte:
// Crio um array multidimensional var meu_array = new Array(); meu_array[0] = new Array(1,2,3,4); meu_array[1] = new Array(5,6,7); // Acessando o índice 2 do array dentro do índice 1 de meu_array alert( meu_array[1][2] ); // Resultado: 7
Isso é um array multidimensional, ou seja, tem mais de "um nível de índices" (ou resumindo, arrays dentro de arrays).
Além disso, se você precisar, pode ir criando quantos níveis desejar:
// Crio um array multidimensional var meu_array = new Array(); meu_array[0] = new Array(); meu_array[1] = new Array(); meu_array[1][2] = new Array(); meu_array[1][2][0] = 'Me achouuuu!!'; alert( meu_array[1][2][0] ); // Resultado: Me achouuuu!!
Isso também funciona:
// Crio um array multidimensional var meu_array = new Array( Array( Array( 'Olá', 'Outra chave', 'Mais uma chave' ), 'Outra chave', 'Mais uma chave' ), 'Outra chave', 'Mais uma chave' ); alert( meu_array[0][0][0] ); // Resultado: Olá
Sei que parece complicado, mas basta que você acompanhe a indentação para entender.
Métodos do objeto array em Javascript
Assim como outros objetos, arrays também têm seus métodos. Veja a seguir:
length()
Se você precisar saber quantos itens existe dentro de um array, basta utilizar lengh:
// Crio um array var meu_array = [0, 1, 2, '20', true, false, 'String']; alert( meu_array.length ); // Resultado: 7
No entanto, length não exibe itens de outros níveis, ou seja, se você tiver um array multidimensional, as chaves dos arrays internos não serão contabilizadas, apenas o array, como mais um elemento apenas:
// Crio um array var meu_array = [0, 1, 2, Array(false, false, false), true, false, 'String']; alert( meu_array.length ); // Resultado: 7
Se eu quiser saber quantas chaves existem dentro de um array interno, eu preciso mencionar o índice desse array:
// Crio um array var meu_array = [0, 1, 2, Array(false, false, false), true, false, 'String']; alert( meu_array[3].length ); // Resultado: 3
splice()
Outro método muito interessante é o splice, que remove quantos itens você quiser a partir de determinado índice, e ainda inclui itens na posição dos itens removidos, veja um exemplo:
// Array com times var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians']; // Remove 1 item começando da posição 2 (Atlético) e inclui mais 2 itens var removidos = meu_array.splice(2,1, 'Internacional', 'Grêmio'); // Imprime o(s) item(ns) removido(s) document.write( 'Removidos: ' + removidos + '<br>' ); // Imprime os novos valores do meu array document.write( 'Meu array: ' + meu_array + '<br>' );
O resultado:
Removidos: Atlético Meu array: Cruzeiro,Flamengo,Internacional,Grêmio,São Paulo,Corinthians
Splice retorna um novo array com os itens removidos do seu array antigo.
slice()
Slice é um pouco diferente de splice, ele simplesmente pega uma fatia do seu array, por exemplo, do índice 2 ao 4, 10 ao 100, assim por diante, por exemplo:
// Array com times var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians']; alert( meu_array.slice(1, 3) ); // Resultado: Flamengo,Atlético
No trecho acima, como da para perceber, o índice 0 (Cruzeiro), foi eliminado, o índice 1 (Flamengo) apareceu, índice 2 (Atlético) apareceu, e 3 (São Paulo), foi eliminado. Ou seja, essa é a nossa fatia de 1 a 3.
Lembre-se que o último item (no nosso caso, 3), nunca vai aparecer, ou seja, se você utilizar slice(3,3) terá um resultado em branco.
concat()
Assim como vimos em aulas anteriores, concat simplesmente concatena nossos arrays, ou melhor, junta novos arrays ao final do nosso array antigo:
// Array com times var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians']; var meu_array2 = ['Inter', 'Grêmio']; alert( meu_array.concat( meu_array2 ) ); // Resultado: Cruzeiro, Flamengo, Atlético, São Paulo, Corinthians, Inter, Grêmio
join()
Perceba que nosso array sempre é exibido com vírgulas (,) entre os itens todas as vezes que executamos um alert() ou document.write(). Isso acontece porque os arrays são automaticamente convertidos em strings quando executamos comandos para exibi-los.
Caso queira alterar a vírgula que separa os valores do seu array, pode fazê-lo com o método join.
Por exemplo:
// Array com times var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians']; alert( meu_array.join( '-' ) ); // Resultado: Cruzeiro - Flamengo - Atlético - São Paulo - Corinthians
O parâmetro passado para join é o novo separador.
reverse()
Outro fato interessante, é que você pode alterar a ordem de um array caso tenha necessidade, para isso, basta utilizar reverse. Veja um exemplo:
// Array com times var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians']; alert( meu_array.reverse() ); // Resultado: Corinthians, São Paulo, Atlético, Flamengo, Cruzeiro
push()
Push adiciona um item novo ao final do seu array e retorna o novo número de itens do mesmo.
// Array com times
var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians'];
// Adiciona "Inter" e retorna o novo número de itens do meu array
var n_numero = meu_array.push('Inter');
document.write( 'Meu array agora tem ' + n_numero + ' itens <br>' );
document.write( 'Novo valor do array: ' + meu_array + '<br>' );O resultado será:
Meu array agora tem 6 itens Novo valor do array: Cruzeiro, Flamengo, Atlético, São Paulo, Corinthians, Inter
unshift()
Unshift faz praticamente a mesma coisa de push, porém, ao invés de adicionar o item ao final do seu array, adiciona o novo item no começo do seu array:
// Array com times
var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians'];
// Adiciona "Inter" e retorna o novo número de itens do meu array
var n_numero = meu_array.unshift('Inter');
document.write( 'Meu array agora tem ' + n_numero + ' itens <br>' );
document.write( 'Novo valor do array: ' + meu_array + '<br>' );O resultado:
Meu array agora tem 6 itens Novo valor do array: Inter, Cruzeiro, Flamengo, Atlético, São Paulo, Corinthians
pop()
Pop remove o último elemento do seu array e retorna este valor. Veja um exemplo:
// Array com times var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians']; // Remove o último elemento do array e retorna este valor var removido = meu_array.pop(); // Mostra na tela document.write( 'Você removeu: ' + removido + ' <br>' ); document.write( 'Novo valor do array: ' + meu_array + '<br>' );
O resultado:
Você removeu: Corinthians Novo valor do array: Cruzeiro,Flamengo,Atlético,São Paulo
shift()
Shift remove o primeiro elemento do array e retorna este valor. Por exemplo:
// Array com times var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians']; // Remove o primeiro elemento do array e retorna este valor var removido = meu_array.shift(); // Mostra na tela document.write( 'Você removeu: ' + removido + ' <br>' ); document.write( 'Novo valor do array: ' + meu_array + '<br>' );
O resultado:
Você removeu: Cruzeiro Novo valor do array: Flamengo,Atlético,São Paulo,Corinthians
Filas Fifo e Lifo
Os últimos quatro métodos detalhados (push, unshift, pop e shift) trabalham com filas FIFO e LIFO, isso significa que os valores das chaves do seu array serão alterados de maneira extremamente organizada.
Quando utilizamos qualquer um dos quatro métodos, os itens do array serão alterados e seus índices reordenados de acordo com a ação.
Veja um exemplo:
// Array com times
var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians'];
// Laço um
document.write('Laço 1: <br>');
// Laço para exibir os itens
for ( var indice in meu_array ) {
document.write(indice + ': ');
document.write( meu_array[ indice ] + '<br>');
}
// Remove o primeiro elemento do array
meu_array.shift();
// Laço dois
document.write('<br> Laço 2: <br>');
// Laço para exibir os itens novamente
for ( var indice in meu_array ) {
document.write(indice + ': ');
document.write( meu_array[ indice ] + '<br>');
}
No laço 1 (antes de utilizar unshift) nosso resultado será:
Laço 1: 0: Cruzeiro 1: Flamengo 2: Atlético 3: São Paulo 4: Corinthians
Perceba que a chave zero está com "Cruzeiro", porém, ao utilizar unshift para remover o primeiro item (o próprio Cruzeiro), as chaves (índices) serão automaticamente reordenadas.
Laço 2: 0: Flamengo 1: Atlético 2: São Paulo 3: Corinthians
Agora quem tem o índice 0 é o "Flamengo".
Laços for com array em Javascript
Como você pôde perceber em nosso último exemplo, utilizamos um laço for para percorrer os valores de nosso array. Isso é bastante comum e amplamente utilizado por qualquer desenvolvedor.
Você pode utilizar o laço for em arrays de duas maneiras:
// Array com times
var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians'];
// Indice será alterado a cada volta do laço (0,1,2...)
for ( var indice in meu_array ) {
document.write( meu_array[ indice ] );
}Nesse caso, criamos uma variável índice que será alterada a cada volta do laço até que os índices do array terminem.
Ou seja, quando escrevo:
meu_array[ indice ];
É o mesmo que escrever:
meu_array[0];
Ou o índice atual (1, 2, 3…).
Outra maneira que é bem mais comum de se ver do que "for … in" é a maneira abaixo:
// Array com times
var meu_array = ['Cruzeiro', 'Flamengo', 'Atlético', 'São Paulo', 'Corinthians'];
for ( var i = 0; i < meu_array.length; i++ ) {
document.write( meu_array[ i ] );
}Nesse caso utilizamos a outra forma de "for", que pode ser encontrada e nosso artigo sobre laços em Javascript.
Outras aulas
Caso tenha perdido a aula anterior, segue o link:
Próxima aula
Caso queira visualizar todas as aulas dessa sessão em ordem cronológica invertida:
