JavaScript Arrays

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")

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];

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

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

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"

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.

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

Vídeo

Introdução ao JavaScript

Curso