Vetores ou Arrays Dimensionais (Parte 1)
Tags: javascript, algorithms
Published: 2021-09-16 14:22:32

## 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

```javascript
const frutas = ["maçã", "pera", "laranja", "limão", "uva", "abacaxi"];
```

A contagem dos elementos de um vetor sempre começa por zero.

```javascript
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).

```javascript
frutas[3] = "carambola"; 
// ["maçã", "pera", "laranja", "carambola", "uva", "abacaxi"]
```

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

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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

```javascript
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`:

```javascript
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`

```javascript
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`.

```javascript
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`: 

```javascript
for (let fruta of frutas) {
	console.log(fruta);
}
```

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

### Exemplos com `for in`:

```javascript
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:

```javascript
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.

```javascript
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.

```javascript
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

```javascript
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.

```javascript
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

```javascript
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

```javascript
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! 😊