Conhecendo os métodos de Arrays no JavaScript
Tags: braziliandevs, javascript, webdev, beginners
Published: 2023-03-07 14:15:06

## O que é Array em JavaScript?

Um Array (também conhecido como matriz) armazena uma coleção de elementos, que podem ser de diferentes tipos de dados, tais como números, strings, booleans e objetos. Os elementos dentro de um array são acessados através de um índice, que começa em 0 para o primeiro elemento do array.

Embora seja possível armazenar diferentes tipos de dados em um único array no JavaScript, é recomendado que usemos apenas um tipo de dado por array. Isso ajuda a manter a organização dos dados e torna mais fácil a manipulação dos elementos dentro do array.

Podemos declarar arrays de duas maneiras diferentes.

- new Array

```js
const fruits = new Array("Apple", "Banana");
```

- Literal Notation

```javascript
const fruits = ["Apple", "Banana"];
```

## Métodos de Array

Agora, vamos entender os métodos de um array dentro do JavaScript e como usá-los.

- Map()

O método `.map()` permite executar uma função de callback para cada elemento dentro do array.

```javascript
const list = [1, 2, 3, 4, 5];
list.map((item) => item * 2); // Output: [2, 4, 6, 8, 10]
```

- Filter()

O método `.filter()` retorna uma cópia superficial com todos os elementos que passaram no teste implementado pela função fornecida.

```javascript
const list = [1, 2, 3, 4, 5];
list.filter((item) => item % 2 === 0); // Output: [2, 4]
```

- Push()

Adiciona um novo ou mais elementos ao final do array e retorna o novo comprimento.

```javascript
const list = [1, 2, 3, 4, 5];
list.push(6); // Output: 6
console.log(list); // Output: [1, 2, 3, 4, 5, 6]
```

- Pop()

Remove o último elemento do array e retorna esse elemento.

```javascript
const list = [1, 2, 3, 4, 5];
list.pop(); // Output: 5
console.log(list); // Output: [1, 2, 3, 4]
```

- Unshift()

Adiciona um novo ou mais elementos ao inicio do array e retorna o novo comprimento.

```javascript
const list = [1, 2, 3, 4, 5];
list.unshift(0); // Output: 6
console.log(list); // Output: [0, 1, 2, 3, 4, 5]
```

- Shift()

Remove o primeiro elemento do array e retorna esse elemento.

```javascript
const list = [1, 2, 3, 4, 5];
list.shift(); // Output: 1
console.log(list); // Output: [2, 3, 4, 5]
```

- Splice()

O método `.splice()` é um método de uso geral para alterar o conteúdo de uma array removendo, substituindo ou adicionando elementos em posições especificadas da array.

```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
console.log(fruits); // Output: ['Banana', 'Orange', 'Lemon', 'Kiwi', 'Apple', 'Mango']
```

- Slice()

O método `.slice()` retorna uma cópia superficial com todos os elementos selecionados. Este método recebe dois argumentos, o índice inicial e o índice final da seleção. O índice final é opcional, e se não for especificado, o método seleciona todos os elementos a partir do índice inicial até o final do array.

```javascript
const fruits = ["Banana", "Orange", "Apple", "Mango"];
console.log(fruits.slice(1)); // Output: ["Orange", "Apple", "Mango"]
console.log(fruits.slice(1, 3)); // Output: ["Orange", "Apple"]
```

- IndexOf()

O método `.indexOf()` retorna o índice de um determinado elemento ou retorna -1 se este elemento não estiver presente no array.

```javascript
const list = [1, 2, 3, 4, 5];
list.indexOf(3); // Output: 2
list.indexOf(6); // Output: -1
```

- Reduce()

O método `.reduce()` executa uma função de callback para cada elemento do array, retornando o resultado final do cálculo de todos os elementos.

```javascript
const list = [1, 2, 3, 4, 5];
list.reduce((total, item) => total + item); // Output: 15
```

- Includes()

Retorna _true_ se o elemento fornecido estiver presente no array.

```javascript
const list = [1, 2, 3, 4, 5];
list.includes(3); // Output: true
list.includes(6); // Output: false
```

- Sort()

O método `.sort()` ordena os elementos do array. A ordem padrão é crescente, construída na conversão dos elementos em strings e, em seguida, comparando suas sequências de valores de unidades de código UTF-16.

```javascript
const array = ['D', 'B', 'A', 'C'];
array.sort(); // Output: ['A', 'B', 'C', 'D']

const list = [4, 1, 3, 2, 10];
list.sort(); // Output: [1, 10, 2, 3, 4]
list.sort((a, b) => a - b); // Output: [1, 2, 3, 4, 10]
```

- Reverse()

Inverte a ordem dos elementos.

```javascript
const list = [1, 2, 3, 4, 5];
list.reverse();
console.log(list) // Output: [5, 4, 3, 2, 1]
```

- Find()

Retorna o primeiro elemento do array que satisfaz a função de teste fornecida. Se nenhum valor satisfizer a função de teste, _undefined_ será retornado.

```javascript
const list = [1, 2, 3, 4, 5];
list.find((el) => el === 3); // Output: 3
list.find((el) => el === 6); // Output: undefined
```

- FindIndex()

O método `.findIndex()` retorna o índice de um determinado elemento ou retorna -1 se este elemento não estiver presente no array.

A principal diferença entre `.indexOf()` e `findIndex` são os parâmetros dessas funções:

- `.indexOf()` espera um valor como primeiro parâmetro. Isso o torna uma boa escolha para encontrar o índice em arrays de tipos primitivos, como strings, numbers, ou booleans.

- `.findIndex()` espera uma função de callback como primeiro parâmetro. Isso faz com quê este método seja uma boa escolha para buscar o índice em arrays de tipos não primitivos (por exemplo, objetos) ou se sua condição de localização for mais complexa do que apenas um valor.

```javascript
const list = [5, 12, 8, 130, 44];
list.findIndex((element) => element > 13); // Output: 3

const array = [{ id: 12 }, { id: 34 }, { id: 78 }, { id: 88 }];

array.findIndex((element) => element.id === 78); // Output: 2
```

- Join()

Une todos os elementos de um array em uma string.

```javascript
const list = [1, 2, 3, 4, 5];
list.join(', '); // Output: "1, 2, 3, 4, 5"
```

- Some()

Retorna _true_ se pelo menos um elemento do array passar no teste implementado pela função fornecida.

```javascript
const list = [1, 2, 3, 4, 5];
list.some((el) => el === 3); // Output: true
list.some((el) => el === 6); // Output: false
```

- Every()

Retorna _true_ se todos os elementos do array passarem no teste implementado pela função fornecida.

```javascript
const list = [1, 2, 3, 4, 5];
list.every((el) => el === 3); // Output: false

const list = [2, 4, 6, 8, 10];
list.every((el) => el % 2 === 0); // Output: true
```

- At()

Retorna o elemento no índice especificado.

```javascript
const list = [5, 12, 8, 130, 44];

let index = 2;
console.log(`Using an index of ${ index } the item returned is ${ list.at(index) }.`); // Output: "Using an index of 2 the item returned is 8"

index = -2;
console.log(`Using an index of ${ index } item returned is ${ list.at(index) }.`); // Output: "Using an index of -2 item returned is 130"
```

- Flat()

Retorna um novo array com todos os elementos do sub-array concatenados nele recursivamente até a profundidade especificada.

```javascript
const list = [1, 2, [3, 4, [5, 6]]];
list.flat(Infinity); // Output: [1, 2, 3, 4, 5, 6]
```

Em resumo, um array em JavaScript é uma coleção de elementos acessados por índices que podem ser de diferentes tipos de dados. Embora seja possível armazenar diferentes tipos de dados em um único array, é recomendado usar apenas um tipo de dado para manter a organização dos dados. Existem vários métodos disponíveis em JavaScript para manipular arrays, como `map()`, `filter()`, `push()`, `pop()`, `unshift()`, `shift()`, `splice()`, `slice()`, `indexOf()`, `reduce()`, `includes()` e `sort()`. Cada método executa uma operação específica em um array e ajuda a tornar a manipulação de dados mais fácil e eficiente.