Entendendo Arrays no JavaScript

Arrays em JavaScript s�o usados para armazenar v�rios valores em uma �nica vari�vel.

Guia do artigo:

O que � um Array?
Criando um Array
Usando novos Arrays no JavaScript
Acessando um Array completo
Arrays s�o objetos
Elementos do Array podem ser objetos
Proriedade e M�todos do Array
A Propriedade length
Iterando sobre os itens de um array
Adicionando elementos a um Array
Arrays associativos
A Diferença entre Arrays e Objetos
Como evitar um novo array()
Como reconhecer um Array

Exemplo:


var carros = ["Saab", "Volvo", "BMW"]

O que � um Array?

Um Array � uma vari�vel especial, que pode conter mais de um valor por vez.

Curso relacionado: Curso de JavaScript

Se voc� tem uma lista de itens (uma lista de nomes de carros, por exemplo), armazenar os carros em vari�veis individuais pode ser assim:


var carro1 = "Saab";
var carro2 = "Volvo";
var carro3 = "BMW";

No entanto, e se voc� quiser percorrer os carros e encontrar um espec�fico? E se voc� n�o tivesse 3 carros, mas 300?

A soluç�o � um Array!

Um Array pode armazenar muitos valores com um �nico nome, e voc� pode acessar os valores consultando um n�mero de �ndice.

Criando um Array

Usar um Array literalmente � a maneira mais f�cil de criar um Array de JavaScript. C�digo:


var array_name = [item1, item2, ...]

Exemplo:


var carros = [ "Saab", "Volvo", "BMW" ]

Espaços e quebras de linha n�o s�o importantes. Uma declaraç�o pode abranger v�rias linhas:


var carros = [
    "Saab",
    "Volvo",
    "BMW"
];

Usando novos Arrays no JavaScript

O exemplo a seguir tamb�m cria um Array e atribui valores a ela:


var carros = new Array("Saab", "Volvo", "BMW")

Os dois exemplos acima fazem exatamente o mesmo. N�o � necess�rio usar o novo Array(). Por simplicidade, legibilidade e velocidade de execuç�o, use o primeiro (m�todo literal do Array).

Acesse os elementos de um Array

Voc� se refere a um elemento do Array referente ao n�mero de �ndice. Esta declaraç�o acessa o valor do primeiro elemento em carros:


var name = carros[0];

Esta declaraç�o modifica o primeiro elemento em carros:

carros[0] = "Opel";

Examplo


var carros = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = carros[0];

[0] � o primeiro elemento em um Array. [1] � o segundo. Os �ndices do Array começam com 0.

Acessando um Array completo

Com o JavaScript, � poss�vel acessar a matriz completa consultando o nome do Array:


var carros = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = carros;

Arrays s�o objetos

Arrays s�o um tipo especial de objetos. O tipo de operador em JavaScript retorna "objeto" para arrays. Mas, os arrays de JavaScript s�o melhor descritos como arrays.

Arrays usam n�meros para acessar seus "elementos". Neste exemplo, a pessoa[0] retorna Carlos:


var pessoa = [ "Carlos", "Silva", 46 ];

Os objetos usam nomes para acessar seus "membros". Neste exemplo, pessoa.primeiroNome retorna Carlos:


var pessoa = {primeiroNome:"Carlos", lastName:"Silva", age:46};

Elementos do Array podem ser objetos

OAs vari�veis de JavaScript podem ser objetos. Arrays s�o tipos especiais de objetos. Por isso, voc� pode ter vari�veis de diferentes tipos no mesmo Array.

OVoc� pode ter objetos em um Array. Voc� pode ter funç�es em um Array. Voc� pode ter Arrays em um Array:


myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = mycarros;

Proriedade e M�todos do Array

A força real dos Arrays de JavaScript s�o as propriedades e m�todos do Array incorporada:


var x = carros.length;   // A propriedade length retorna o n�mero de elementos
var y = carros.sort();   // O m�todo sort() classifica os arrays

Os m�todos do Array s�o abordados nos pr�ximos cap�tulos.

A Propriedade length

A propriedade length de um Array retorna o comprimento de um Array (o n�mero de elementos do Array).


var frutas = ["Banana", "Laranja", "Maça", "Manga"];
frutas.length;                       // o length de frutas � 4

A propriedade length � sempre mais do que o �ndice do Array mais alto.

Iterando sobre os itens de um array

A melhor maneira de percorrer um Array � usando um loop "for":


var frutas, text, fLen, i;

frutas = ["Banana", "Laranja", "Maça", "Manga"];
fLen = frutas.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + frutas[i] + "</li>";
}

Adicionando elementos a um Array

A maneira mais f�cil de adicionar um novo elemento a um Array � usar o m�todo push:


var frutas = ["Banana", "Laranja", "Maça", "Manga"];
frutas.push("Lim�o");  // acrescenta o novo elemento (lim�o) �s frutas

Novos elementos tamb�m podem ser adicionado a um array usando a propriedade length:


var frutas = ["Banana", "Laranja", "Maça", "Manga"];
frutas[frutas.length] = "Lim�o";     // Adiciona o novo elemento (Lim�o) a frutas

ATENÇ�O!
A adiç�o de elementos com �ndices altos pode criar "buracos" indefinidos em um array:

Veja:


var frutas = ["Banana", "Laranja", "Maça", "Manga"];
frutas[6] = "Lim�o";                 // Adiciona o novo elemento (Lim�o) a frutas

Arrays associativos

Muitas linguagens de programaç�o suportam arrays com �ndices nomeados. Arrays com �ndices nomeados s�o chamados arrays associativas (ou hashes). O JavaScript n�o suporta arrays com �ndices nomeados.

Em JavaScript, os arrays sempre usam �ndices numerados.


var pessoa = [];
pessoa[0] = "Carlos";
pessoa[1] = "Silva";
pessoa[2] = 46;
var x = pessoa.length;         // pessoa.length will return 3
var y = pessoa[0];             // pessoa[0] will return "Carlos"

ATENÇ�O!
Se voc� usa �ndices nomeados, o JavaScript redefinir� a array para um objeto padr�o. Depois disso, alguns m�todos e propriedades do array produzir�o resultados incorretos.

Veja:


var pessoa = [];
pessoa["Nome"] = "Carlos";
pessoa["Sobrenome"] = "Silva";
pessoa["age"] = 46;
var x = pessoa.length;         // pessoa.length ir� retonar 0
var y = pessoa[0];             // pessoa[0] retornar� indefinido

A Diferença entre Arrays e Objetos

Em JavaScript, os arrays usam �ndices numerados.

Em JavaScript, os objetos usam �ndices nomeados.

Arrays s�o um tipo especial de objetos, com �ndices numerados.

Quando usar Arrays. Quando usar Objetos.

O JavaScript n�o suporta arrays associativos.
Voc� deve usar objetos quando quiser que os nomes dos elementos sejam strings(texto).
Voc� deve usar arrays quando quiser que os nomes dos elementos sejam n�meros.

Como evitar um novo array()

N�o h� necessidade de usar o construtor de arrays do JavaScript em um novo Array(). Use [] em vez disso.

Essas duas declaraç�es diferentes criam um novo Array vazio chamado points:


var points = new Array();         // Errado
var points = [];                  // OK

Estas duas declaraç�es diferentes criam um novo Array com 6 n�meros:


var points = new Array(40, 100, 1, 5, 25, 10); // Errado
var points = [40, 100, 1, 5, 25, 10];          // OK

O new s� complica o c�digo. Tamb�m pode produzir alguns resultados inesperados:


var points = new Array(40, 100);  // Cria um Array com dois elementos (40 e 100)

E se eu remover um dos elementos?


var points = new Array(40);       // Cria um Array com 40 elementos indefinidos!

Como reconhecer um Array

Uma pergunta comum �: como eu sei se uma vari�vel � um Array?

O problema � que o operador JavaScript typeof retorna o "objeto":


var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;             // retorna o object

O operador tipoof retorna o objeto porque um Array no JavaScript � um objeto.

Soluc�es para reconhecer um Array

Para resolver este problema, o ECMAScript 5 define um novo m�todo Array.isArray():


Array.isArray(fruits);     // retorna true

Para resolver este problema, voc� pode criar sua pr�pria funç�o isArray():


function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}

A funç�o acima sempre retorna true se o argumento for um Array. Ou mais precisamente: ele retorna verdadeiro se o prot�tipo do objeto contiver a palavra "Array".

O instanceof do operador retorna true se um objeto for criado por um determinado construtor:


var fruits = ["Banana", "Laranja", "Maça", "Manga"];

fruits instanceof Array     // retorna true

Confira tamb�m

Evoluç�o do JavaScript

V�deo

Apresentando o Node.js