Array do JavaScript

Os arrays JavaScript são usados para armazenar vários valores em um único variável.

Exemplo

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

Experimente Você Mesmo

O que é um array?

Um array é uma variável especial que pode armazenar mais de um valor de uma vez.

Se você tiver uma lista de projetos (por exemplo, uma lista de marcas de carros), armazenar as marcas de carros em uma única variável deve ser assim:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

Mas, e se você quiser percorrer todos os carros e encontrar um valor específico? E se não forem três marcas de carros, mas trêscentas?

A solução é o array!

Um array pode armazenar muitos valores com um único nome e ainda pode acessar esses valores através de referência ao índice.

Criar array

O uso do texto do array é a maneira mais simples de criar um array JavaScript.

Sintaxe:

var array-name = [item1, item2, ...];

Exemplo

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

Experimente Você Mesmo

Os espaços em branco e as quebras de linha não importam. A declaração pode se estender por várias linhas:

Exemplo

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

Experimente Você Mesmo

Não insira vírgula após o último elemento (por exemplo, "BMW",).

Pode haver problemas de compatibilidade entre navegadores.

usando a palavra-chave JavaScript new

O exemplo a seguir também criará um array e o atribuirá valores:

Exemplo

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

Experimente Você Mesmo

Os dois exemplos acima têm o mesmo efeito. Não é necessário usar new Array().

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

elementos do array

Nós acessamosNúmero de índice (subíndice)para referenciar um elemento de array.

Esta instrução acessa o valor do primeiro elemento do cars:

var name = cars[0];

Esta instrução altera o primeiro elemento do cars:

cars[0] = "Opel";

Exemplo

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

Experimente Você Mesmo

[0] é o primeiro elemento do array. [1] é o segundo. Os índices começam em 0.

Mudar elemento do array

Esta instrução altera o valor do primeiro elemento do cars:

cars[0] = "Opel";

Exemplo

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

Experimente Você Mesmo

Acessar o array completo

Através do JavaScript, você pode acessar o array completo usando o nome do array:

Exemplo

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

Experimente Você Mesmo

O array é um objeto

Os arrays são um tipo especial de objeto. No JavaScript, use typeof O operador retornará "object".

No entanto, os arrays do JavaScript são melhor descritos como arrays.

Uso de arraynúmeropara acessar seus "elementos" neste exemplo.person[0] Retorna Bill:

Array:

var person = ["Bill", "Gates", 62];

Experimente Você Mesmo

O uso de objetosNomepara acessar seus "membros" neste exemplo.person.firstName Retorna Bill:

Objeto:

var person = {firstName:"Bill", lastName:"Gates", age:19};

Experimente Você Mesmo

Os elementos do array podem ser objetos

As variáveis do JavaScript podem ser objetos. Os arrays são um tipo especial de objeto.

Por isso, você pode armazenar variáveis de tipos diferentes no mesmo array.

Você pode armazenar objetos em um array. Você pode armazenar funções em um array. Você até pode armazenar arrays dentro de um array:

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

Propriedades e métodos de array

A verdadeira força dos arrays do JavaScript está oculta nas suas propriedades e métodos:

Exemplo

var x = cars.length;   // A propriedade length retorna o número de elementos
var y = cars.sort();   // O método sort() ordena o array

Vamos aprender os métodos de array no próximo capítulo.

Propriedade 'length'

length A propriedade retorna o comprimento do array (número de elementos do array).

Exemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // O comprimento do 'fruits' é 4

Experimente Você Mesmo

length A propriedade sempre é maior que o índice mais alto do array (subíndice).

Acessar o primeiro elemento do array

Exemplo

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

Experimente Você Mesmo

Acessar o último elemento do array

Exemplo

fruits = ["Banana", "Orange", "Apple", "Mango"];
var last = fruits[fruits.length - 1];

Experimente Você Mesmo

Percorrer elementos de um array

O método mais seguro para percorrer um array é usar "for"Loop":

Exemplo

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
     text += "<li>" + fruits[i] + "</li>";
}

Experimente Você Mesmo

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

Exemplo

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
  text += "<li>" + value + "</li>";
}

Experimente Você Mesmo

adicionar elementos ao array

O melhor método para adicionar novos elementos ao array é usar push() Métodos:

Exemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // Adicionar um novo elemento (Lemon) ao fruits

Experimente Você Mesmo

também pode usar length Para adicionar novos elementos ao array, você pode usar

Exemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // Adicionar um novo elemento (Lemon) ao fruits

Experimente Você Mesmo

Aviso!

Adicionar o elemento com o índice mais alto pode criar "buracos" não definidos no array:

Exemplo

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[6] = "Lemon";                 // Adicionar um novo elemento (Lemon) ao fruits

Experimente Você Mesmo

Array associativo

Muitos elementos de programação suportam arrays com índices nomeados.

Arrays com índices nomeados são chamados de arrays associativos (ou hashes).

JavaScript Não há suportearrays com índices nomeados.

No JavaScript, os arrays podem usar apenasíndices numéricos.

Exemplo

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 62;
var x = person.length;          // person.length retorna 3
var y = person[0];              // person[0] retorna "Bill"

Experimente Você Mesmo

Aviso!

Se você usar índices nomeados, o JavaScript redefinirá o array como um objeto padrão.

Após isso, todos os métodos e propriedades dos arrays gerarão resultados incorretos.

Exemplo:

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 62;
var x = person.length;         // person.length retornará 0
var y = person[0];              // person[0] retornará undefined

Experimente Você Mesmo

Diferenças entre array e objeto

no JavaScript,ArrayUseíndices numéricos.

no JavaScript,objetoUseÍndices nomeados.

O array é um tipo especial de objeto que possui índices numéricos.

Quando usar array e quando usar objeto?

  • O JavaScript não suporta arrays associativos
  • Se você quiser que o nome do elemento sejastring (texto)então você deve usarobjeto.
  • Se você quiser que o nome do elemento sejanúmeroentão você deve usarArray.

Evite new Array()

Não há necessidade de usar o construtor de array embutido do JavaScript new Array().

Use [] Em vez disso!

As duas seguintes sentenças diferentes criam um novo array vazio chamado points:

var points = new Array();         // ruim
var points = [];                  // otimo

As duas seguintes sentenças diferentes criam um novo array contendo seis números:

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

Experimente Você Mesmo

new Palavras-chave só complicam o código. Elas também podem gerar resultados inesperados:

var points = new Array(40, 100);  // cria um array contendo dois elementos (40 e 100)

O que acontece se eu remover um dos elementos?

var points = new Array(40);       // cria um array contendo 40 elementos não definidos!!!

Experimente Você Mesmo

Como identificar um array

Um problema comum é: como posso saber se uma variável é um array?

O problema está no operador JavaScript typeof retorna "object“:”

var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits;             // retorna object

Experimente Você Mesmo

O operador typeof retorna "object", pois o JavaScript array é um objeto.

Solução 1:

Para resolver esse problema, o ECMAScript 5 definiu um novo método Array.isArray():

Array.isArray(fruits);     // Retorna true

Experimente Você Mesmo

O problema com essa solução é o ECMAScript 5 Não suporta navegadores antigos.

Solução 2:

Crie a sua própria isArray() A função resolve esse problema:

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

Experimente Você Mesmo

Se o parâmetro for um array, a função acima sempre retornará true.

Ou uma explicação mais precisa é: se o原型 do objeto contém a palavra "Array", então retorna true.

Solução 3:

Se o objeto foi criado pelo construtor fornecido, então instanceof Operador retorna true:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array     // Retorna true

Experimente Você Mesmo