Métodos básicos de array
Tags: array, javascript, programming
Published: 2021-06-04 16:20:14

Quando comecei a usar javascript, percebi o quanto é fundamental aprender a manipular arrays, pois passamos a maior parte do tempo trabalhando com eles.

*Sem aprender array você praticamente trava no aprendizado, e não conseguirá evoluir no domínio da linguagem*

Por isso listei os principais métodos básicos para facilitar nossa vida no dia dia. A ideia é que este post possa servir de “consulta rápida” quando manipularmos um array.

## Sumario
- [índices](#índices)
- [push](#push)
- [pop](#pop)
- [unshift](#unshift)
- [shift](#shift)
- [length](#length)
- [index](#index)
- [splice](#splice)
- [includes](#includes)
- [reverse](#reverse)
- [join](#join)
- [split](#split)
- [some](#some)

### O que é um array:

Array é uma sequencia não ordenada de dados, cujo os elementos residem em um local especifico na memória do computador e podem se acessado através de index.
É a melhor forma de evitar criações exageradas de variáveis para armazenar informações de mesmo tipo fazendo assim um melhor controle de memoria.

No javaScript a forma mais comum de declarar um a array é atribuindo ele a uma variável.

```js
const meuArray = [] 
```

Os colchetes (brackets) é o proprio array.

Para declarar os valores do array, inserimos cada um dos valores dentro dos colchetes separados por virgula.

```js
const meuArray = ['valor1', 'valor2', 3]
```

É possivel construir arrays com qualquer tipo de valor misturados como strings, numbers e objetos, porem é altamente recomendado que sejam construído arrays com valores que tenham a mesma relação e tipo como no exemplo a baixo.

```js
const frutas = ['banana', 'abacaxi', 'laranja'] // strings

const idades = [20, 10, 30] // "numbers"
```

## índices

Quando um array é criado, cada posição do array é relacionado a um index que por padrão começa em “0”, e aumenta de forma linear.

Ou seja a primeira posição do array tem o index 0, a segunda posição tem o index 1, a terceira posição tem o index 2 e assim por diante.
Portanto para acessarmos o valor “laranja” do array “frutas” basta colocar entre colchete o index da posição em que este valor está.

```js
frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas[2])

'laranja'
```

*OBS: Muitos confundem a posição do valor com o seu index.*

*Veja: O valor ‘laranja’ do array ‘frutas’ é o terceiro valor do array, mas está na posição de index 2.*

*Isso é porque o index de um array começa em “0”. Portanto*

```js
frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas[0])

'banana'
```
- [sumario](#sumario)

## Métodos

Os métodos são as principais ferramentas para manipulação e interação com o array, e é muito importante domina-los.

Segue uma lista com alguns dos métodos mais utilizados.

## push

Adiciona um item ao **final** de um array

```js
frutas = ['laranja', 'abacaxi', 'pera']

frutas.push('limão')

['laranja', 'abacaxi', 'pera', 'limão']
```

## pop

Remove o **ultimo** item do array

```js
frutas = ['laranja', 'abacaxi', 'pera']

frutas.pop()

['laranja', 'abacaxi']
```

## unshift

Adicionar um item no **início** do Array

```js
frutas = ['pera', 'limão']

frutas.unshift('morango')

['morango', 'pera', 'limão']
```

## shift

Remover o **primeiro** item do Array

```js
frutas = ['laranja', 'pera', 'limão']

frutas.shift()

['pera', 'limão']
```

- [sumario](#sumario)

## length

Mostra o **tamanho** total do array, ou o **numero de elementos** que o array tem.

```js
frutas = ['banana', 'abacaxi', 'laranja']

console.log(frutas.length)

3
```

## index

Procurar e retorna o **indice** do array que da match com a pesquisa.

```js
frutas = ['laranja', 'abacaxi', 'pera']

frutas.indexOf('abacaxi')

index 1
```

## splice
É utilizado para **remover** ou **substituir** itens do meio do array.
Ele recebe 3 parâmetros:
- O index inicial da iteração.
- O numero de elementos a serem removidos a partir do index inicial (contando com ele mesmo).
- Os Elementos que serão adicionados no lugar dos elementos removidos.

```js
const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(2, 3) 
// O parâmetro 2 é o index inicial da iteração,
// lembrando que o index 2 é o numero 3 deste array.
// O parâmetro 3 é o numero de elementos 
// que serão removidos a partir do index 2.

console.log(meuArray)
[1, 2, 6]
// O resultado mostra que o splice() removeu a partir do
// index 2, 3 elementos do array, contanto com o próprio index 2.
```
É possivel substituir ou até adicionar elementos no meio do array
```js
const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(1,3, "teste") // index 1 é o numero 2 do array

console.log(meuArray)
[1, "teste", 5, 6] 
// A partir do index 1 (contando com ele mesmo),
// foi removido os indexs 1, 2, 3 e adicionado
// no lugar destes a string "teste".
```
OBS:
**O splice modifica o próprio array, ele não gera um array novo**, e por isso não da para atribuir o resultado do splice em uma nova variável.
```js
const novoArray = meuArray.splice(1,3) // isso não funciona

//o novoArray será vazio []
```
Também é possivel adicionar um novo elemento ao array sem remover nenhum outro, basta passar 0 no segundo parâmetro.
```js
const meuArray = [1, 2, 3, 4, 5, 6]

meuArray.splice(1,0, "teste")

[1, "teste", 2, 3, 4, 5, 6]
```

- [sumario](#sumario)

## includes

**Procura um item** no array e retorna verdadeiro caso encontre.

```js
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true
```

## reverse
Simplesmente reverte as posições de um array.

```js
const numbers = ['one','two','tree','four']

console.log(numbers.reverse())

['four','tree','two','one']
```

## join
*Este método é muito utilizado para converter um array em uma string, pois ele junta todos os itens de um array e o retorna em uma string.*
Ao chamar o método join() passamos como parâmetro o separador, nesse caso o '-'. Se não for passado nenhum separador, por padrão os elementos serão separados por ','.

```js
const frutas = ['laranja', 'abacaxi', 'pera']

const stringFrutas = fruntas.join('-')

console.log(stringFrutas)

laranja-abacaxi-pera
```

## split
Este método é muito utilizado para transformar strings em um array. Ele faz o contrario do join() dividindo uma string em elementos de um array. Os critérios da divisão são passados como parâmetros.
*O domínio de regex é muito útil para utilizar esse método*
```js
const name = "joao pedro"

name.split() // ["joao pedro"]

name.split('') // ['j','o','a','o',' ','p','e','d','r','o']

name.split(" ") // ["joao", "pedro"]
```
O split também recebe como segundo argumento um **delimitador**, podendo assim criar arrays apenas com partes de uma string.

*Veja um uso legal para os estes métodos aninhados em uma string*

```js
const name = "pedro"

const reverte = name.split('').reverse().join('')

console.log(reverte)

// ordep - revertemos as letras do nome pedro

```

- [sumario](#sumario)

## some

O método some() compara cada elemento do array com uma condição. E retorna verdadeiro quando a condição for satisfeita.
A condição é passada como parâmetro em uma função. O some() percorrerá o array aplicando a condição para cada elemento.

```js
const meuArray = [1,2,3,4,5]

meuArray.some(element => element === 5)

true
```

No exemplo acima, passamos uma função que testará se o valor é igual a 5. O some() percorrerá o array e passará para nossa função cada elemento do array na variável “element”, que por sua vez comparará o valor do element com o valor 5 testando assim a nossa condição. Uma vez satisfeita a condição ele retorna true.
*É importante saber que já na primeira vez que a condição for satisfeita, o loop para, e retorna verdadeiro ignorando o resto do array.*

Estes são os métodos básicos de manipulação de array. em breve adicionarei a este artigo os métodos (*slice, splice, object.keys, sort, map, filter, reduce*).

- [sumario](#sumario)