Matrizes JavaScript
Um array é uma variável especial, que pode conter mais de um valor:
const cars = ["Saab", "Volvo", "BMW"];
Por que usar uma matriz?
Se você tiver uma lista de itens (uma lista de nomes de carros, por exemplo), armazenar os carros em variáveis únicas pode ficar assim:
let car1 = "Saab";
let car2 = "Volvo";
let 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 em um único nome e você pode acessar os valores referindo-se a um número de índice.
Criando uma matriz
Usar um literal de array é a maneira mais fácil de criar um array JavaScript.
Sintaxe:
const array_name = [item1, item2, ...];
É uma prática comum declarar arrays com a palavra-chave const .
Saiba mais sobre const com arrays no capítulo: JS Array Const .
Exemplo
const cars = ["Saab", "Volvo", "BMW"];
Espaços e quebras de linha não são importantes. Uma declaração pode abranger várias linhas:
Exemplo
const cars = [
"Saab",
"Volvo",
"BMW"
];
Você também pode criar uma matriz e fornecer os elementos:
Exemplo
const cars = [];
cars[0]= "Saab";
cars[1]= "Volvo";
cars[2]= "BMW";
Usando a palavra-chave JavaScript new
O exemplo a seguir também cria um Array e atribui valores a ele:
Exemplo
const cars = 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 método literal de matriz.
Acessando elementos da matriz
Você acessa um elemento de array referindo-se ao número do índice :
const cars = ["Saab", "Volvo", "BMW"];
let car = cars[0];
Observação: os índices de matriz começam com 0.
[0] é o primeiro elemento. [1] é o segundo elemento.
Alterando um elemento de matriz
Esta instrução altera o valor do primeiro elemento em cars:
cars[0] = "Opel";
Exemplo
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Opel";
Acesse a matriz completa
Com JavaScript, o array completo pode ser acessado consultando o nome do array:
Exemplo
const cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
Matrizes são objetos
Arrays são um tipo especial de objetos. O typeofoperador em JavaScript retorna "objeto" para arrays.
Mas, matrizes JavaScript são melhor descritas como matrizes.
Arrays usam números para acessar seus "elementos". Neste exemplo, person[0]
retorna John:
Variedade:
const person = ["John", "Doe", 46];
Objetos usam nomes para acessar seus "membros". Neste exemplo,
person.firstName
retorna John:
Objeto:
const person = {firstName:"John", lastName:"Doe", age:46};
Elementos de matriz podem ser objetos
Variáveis JavaScript podem ser objetos. Arrays são tipos especiais de objetos.
Por causa disso, você pode ter variáveis de tipos diferentes no mesmo Array.
Você 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] = myCars;
Propriedades e métodos da matriz
A verdadeira força dos arrays JavaScript são as propriedades e métodos de array integrados:
cars.length // Returns the number of elements
cars.sort() // Sorts the array
Os métodos de matriz são abordados nos próximos capítulos.
A propriedade de comprimento
A lengthpropriedade de um array retorna o comprimento de um array (o número de elementos do array).
Exemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let length = fruits.length;
A lengthpropriedade é sempre um a mais do que o índice de matriz mais alto.
Acessando o Primeiro Elemento da Matriz
Exemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[0];
Acessando o último elemento da matriz
Exemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[fruits.length - 1];
Elementos de Matriz em Loop
Uma maneira de percorrer um array é usar um forloop:
Exemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;
let text = "<ul>";
for (let i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text
+= "</ul>";
Você também pode usar a Array.forEach()função:
Exemplo
const fruits = ["Banana", "Orange", "Apple", "Mango"];
let text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function
myFunction(value) {
text += "<li>" + value + "</li>";
}
Adicionando elementos de matriz
A maneira mais fácil de adicionar um novo elemento a um array é usando o push()método:
Exemplo
const fruits = ["Banana", "Orange", "Apple"];
fruits.push("Lemon"); // Adds a new element (Lemon) to fruits
Novo elemento também pode ser adicionado a um array usando a lengthpropriedade:
Exemplo
const fruits = ["Banana", "Orange", "Apple"];
fruits[fruits.length] = "Lemon"; // Adds "Lemon" to fruits
AVISO !
Adicionar elementos com índices altos pode criar "buracos" indefinidos em uma matriz:
Exemplo
const fruits = ["Banana", "Orange", "Apple"];
fruits[6] = "Lemon"; // Creates undefined "holes" in fruits
Matrizes Associativas
Muitas linguagens de programação suportam arrays com índices nomeados.
Arrays com índices nomeados são chamados de arrays associativos (ou hashes).
JavaScript não suporta arrays com índices nomeados.
Em JavaScript, arrays sempre usam índices numerados .
Exemplo
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length; // Will return 3
person[0]; // Will return "John"
AVISO !!
Se você usar índices nomeados, o JavaScript redefinirá a matriz para um objeto.
Depois disso, alguns métodos e propriedades de array produzirão resultados incorretos .
Exemplo:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // Will return 0
person[0]; // Will return undefined
A diferença entre arrays e objetos
Em JavaScript, arrays usam índices numerados .
Em JavaScript, os objetos usam índices nomeados .
Arrays são um tipo especial de objetos, com índices numerados.
Quando usar matrizes. Quando usar objetos.
- 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 .
JavaScript nova Matriz()
JavaScript tem um construtor de array embutido new Array().
Mas você pode usar com segurança []em vez disso.
Essas duas instruções diferentes criam um novo array vazio chamado points:
const points = new Array();
const points = [];
Essas duas declarações diferentes criam uma nova matriz contendo 6 números:
const points = new Array(40, 100, 1, 5, 25, 10);
const points = [40, 100, 1, 5, 25, 10];
A newpalavra-chave pode produzir alguns resultados inesperados:
// Create an array with three elements:
const points = new Array(40, 100, 1);
// Create an array with two elements:
const points = new Array(40, 100);
// Create an array with one element ???
const points = new Array(40);
Um erro comum
const points = [40];
não é o mesmo que:
const points = new Array(40);
// Create an array with one element:
const points = [40];
// Create an array with 40 undefined elements:
const points = new Array(40);
Como reconhecer uma matriz
Uma pergunta comum é: Como saber se uma variável é um array?
The problem is that the JavaScript operator typeof returns
"object":
const fruits = ["Banana", "Orange", "Apple"];
let type = typeof fruits;
The typeof operator returns object because a JavaScript array is an object.
Solution 1:
To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
Array.isArray(fruits);
Solution 2:
The instanceof operator returns true if an object is created
by a given constructor:
const fruits = ["Banana", "Orange", "Apple"];
fruits instanceof Array;
Complete Array Reference
For a complete Array reference, go to our:
Complete JavaScript Array Reference.
The reference contains descriptions and examples of all Array properties and methods.