Usamos arrays em Javascript para armazenar vários valores em uma única variável. No caso do Javascript, podemos armazenar valores de tipos diferentes. Com os arrays poupamos o esforço de criar uma variável para cada item a ser armazenado numa lista.
Cada item de dados armazenado em array é chamado de elemento. Cada elemento possuí um valor de índice, o que permite distinguir cada elemento dentro da estrutura. O Javascript não suporta arrays associados.
Para criar variáveis em array, também se pode usar o nome dela seguido de um underline e a palavra array (tipo teste_array), e os itens ficam entre colchetes, separados por vírgulas. Veja um exemplo:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
Para criar um array como objeto, você coloca new Array logo após a atribuição, e nesse caso não se usa colchetes, e sim parênteses. Para testar se um elemento é array, você usa o método Array.isArray, entre parênteses, ele deverá retornar true ou false. Veja um exemplo:
var cordas = new Array("Violão", "Guitarra", "Cavaquinho", "Bandolim");
document.write(Array.isArray(cordas) + "<br/>");
PS: Em qualquer situação, todo array é um objeto.
Para ler os elementos em array, se usa o número de índice do elemento (lembrando que ele começa do 0), veja mais um exemplo:
var instrumento = cordas[0];
document.write("O instrumento é " + instrumento);
Podemos também ler todo o conteúdo de um array efetuando um loop em seus elementos, assim:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
for(let i = 0; i < 3; i++) {
document.write(cordas[i] + "<br/>");
}
E no caso dos vetores, podemos simplificar com um for it, assim:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
for(let c of cordas) { // For com iterator
document.write(c + "<br/>");
}
Ou até mesmo com uma Lambda:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
cordas.forEach(c => document.write(c + "<br/>"));
Para escrever em um array, podemos inserir o valor nele simplesmente atribuindo um valor a uma de suas posições (caso ela já tenha um valor, será substituída pelo novo valor).
var cordas = ["Violão" ,"Guitarra", "Cavaquinho"];
for(let i = 0; i < 3; i++) {
document.write(cordas[i] + "<br/>");
}
cordas[2] = "Contrabaixo";
document.write("O instrumento é " + cordas[2] + "<br/>");
for(let i = 0; i < 3; i++) {
document.write(cordas[i] + "<br/>");
}
PS: O conteúdo de um mesmo array nem sempre precisa ser tudo do mesmo tipo. pode ser misto, como por exemplo:
var dados = ["Exemplo de string", 25, false];
for(let i = 0; i < 3; i++) {
document.write(dados[i] + "<br/>");
}
Os arrays em Javascript possuem vários métodos e propriedades disponíveis, já que ele é um objeto.
Veja um exemplo usando a propriedade length, que retorna o número de elementos presentes no array:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
var quantCordas = cordas.length;
document.write("O array possuí " + quantCordas + " elementos.<br/>");
Podemos facilmente adicionar mais elementos a um array com o método push(), veja um exemplo:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
cordas.push("Banjo");
cordas.push("Viola");
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
E também podemos remover os últimos elementos do array com o método pop(), veja um exemplo, onde reduz e mostra o último elemento:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
cordas.push("Banjo");
cordas.push("Viola");
document.write(cordas[cordas.length - 1] + "<br/>");
cordas.pop();
document.write(cordas[cordas.length - 1] + "<br/>");
O método join() permite unir todos os elementos de um array em uma string, especificando um caractere separador entre eles:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
cordas.push("Banjo");
cordas.push("Viola");
var conjuntoCordas = cordas.join(", ");
document.write(conjuntoCordas);
Podemos também remover o primeiro elemento do array e deslocar os demais para "baixo" com o método shift(), veja um exemplo:
var cordas = ["Violão" ,"Guitarra", "Cavaquinho"];
cordas.push("Banjo");
cordas.push("Viola");
cordas.push("Ukulele");
document.write("Antes do deslocamento: <br/>");
document.write("Tamanho: " + cordas.length + "<br/>");
document.write("1º elemento: " + cordas[0] + "<br/><br/>");
cordas.shift();
document.write("Após o deslocamento: <br/>");
document.write("Tamanho: " + cordas.length + "<br/>");
document.write("1º elemento: " + cordas[0] + "<br/><br/>");
E também podemos excluir um elemento em qualquer posição do array usando o operador delete. A posição do elemento excluído ficará com o valor undefined, veja um exemplo:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
delete cordas[2];
document.write("<br/>Após excluir o elemento:<br/><br/>");
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
Para adicionar elemento em uma posição específica do array, usamos o método splice(). Com esse método. um novo elemento é adicionado ao array, sem alterar os elementos já existentes.
O argumento pos indica a posição dos elementos que serão adicionados, o elem-remov indica se e quantos elementos serão removidos e elemento1, elemento2, etc. são os valores a serem inseridos a partir (O primeiro número indica a posição à partir do qual serão inseridos e o segundo, se removerá algum elemento):
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
cordas.splice(1, 0, "Cítara", "Craviola");
document.write("<br/>Após adicionar os elementos:<br/><br/>");
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
Também podemos usar esse método para remover elementos, sem deixar posições com valores indefinidos, alterando o segundo número, veja o código abaixo:
var cordas = ["Violão", "Guitarra", "Cavaquinho"];
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
cordas.splice(1, 2, "Cítara", "Craviola");
document.write("<br/>Após substituir os elementos:<br/><br/>");
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
Podemos usar também o includes() para verificar se um elemento existe num array, e o indexOf() para indicar a posição dele, assim:
var cordas = ["Violão", "Guitarra", "Cavaquinho", "Ukulele"];
if(cordas.includes("Ukulele")) {
document.write("Elemento Ukulele Encontrado<br/>");
document.write("Está na posição " + cordas.indexOf("Ukulele") + "<br/>");
}
else {
document.write("Elemento Ukulele Não Encontrado<br/>");
}
Podemos também unir dois os mais arrays e formar um novo com o método concat(), o método sort() serve pra ordenar os elementos em ordem alfabética, veja um exemplo:
var cordas = ["Violão", "Guitarra", "Cavaquinho", "Contrabaixo"];
var percussao = ["Bateria", "Surdo", "Timbau", "Congas", "Repique"];
var teclas = ["Teclado", "Piano"];
var sopro = ["Sax", "Trompete", "Trombone", "Flauta", "Flugelhorn"];
var instrumentos = cordas.concat(percussao, teclas, sopro);
document.write("<br/>Listando os instrumentos:<br/><br/>");
instrumentos.sort();
for(let i = 0; i < instrumentos.length; i++) {
document.write(instrumentos[i] + "<br/>");
}
Como já visto, o método sort() é usado para ordenar os elementos em ordem alfabética, por exemplo:
var cordas = ["Violão", "Guitarra", "Cavaquinho", "Contrabaixo"];
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
document.write("<br/>Em ordem alfabética:<br/><br/>");
cordas.sort();
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
Mas o método sort() só ordena strings, não funciona com números, já que ele ordena pelas posição do primeiro caractere e trata números como strings.
Para ele ordenar números, usamos uma função antes e colocamos o argumento dela dentro do método sort(), por exemplo
var numeros = [14, 23, 6, 38, 9, 13, 52, 7, 5];
function ordenar(a, b) {
return a > b ? 1 : (a < b ? -1 : 0);
}
numeros.sort(ordenar);
for(let i = 0; i < numeros.length; i++) {
document.write(numeros[i] + "<br/>");
}
A parte da function pode ser simplificada assim, mas pode dar problema pra números muito grandes:
function ordenar(a, b) {
return a - b;
}
Para ordenar em ordem descendente de posições (definidas no script), usamos o método reverse() assim:
var cordas = ["Violão", "Guitarra", "Cavaquinho", "Contrabaixo"];
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
document.write("<br/>Em ordem inversa do script:<br/><br/>");
cordas.reverse();
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
Para inverter em ordem alfabética, basta simplesmente colocar o método sort() antes do reverse(), assim:
var cordas = ["Violão", "Guitarra", "Cavaquinho", "Contrabaixo"];
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
document.write("<br/>Em ordem alfabética inversa:<br/><br/>");
cordas.sort();
cordas.reverse();
for(let i = 0; i < cordas.length; i++) {
document.write(cordas[i] + "<br/>");
}
Para fazer o mesmo com números, basta inverter os valores do return assim, de forma mais simples:
var numeros = [14, 23, 6, 38, 9, 13, 52, 7, 5];
function ordenar(a, b) {
return b - a;
}
numeros.sort(ordenar);
for(let i = 0; i < numeros.length; i++) {
document.write(numeros[i] + "<br/>");
}