DEV Community 👩‍💻👨‍💻

Cover image for Vetores ou Arrays Dimensionais (Parte 1)
ananopaisdojavascript
ananopaisdojavascript

Posted on • Originally published at ananopaisdojavascript.hashnode.dev

Vetores ou Arrays Dimensionais (Parte 1)

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"];
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

Ou podemos incluir um elemento nesse array (vou incluir a manga nesse vetor)

frutas[6] = "manga"; 
// ["maçã", "pera", "laranja", "limão", "uva", "abacaxi", "manga"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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])
}
Enter fullscreen mode Exit fullscreen mode

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)
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

for of é um laço que devolve apenas os elementos do vetor

Exemplos com for in:

for (let indice in frutas) {
    console.log(indice);
}
Enter fullscreen mode Exit fullscreen mode

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]);
}
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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çã"]
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"]
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

E aí? Gostaram? Até a próxima anotação! 😊

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

⭐️🎀 JavaScript Visualized: Promises & Async/Await

async await