Definiçã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! 😊