matrizes de JavaScript são usados para armazenar vários valores em uma única variável.
Exibindo Arrays
Neste tutorial, vamos utilizar um script para exibir matrizes dentro de um <p> elemento com id="demo" :
Exemplo
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
A primeira linha (no script) cria uma matriz chamada carros.
A segunda linha "encontra" o elemento com id="demo" , e "displays" a matriz na "innerHTML" dele .;
Tente você mesmo
Criar uma matriz e atribuir valores a ele:
Espaços e quebras de linha não são importantes. A declaração pode abranger várias linhas:
Nunca coloque uma vírgula após o último elemento (como "BMW" ,).
O efeito é inconsistente entre os navegadores.
O que é uma matriz?
Uma matriz é uma variável especial, que pode conter mais de um valor de cada vez.
Se você tem uma lista de itens (a lista de nomes de carro, por exemplo), armazenando os carros em variáveis individuais poderia ser assim:
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
No entanto, se você quiser percorrer os carros e encontrar um específico? E se você não tiveram 3 carros, mas 300?
A solução é uma matriz!
Uma matriz pode conter muitos valores sob um único nome, e você pode acessar os valores por referência a um número de índice.
Como criar uma matriz
Usando uma matriz literal é a maneira mais fácil de criar uma matriz de JavaScript.
Sintaxe:
var array-name = [ item1 , item2 , ...];
Exemplo:
var cars = ["Saab", "Volvo", "BMW"];Usando o novo JavaScript Keyword
O exemplo a seguir também cria uma matriz e atribui valores a ele:
Os dois exemplos acima fazem exatamente a mesma. Não há necessidade de usar new Array() .
Por simplicidade, legibilidade e velocidade de execução, use o primeiro (o método literal de matriz).
Acessar os elementos de um array
Você se refere a um elemento de matriz referindo-se aonúmero de índice.
Esta afirmação acessa o valor do primeiro elemento em carros:
var
name = cars[0];
Esta declaração modifica o primeiro elemento em carros:
cars[0] = "Opel";
[0] é o primeiro elemento de uma matriz. [1] é o segundo. índices de matriz começam com 0.
Você pode ter diferentes objetos em uma matriz
variáveis JavaScript podem ser objetos. Arrays são tipos especiais de objetos.
Devido a isso, 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 arrays em um array:
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
Arrays são objetos
Arrays são um tipo especial de objetos. O typeof operador em JavaScript retorna "object" para matrizes.
Mas, matrizes de JavaScript são melhor descritos como matrizes.
Arrays usar numbers para acessar seus "elements" . Neste exemplo, person[0] retorna John :
Objetos usar nomes para acessar seus "membros". Neste exemplo, person.firstName retorna John :
Array Properties e Métodos
A verdadeira força de matrizes de JavaScript são o built-in propriedades da matriz e métodos:
Exemplos
var x = cars.length;
// The length property returns the number of elements in cars
var y = cars.sort();
// The sort() method sort cars in alphabetical order
métodos de array são abordados no próximo capítulo.
A propriedade de comprimento
O length estabelecimento de uma matriz retorna o comprimento de uma matriz (o número de elementos da matriz).
Exemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length; // the length of fruits is 4
Tente você mesmo " A propriedade de comprimento é sempre um a mais que o maior índice de matriz.
Adicionando elementos de matriz
A maneira mais fácil para adicionar um novo elemento a uma matriz está usando o método push:
Exemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // adds a new element (Lemon) to fruits Tente você mesmo " Nova elemento também pode ser adicionado a uma matriz usando o length propriedades:
Exemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon"; // adds a new element (Lemon) to fruits Tente você mesmo " ATENÇÃO !
Adicionando elementos com altos índices podem criar indefinidos "holes" em uma matriz:
Exemplo
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon"; // adds a new element (Lemon) to fruits Tente você mesmo " Looping elementos de matriz
A melhor maneira de loop através de uma matriz, está usando um "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>";
}
Tente você mesmo " Arrays associativos
Muitas linguagens de programação suportam arrays com índices nomeados.
Arrays com índices chamados são chamados de matrizes associativas (ou hashes).
O JavaScript não suporta matrizes com índices nomeados.
Em JavaScript, matrizes sempre usar índices numerados.
Exemplo
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;
// person.length will return 3
var y = person[0];
// person[0] will return "John" Tente você mesmo " ATENÇÃO !!
Se você usar um índice chamado, JavaScript irá redefinir a matriz para um objeto padrão.
Depois disso, todos os métodos e propriedades de Array irá produzir resultados incorretos.
Exemplo:
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length; // person.length will
return 0
var y = person[0];
// person[0] will return undefined Tente você mesmo " A diferença entre matrizes e objetos
Em JavaScript, matrizes usar índices numerados.
Em JavaScript, objetos usar índices nomeado.
Arrays são um tipo especial de objetos, com índices numerados.
Quando usar Arrays. Quando usar objetos.
- O JavaScript não suporta matrizes associativas.
- Você deve usar objetos quando você quer os nomes dos elementos para ser strings (texto).
- Você deve usar matrizes quando quiser os nomes dos elementos para ser números.
Evite new Array()
Não há necessidade de usar o construtor de matriz built-in do JavaScript new Array() .
Use [] em vez disso.
Estas duas declarações diferentes, tanto criar uma nova matriz pontos vazio chamado:
var points = new Array();
// Bad
var points = [];
// Good
Estas duas declarações diferentes ambas criar uma nova matriz contendo 6 números:
var points = new Array(40, 100, 1, 5, 25, 10) // Bad
var points = [40, 100, 1, 5, 25, 10];
// Good
Tente você mesmo " A new palavra-chave só complica o código. Ela também pode produzir alguns resultados inesperados:
var points = new Array(40, 100); // Creates an array with two elements (40 and 100)O que se eu remover um dos elementos?
var points = new Array(40); // Creates an array with 40 undefined elements !!!!! Tente você mesmo " Como reconhecer um Array
Uma pergunta comum é: Como posso saber se uma variável é uma matriz?
O problema é que o operador JavaScript typeof retorna "objeto":
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; // returns object Tente você mesmo " O operador typeof retorna objeto porque uma matriz de JavaScript é um objeto.
Solução 1:
Para resolver este problema ECMAScript 5 define um novo método Array.isArray() :
Array.isArray(fruits); // returns true Tente você mesmo " O problema com esta solução é que ECMAScript 5 não é suportado em navegadores mais antigos.
Solução 2:
Para resolver esse problema, você pode criar seu próprio isArray() função:
function isArray(x) {
return
x.constructor.toString().indexOf("Array") > -1;
} Tente você mesmo " A função acima sempre retorna true se o argumento é uma matriz.
Ou mais precisamente: ele retorna verdadeiro se o protótipo objeto contém a palavra "matriz".
Solução 3:
O instanceof retorna verdadeiro se um objeto é criado por um determinado construtor:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array // returns true Tente você mesmo " Teste-se com exercícios!
Exercício 1 » Exercício 2» Exercício 3 » Exercício 4» Exercício 5 »