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

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

• Literal Notation

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.