Website Avatar

Conhecendo os métodos de Arrays no JavaScript

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.