ananopaisdojavascriptDefinição
Vetores (ou arrays) são variáveis de dimensão única (arrays unidimensionais) nas quais temos muitos valores de um mesmo tipo. Pense na seguinte situação: você tem uma gavetinha cheia de meias. Cada meia é de uma cor, de um tipo (meia soquete, meia de cano longo, meia-calça, etc.). O vetor é como se fosse uma "gavetinha" para guardar dados do mesmo tipo.
Exemplo
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi"];
A contagem dos elementos de um vetor sempre começa por zero.
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi"];
console.log(frutas[0]); // maçã
console.log(frutas[1]); // pera
console.log(frutas[2]); // laranja
console.log(frutas[3]); // limão
console.log(frutas[4]); // uva
console.log(frutas[5]); // abacaxi
Nós podemos substituir um elemento dentro de um array (vou substituir o limão, que está na posição 3, por carambola).
frutas[3] = "carambola";
// ["maçã", "pera", "laranja", "carambola", "uva", "abacaxi"]
Ou podemos incluir um elemento nesse array (vou incluir a manga nesse vetor)
frutas[6] = "manga";
// ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "manga"]
Porém, existem meios mais legaizinhos para substituir ou incluir elementos em um vetor.
Métodos push, pop, shift e unshift
São métodos que usamos para lidar com os elementos de um vetor.
Push
O método push() inclui elementos no fim do vetor.
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi"];
frutas.push("carambola");
// ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"]
Pop
O método pop() exclui elementos do fim do vetor.
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"];
frutas.pop();
// ["maçã", "pera", "laranja", "limão", "uva", "abacaxi"]
Unshift
O método unshift() inclui elementos no começo do vetor.
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"];
frutas.unshift("mamão");
// ["mamão", "maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"]
Shift
O método shift() exclui elementos do começo do vetor
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"];
frutas.shift();
// ["pera", "laranja", "limão", "uva", "abacaxi", "carambola"]
Como faço para saber quantos elementos um vetor tem?
É só usar length:
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"];
console.log(frutas.length) // 7 (O vetor tem 7 elementos)
E para percorrer esse vetor, o que devo usar?!
Nós vamos usar o laço de repetição for para percorrer os elementos do array. Vamos usar a "forma antiga" e depois duas "formas novas": for in e for of.
Exemplos com for
for(let i = 0; i < frutas.length; i++) {
console.log(frutas[i])
}
Nesse exemplo aqui o que foi retornado foram todos os elementos do vetor frutas.
for(let i = 0; i < frutas.length; i++) {
console.log(i)
}
Nesse exemplo aqui o que foi retornado foram os índices de todos os elementos do vetor frutas.
Exemplo com for of:
for (let fruta of frutas) {
console.log(fruta);
}
for of é um laço que devolve apenas os elementos do vetor
Exemplos com for in:
for (let indice in frutas) {
console.log(indice);
}
for in é um laço que devolve apenas os índices dos elementos do vetor. Porém, posso usar esse laço para devolver os elementos do array. É só fazer assim:
for (let indice in frutas) {
console.log(frutas[indice]);
}
Mais alguns métodos...
Vamos ver alguns métodos bem bonitinhos para trabalhar com os vetores.
Map
O método map() vai percorrer o vetor (vai fazer um mapeamento) e transforma os elementos, criando um novo vetor.
Exemplo
Vou usar o vetor frutas do começo da lição. Todos os elementos estão escritos com letras minúsculas, então quero deixá-los com letras maiúsculas.
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"];
const transformaEmMaiuscula = frutas.map(modifica => modifica.toUpperCase());
console.log(transformaEmMaiuscula);
// ["MAÇÃ", "PERA", "LARANJA", "LIMÃO", "UVA", "ABACAXI", "CARAMBOLA"]
Filter
Esse método cria um novo vetor a partir de um determinado critério.
Exemplo
Dentro do vetor frutas, vou criar outro vetor com frutas que começam com a letra L.
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"];
const frutasComL = frutas.filter(letraL => letraL.slice(0, 1) === "l");
console.log(frutasComL);
// ["laranja", "limão"]
Reverse
É um método autoexplicativo. Inverte a ordem dos elementos do vetor.
Exemplo
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"];
console.log(frutas);
// ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"]
const inverterLista = frutas.reverse();
console.log(inverterLista);
// ["carambola", "abacaxi", "uva", "limão", "laranja", "pera", "maçã"]
Reduce
Talvez o método reduce() seja o mais poderoso de todos. Por que?! é porque esse método pega todos os valores de um vetor e os reduz a um único valor.
Exemplo
Vou criar um vetor com números de 1 até 10 para fazer a soma de todos os elementos.
const valores = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const soma = valores.reduce((acumulador, acumulado) => acumulador + acumulado, 0);
console.log(soma); // 55
Sort
O método sort() coloca em ordem os elementos do vetor.
Exemplo
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"];
console.log(frutas);
// ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "carambola"]
const ordenarLista = frutas.sort((a, b) => (a > b) ? 1 : -1);
console.log(ordenarLista);
// ["abacaxi", "carambola", "laranja", "limão", "maçã", "pera", "uva"]
Spread Operator
O spread operator (ou operador de espelhamento) permite a criação de um clone de um vetor para poder ser usado em outras partes do código.
Exemplo
const middle = [3, 4];
const numArray = [1, 2, ...middle, 5, 6];
console.log(numArray);
// [1, 2, 3, 4, 5, 6]
E aí? Gostaram? Até a próxima anotação! 😊
