Array

Sumário

O objeto global Array do JavaScript é um construtor para arrays, os quais são objetos do tipo lista de alto nível.

Criar um Array

var frutas = ["Maçã", "Banana"];

console.log(frutas.length);
// 2

Acessar um item do Array

var primeiro = frutas[0];
// Maçã

var ultimo = frutas[frutas.length - 1];
// Banana

Iterar um Array

frutas.forEach(function (item, index, array) {
  console.log(item, index);
});
// Maçã 0
// Banana 1

Adicionar um item no final do Array

var adicionar = frutas.push("Laranja");
// ["Maçã", "Banana", "Laranja"]

Remover um item no final do Array

var ultimo = frutas.pop(); // remove laranja (do final)
// ["Maçã", "Banana"];

Remover do início do Array

var primeiro = frutas.shift(); // remove Maçã do início
// ["Banana"];

Adicionar no início do Array

var adicionar = frutas.unshift("Morango") // adiciona ao início
// ["Morango", "Banana"];

Procurar o índice de um item do Array

frutas.push("Manga");
// ["Morango", "Banana", "Manga"]

var pos = frutas.indexOf("Banana");
// 1

Remover um item pela posição do índice

var removedItem = frutas.splice(pos, 1); // é assim que se remove um item
// ["Morango", "Manga"]

Copiar um Array

var copiar = frutas.slice(); // é assim que se copia
// ["Morango", "Manga"]

Sintaxe

[element0, element1, ..., elementN]
new Array(element0, element1, ..., elementN)
new Array(arrayLength)

element0, element1, ..., elementN

Um array JavaScript é inicializado com os elementos fornecidos,  exceto no caso onde um único argumento é passado para o construtor do Array e esse argumento é um número. (Veja abaixo.) Note que esse caso especial só se aplica para os arrays JavaScript criados com o construtor Array , e não com literais de array criados com [ e ].

arrayLength

Se o único argumento passado para o construtor do Array for um número inteiro entre 0 and 2³²-1 (inclusive), um novo array com o tamanho desse número é retornado. Se o argumento for qualquer outro número, um RangeError exception é lançado.

Descrição

Arrays são objetos do tipo lista que vêm com uma série de  métodos embutidos para realizar operações de travessia e mutação. Nem o tamanho de um array JavaScript nem os tipos de elementos são fixos. Já que  o tamanho de um array pode crescer ou encolher a qualquer tempo, arrays JavaScript não tem a garantia de serem densos. De uma maneira geral, essas são características convenientes; mas se esses recursos não são desejáveis para o seu caso em particular, você pode considerar usar arrays tipados.

Algumas pessoas pensam que  não se deve usar um array como um array associativo. Ao invés disso, você pode usar objects, entretanto, fazer dessa forma tem os seus próprios problemas. Veja o post Lightweight JavaScript dictionaries with arbitrary keys como um exemplo.

Accessando elementos de um array 

Arrays javaScript começam com índice zero; o primeiro elemento de um array está na posição 0 e o último elemento está na  posição equivalente ao valor da propriedade length (tamanho) menos 1.

var arr = ["esse é o primeiro elemento", "esse é o segundo elemento"];
console.log(arr[0]);              // prints "esse é o primeiro elemento"
console.log(arr[1]);              // prints "esse é o segundo elemento"
console.log(arr[arr.length - 1]); // prints "esse é o segundo elemento"

Elementos Array são somente propriedades de objetos, da forma que toString é uma propriedade. Contudo, note que tentando acessar o primeiro elemento de um array da seguinte forma irá passar por um erro de sintaxe:

console.log(arr.0);

Note que não há nada exclusivo a respeito de arrays JavaScript e suas propriedades que causam isso. As propriedades JavaScript que começam com um dígito não podem ser referenciadas com um ponto. Elas necesitam usar notações de sintaxe corretas (bracket notation) para poderem ser acessadas. Por exemplo, se você tivesse um objeto com a propriedade "3d", isso também teria que ser referenciado usando notações de sintaxe corretas (bracket notation) e não somente um ponto. Essa similariedade é exibida nos 2 exemplos de código a seguir:

var anos = [1950, 1960, 1970, 1980, 1990, 2000, 2010];
try {
  console.log(anos.0);
}
catch (ex) {
  console.log("Usando a notação de suporte");
  console.log(anos[0]);
}

try {
  renderer.3d.setTexture(model, "character.png");
}
catch (ex) {
  console.log("Using bracket notation");
  renderer["3d"].setTexture(model, "character.png");
}

Note que no terceiro exemplo, "3d" teve de ser entre parenteses. É possivel também definir os índices do Array JavaScript também (ou seja, years["2"] ao invés de years[2]), contudo isto não é necessário. O valor 2 em years[2] eventualmente será forçado para uma string pela engine do JavaScript, de qualquer maneira, através de uma conversão explicita com o método toString. E é por esta razão que  "2" e "02" irão se referenciar para dois slots diferentes no objeto years e o seguinte exemplo será true:

console.log(anos["2"] != anos["02"]);

Relação entre length e propriedades numéricas

As propriedades length e numércas de um array Javascript são conectadas. Varios dos métodos javascript pré-definidos (por exemplo, join, slice, indexOf, etc.) levam em conta o valor da propriedade length de um array quando eles são chamados. Outros métodos (por exemplo, push, splice, etc.) também resultam em uma atualização na propriedade length do array.

var frutas = [];
frutas.push("banana", "maça", "pêssego");

console.log(frutas.length); // 3

Quando configurar uma propriedade num array Javascript em que a propriedade é um índice valido do array e este índice esta fora do atual limite do array, o array irá crescer para um tamanho grande o suficiente para acomodar o elemento neste índice, e a engine irá atualizar a propriedade length do array de acordo com isto:

frutas[3] = "manga";
console.log(frutas[3]);
console.log(frutas.length); // 4

Configurar a propriedade length, diretamente, também resulta em um comportamento especial.

frutas.length = 10;
console.log(frutas);        // O array é configurado com undefined
console.log(frutas.length); // 10

Isto é explicado melhor na página sobre length.

Criando um array usando o resultado de uma comparação

O resultado de uma comparação entre uma regular expression e uma string pode criar um array Javascript. Este array tem propriedades e elementos que disponibilizam informações sobre a comparação. Um array é o valor de retorno dos métodos RegExp.exec, String.match, and String.replace. Para explicar melhor sobre estas propriedades e elementos, veja o seguinte exemplo e então localize-se com a tabela abaixo:

// Encontra um d seguido por um ou mais b's seguido por um d
// Salva os b's encontrados e o seguinte d
// Ignora maiúsculas e minúsculas

var minhaRegex = /d(b+)(d)/i;
var meuArray = minhaRegex.exec("cdbBdbsbz");

As propriedades e elementos retornados desta comparação são os seguintes:

Propriedades

For properties available on Array instances, see Properties of Array instances.

prototype

Permite a adição de propriedades para todos os objetos.

Métodos

isArray Requires JavaScript 1.8.5

Retorna true se a variável for um array, se não retorna false.

Array instances

Todas as instâncias Array herdam de Array.prototype. Como em todos os construtores, voce pode trocar o construtor do objeto prototype para fazer modificações à todas as instancias de Array Javascript.

Propriedades

Métodos

Métodos modificadores

Métodos de acesso

Métodos de iteração

Métodos genéricos de Array

Algumas vezes voce poderá querer aplicar métodos de arrays para strings ou outros objetos parecidos com arrays (como em arguments de funções). Por fazer isto, voce trata uma string como um array de caracteres (ou em outros casos onde trata-se não-arrays como um array).  Por exemplo,  para checar se cada caractere em uma varivável str é uma letra, poderia-se escrever:

function isLetter(character) {
  return (character >= "a" && character <= "z");
}

if (Array.prototype.every.call(str, isLetter))
  alert("A string '" + str + "' contém somente letras!");

Esta notação é um pouco inútil e o JavaScript 1.6 introduziu o seguinte atalho genérico:

if (Array.every(isLetter, str))
  alert("A string '" + str + "' contém somente letras!");

Generics também estão disponíveis em String.

Estes não são atualmente parte dos padrões ECMAScript (através do ES6 Array.from() pode ser usado para conseguir isto). A seguir segue uma adaptação para permitir o uso em todos os navegadores:

/*globals define*/
// Assumes Array extras already present (one may use shims for these as well)
(function () {
    'use strict';

    var i,
        // We could also build the array of methods with the following, but the
        //   getOwnPropertyNames() method is non-shimable:
        // Object.getOwnPropertyNames(Array).filter(function (methodName) {return typeof Array[methodName] === 'function'});
        methods = [
            'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift',
            'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf',
            'forEach', 'map', 'reduce', 'reduceRight', 'filter',
            'some', 'every', 'isArray'
        ],
        methodCount = methods.length,
        assignArrayGeneric = function (methodName) {
            var method = Array.prototype[methodName];
            Array[methodName] = function (arg1) {
                return method.apply(arg1, Array.prototype.slice.call(arguments, 1));
            };
        };

    for (i = 0; i < methodCount; i++) {
        assignArrayGeneric(methods[i]);
    }
}());

Exemplos

Exemplo: Criando um array

O exemplo a seguir cria um array, msgArray, com length 0, então atribui valores para msgArray[0] e msgArray[99], trocando o length do array para 100.

var msgArray = new Array();
msgArray[0] = "Hello";
msgArray[99] = "world";

if (msgArray.length == 100)
   print("O length é 100.");

Exemplo: Criando um array bi-dimensional

O exemplo a seguir cria um tabuleiro de xadrez usando dois arrays bi-dimensionais de string. A primeira jogada é feita copiando o 'p' em 6,4 para 4,4.  A posição antiga de 6,4 é colocada em branco.

var board = 
[ ['R','N','B','Q','K','B','N','R'],
  ['P','P','P','P','P','P','P','P'],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  [' ',' ',' ',' ',' ',' ',' ',' '],
  ['p','p','p','p','p','p','p','p'],
  ['r','n','b','q','k','b','n','r']];
print(board.join('\n') + '\n\n');

// Fazendo o King's Pawn avançar 2
board[4][4] = board[6][4];
board[6][4] = ' ';
print(board.join('\n'));

Segue o output:

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
 , , , , , , , 
p,p,p,p,p,p,p,p
r,n,b,q,k,b,n,r

R,N,B,Q,K,B,N,R
P,P,P,P,P,P,P,P
 , , , , , , , 
 , , , , , , , 
 , , , ,p, , , 
 , , , , , , , 
p,p,p,p, ,p,p,p
r,n,b,q,k,b,n,r

Especificações

Compatibilidade com os navegadores

Ver também

• "Indexing object properties" in JavaScript Guide: "Working with objects"
• New in JavaScript 1.7: Array comprehensions
• New in JavaScript 1.6: Array extras
• Draft: Typed Arrays