Introdução

Em JavaScript, arrays são objetos especiais que herdam de Object.prototype, mas possuem métodos próprios defindios em Array.prototype. Este artigo aborda os principais métodos disponíveis para manipulação de arrays.

Inserção e Remoção de Elementos

Os métodos push, unshift, pop e shift modificam o array original.

push

Adiciona elementos ao final do array e retorna o novo tamanho.

const lista = [10, 20, 30];
const tamanho = lista.push(40);
console.log(lista);    // [10, 20, 30, 40]
console.log(tamanho);  // 4

unshift

Adiciona elementos no início do array e retorna o novo tamanho.

const lista = [20, 30, 40];
const tamanho = lista.unshift(10);
console.log(lista);    // [10, 20, 30, 40]
console.log(tamanho);  // 4

pop

Remove e retorna o último elemento. Se o array estiver vazio, retorna undefined.

const lista = [10, 20, 30, 40];
const removido = lista.pop();
console.log(lista);    // [10, 20, 30]
console.log(removido); // 40

shift

Remove e retorna o primeiro elemento. Se o array estiver vazio, retorna undefined.

const lista = [10, 20, 30, 40];
const removido = lista.shift();
console.log(lista);    // [20, 30, 40]
console.log(removido); // 10

Iteração e Transformação

Os métodos forEach, map, filter e find percorrem o array recebendo uma função callback com três parâmetros: elemento atual, índice e o próprio array.

forEach

Executa uma função para cada elemento, sem retornar um novo array.

const valores = [10, 20, 30, 40];
valores.forEach(item => console.log(item));
// 10, 20, 30, 40

map

Cria um novo array com os resultados da aplicação da função a cada elemento.

const valores = [10, 20, 30, 40];
const dobrados = valores.map(item => item * 2);
console.log(dobrados); // [20, 40, 60, 80]

filter

Cria um novo array contendo apenas os elementos que passam no teste da função.

const valores = [1, 2, 3, 4, 5];
const pares = valores.filter(item => item % 2 === 0);
console.log(pares); // [2, 4]

find

Retorna o primeiro elemento que satisfaz a função de teste, ou undefined caso não encontre.

const valores = [5, 12, 8, 130, 44];
const encontrado = valores.find(item => item > 10);
console.log(encontrado); // 12

Extração e Modificação: slice e splice

slice

Retorna uma cópia superficial de parte do array, sem modificar o original. Aceita índice inicial (inclusivo) e final (exclusivo). Valores negativos contam a partir do final.

const original = [1, 2, 3, 4, 5];
console.log(original.slice(0, 3));   // [1, 2, 3]
console.log(original.slice(1));      // [2, 3, 4, 5]
console.log(original.slice(-4, -1)); // [2, 3, 4]
console.log(original.slice(-4));     // [2, 3, 4, 5]

splice

Modifica o array removendo e/ou inserindo elementos. Parâmetros: índice inicial, quantidade a remover (opcional) e elementos a adicionar. Retorna os elementos removidos.

// Remoção
const dados = [1, 2, 3, 4, 5, 6];
const removidos = dados.splice(2, 3);
console.log(removidos); // [3, 4, 5]
console.log(dados);     // [1, 2, 6]

// Inserção
const dados2 = [1, 2, 3, 4, 5, 6];
dados2.splice(2, 0, 'a', 'b');
console.log(dados2); // [1, 2, 'a', 'b', 3, 4, 5, 6]

// Substituição
const dados3 = [1, 2, 3, 4, 5, 6];
dados3.splice(2, 1, 'a', 'b');
console.log(dados3); // [1, 2, 'a', 'b', 4, 5, 6]

Ordenação: sort e reverse

Ambos modificam o array original.

reverse

Inverte a ordem dos elementos in-place.

const valores = [1, 2, 3, 4, 5];
valores.reverse();
console.log(valores); // [5, 4, 3, 2, 1]

sort

Por padrão, converte elementos em strings e ordena por code point Unicode. Para ordenação numérica, utilize uma função comparadora.

// Ordenação padrão (string)
const misto = ['a', 3, '11', 'ab', '2', 1, '15'];
misto.sort();
console.log(misto); // [1, '11', '15', '2', 3, 'a', 'ab']

// Ordenação numérica decrescente
const numeros = [40, 100, 1, 5, 25];
numeros.sort((a, b) => b - a);
console.log(numeros); // [100, 40, 25, 5, 1]

Busca de Índices: indexOf e lastIndexOf

indexOf

Retorna o primeiro índice onde o elemento foi encontrado, ou -1. Aceita um índice inicial opcional.

const frutas = ["Maçã", "Banana", "Manga", "Laranja", "Banana"];
console.log(frutas.indexOf("Banana"));      // 1
console.log(frutas.indexOf("Banana", 2));   // 4

lastIndexOf

Busca de trás para frente, retornando o último índice encontrado.

const frutas = ["Maçã", "Banana", "Manga", "Laranja", "Banana"];
console.log(frutas.lastIndexOf("Banana"));     // 4
console.log(frutas.lastIndexOf("Banana", 2));  // 1

Redução: reduce e reduceRight

Acumulam os elementos em um único valor. A função callback recebe: acumulador, valor atual, índice e o array.

reduce

Percorre o array da esquerda para a direita.

const valores = [1, 2, 3, 4];
const somar = (acc, val) => acc + val;
console.log(valores.reduce(somar));     // 10
console.log(valores.reduce(somar, 10)); // 20

reduceRight

Percorre o array da direita para a esquerda.

const matriz = [[0, 1], [2, 3], [4, 5]];
const achatar = (acc, val) => acc.concat(val);
console.log(matriz.reduceRight(achatar, [])); // [4, 5, 2, 3, 0, 1]

Verificação Condicional: some e every

some

Retorna true se pelo menos um elemento satisfizer a condição.

const valores = [1, 2, 3, 4, 5];
const temPar = valores.some(n => n % 2 === 0);
console.log(temPar); // true

every

Retorna true apenas se todos os elementos satisfizerem a condição.

const valores = [2, 4, 6, 8, 10];
const todosPares = valores.every(n => n % 2 === 0);
console.log(todosPares); // true

Outros Métodos de Instância

join

Cocnatena os elementos em uma string, usando um separador (vírgula por padrão).

const itens = [1, 2, 3, 4, 5];
console.log(itens.join());     // "1,2,3,4,5"
console.log(itens.join('-'));  // "1-2-3-4-5"

flat

Achata arrays aninhados. Aceita a profundidade como argumento; Infinity achata todos os níveis. Não modifica o original.

const aninhado = [1, [2, [3, [4]]]];
console.log(aninhado.flat());           // [1, 2, [3, [4]]]
console.log(aninhado.flat(2));          // [1, 2, 3, [4]]
console.log(aninhado.flat(Infinity));   // [1, 2, 3, 4]

fill

Preenche todos os elementos com um valor estático.

const preenchido = new Array(3).fill(null);
console.log(preenchido); // [null, null, null]

concat

Mescla dois ou mais arrays sem modificar os originais.

const grupoA = ['a', 'b', 'c'];
const grupoB = ['d', 'e', 'f'];
const combinado = grupoA.concat(grupoB);
console.log(combinado); // ['a', 'b', 'c', 'd', 'e', 'f']

includes

Verifica se o array contém um determinado valor, retornando true ou false.

const valores = [1, 1, 2, 3, 4, 4, 3];
console.log(valores.includes(2));      // true
console.log(valores.includes(2, 3));   // false

Métodos Estáticos de Array

Array.isArray

Verifica se um valor é um array.

const teste = [];
console.log(Array.isArray(teste)); // true

Array.from

Cria um array a partir de objetos iteráveis ou semelhantes a arrays.

// Objeto semelhante a array
const obj = { '0': 'a', '1': 'b', '2': 'c', length: 3 };
console.log(Array.from(obj)); // ['a', 'b', 'c']

// Com função de mapeamento
const num = { length: 2, 0: 1, 1: 2 };
console.log(Array.from(num, x => x * 2)); // [2, 4]

// String
console.log(Array.from('hello')); // ['h', 'e', 'l', 'l', 'o']

// Set
const conjunto = new Set([1, 2, 3, 4, 5]);
console.log(Array.from(conjunto)); // [1, 2, 3, 4, 5]

Array.of

Cria um array com os argumentos fornecidos. Diferente do construtor Array(), não enterpreta um único número como tamanho.

console.log(Array(2));     // [empty × 2]
console.log(Array.of(2));   // [2]

console.log(Array(0));      // []
console.log(Array.of(0));   // [0]

Métodos do Objeto Math Aplicados a Arrays

Embora não sejam métodos de array, funções de Math são frequentemente usadas com arrays numéricos.

const valores = [3.14, 4.99, -1.56, -2.45];
console.log(Math.max(...valores)); // 4.99
console.log(Math.min(...valores)); // -2.45
console.log(valores.map(Math.floor)); // [3, 4, -2, -3]
console.log(valores.map(Math.ceil));  // [4, 5, -1, -2]
console.log(valores.map(Math.round)); // [3, 5, -2, -2]