Matrizes são usadas para armazenar diferentes valores em uma única variável na forma de uma lista em a numeração de cada item na lista começa de 0 e termina no item de número igual o tamanho da lista menos um.

var carros = ["Saab", "Volvo", "BMW"];
var primeiroCarro = carros[0];
var ultimoCarro = carros[carros.length-1];

O que é uma matriz?

Uma matriz é uma variável especial, que pode conter mais de um valor por vez.

Se você tiver uma lista de itens (uma lista de nomes de carros, por exemplo), o armazenamento dos carros em variáveis únicas pode ter a seguinte aparência:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "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 é uma matriz!

Uma matriz pode conter muitos valores com um único nome e você pode acessar os valores consultando um número de índice.

Criando uma matriz

Usar um literal de matriz é a maneira mais fácil de criar uma matriz JavaScript.

Sintaxe com exemplo:

var array_nome = [item1, item2,...];     
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"
];

Colocar uma vírgula após o último elemento (como "BMW") é inconsistente nos navegadores.

IE 8 e versões anteriores falharão.

A Palavra-Reservada new

O exemplo a seguir também cria uma matriz e atribui valores a ela:

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

Os dois exemplos acima fazem exatamente o mesmo. Não há necessidade de usar new Array().

Para simplicidade, legibilidade e velocidade de execução, use o primeiro (o método literal do array).

Acessar os elementos de uma matriz

Você acessa um elemento da matriz consultando o número do índice.

Esta instrução acessa o valor do primeiro elemento em carros:

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

Nota: Os índices da matriz começam com 0: [0] é o primeiro elemento. [1] é o segundo elemento.

Alterar um Elemento da Matriz

Esta declaração altera o valor do primeiro elemento em carros:

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

Acessar a Matriz Completa

Com JavaScript, a matriz completa pode ser acessada consultando o nome da matriz:

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

document.getElementById("demo").innerHTML = carros;

Matrizes são Objetos

Matrizes são um tipo especial de objetos. O operador typeof em JavaScript retorna object para matrizes.

Matrizes usam índices numéricos com valores inteiros para acessar os elementos nela armazenados.

No exemplo a seguir, pessoa[0] retorna João:

Matriz:

var pessoa = ["João", "José", 46];

Objetos usam nomes para acessar seus "membros". No exemplo a seguir, pessoa.primeiroNome retorna João:

Objeto:

var pessoa = {primeiroNome:"João", ultimoNome:"José", age:46};

Elementos da Matriz Podem ser Objetos

Variáveis podem ser objetos. Matrizes são tipos especiais de objetos.

Por esse motivo, você pode ter variáveis de tipos diferentes na mesma matriz.

Você pode ter objetos em uma matriz. Você pode ter funções em uma matriz. Você pode ter matrizes em uma matriz.

Propriedades e Métodos da Matriz

A força real das matrizes JavaScript são as propriedades e métodos internos da matriz:

Exemplos

var x = carros.length;   // The length property retorna o number de elements
var y = carros.sort();   // The sort() método sorts arrays

Métodos de matriz são abordados nos próximos capítulos.

A propriedade length

A propriedade length de uma matriz retorna o seu comprimento (o número de elementos da matriz).

var frutas = ["Banana", "Laranja", "Maçã", "Manga"];
var tamanho = frutas.length;   // o comprimento das matriz frutas é 4
A propriedade length é sempre o valor do maior índice da matriz mais um.

Acessando o primeiro elemento de matriz

frutas = ["Banana", "Laranja", "Maçã", "Manga"];
var primeiro = frutas[0];

Acessando o elemento Last Array

frutas = ["Banana", "Laranja", "Maçã", "Manga"];
var ultimo = frutas[frutas.length - 1];

Elementos de Matriz em Loop

A maneira mais segura de fazer um loop através de uma matriz é usando um forloop:

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

Você também pode usar a função Array.forEach():

var frutas, text;
frutas = ["Banana", "Laranja", "Maçã", "Manga"];
text = "<ul>";
frutas.forEach(minhaFuncao);
text += "</ul>";
function minhaFuncao(value) {
  text += "<li>" + value + "</li>";
}

Adicionar na Matriz

A maneira mais fácil de adicionar um novo elemento a uma matriz é usando o método push():

var frutas = ["Banana", "Laranja", "Maçã", "Manga"];
frutas.push("Lemon");    // adds a new elemento (Lemon) to frutas

Novo elemento também pode ser adicionado a uma matriz usando a propriedade length:

var frutas = ["Banana", "Laranja", "Maçã", "Manga"];
frutas[frutas.length] = "Lemon";    // adds a new elemento (Lemon) to frutas

ATENÇÃO

Adicionar elementos com índices altos pode criar "buracos" indefinidos em uma matriz:

var frutas = ["Banana", "Laranja", "Maçã", "Manga"];
frutas[6] = "Lemon";    // adds a new elemento (Lemon) to frutas

Matrizes associativas

Muitas linguagens de programação suportam matrizes com índices nomeados.

Matrizes com índices nomeados são chamadas matrizes associativas (ou hashes).

O JavaScript não suporta matrizes com índices nomeados.

No JavaScript, as matrizes sempre usam índices numerados.

var pessoa = [];
pessoa[0] = "João";
pessoa[1] = "José";
pessoa[2] = 46;
var x = pessoa.length;     // pessoa.length will return 3
var y = pessoa[0];         // pessoa[0] will return "João"

ATENÇÃO

Se você usar índices nomeados, o JavaScript redefinirá a matriz para um objeto padrão.

Depois disso, alguns métodos e propriedades da matriz produzirão resultados incorretos.

var pessoa = [];
pessoa["primeiroNome"] = "João";
pessoa["ultimoNome"] = "José";
pessoa["age"] = 46;
var x = pessoa.length;     // pessoa.length will return 0
var y = pessoa[0];         // pessoa[0] will return undefined

A diferença entre Matrizes e Objetos

Em JavaScript, matrizes usam índices numerados.

No JavaScript, os objetos usam índices nomeados.

Matrizes são um tipo especial de objetos, com índices numerados.

Quando Usar Matrizes. Quando Usar Objetos.

O JavaScript não suporta matrizes associativas.

Você deve usar objetos quando desejar que os nomes dos elementos sejam cadeias de caracteres (texto).

Você deve usar matrizes quando quiser que elementos sejam acessados com índices numéricos.

Evitar new Array()

Não há necessidade de usar-se o construtor interno de matriz new Array ().

Use [] ao vez disso.

Essas duas instruções diferentes criam uma nova matriz vazia denominada points:

var points = new Array();   // Ruim
var points = [];            // Bom

Essas duas instruções diferentes criam uma nova matriz contendo 6 números:

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

A palavra-chave new não complica apenas o código. Também pode produzir alguns resultados inesperados:

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

E se eu remover um dos elementos?

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

Como Reconhecer uma Matriz

Uma pergunta comum é: como sei se uma variável é uma matriz?

O problema é que o operador JavaScript typeof retorna object:

var frutas = ["Banana", "Laranja", "Maçã", "Manga"];
var x = typeof frutas;   // x === "object"

O operador typeof retorna o object porque uma matriz JavaScript é um objeto.

Solução 1: Para resolver esse problema, o ECMAScript 5 define um novo método Array.isArray():

Array.isArray(frutas);   // retorna true

O problema com esta solução é que o ECMAScript 5 não é suportado em navegadores mais antigos.

Solução 2: Para resolver esse problema, você pode criar sua própria isArray()função:

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

A função acima sempre retorna true se o argumento for uma matriz.

Ou, mais precisamente: retorna true se o protótipo do objeto contiver a palavra "Array".

Solução 3: O operador instanceof retornará true se um objeto for criado por um determinado construtor:

var frutas = ["Banana", "Laranja", "Maçã", "Manga"];
frutas instanceof Array;   // returna true

Matrizes