Operações com Arrays - JavaScript

A linguagem JavaScript oferece amplas possibilidades para trabalhar com arrays, que são realizadas através dos métodos do objeto Array:

concat(): combina elementos de dois arrays em um único array.
every(): verifica se todos os elementos atendem a uma determinada condição.
filter(): filtra elementos do array.
find(): retorna o primeiro elemento do array que corresponde a uma determinada condição.
findLast(): retorna o último elemento que atende à condição.
findIndex(): retorna o índice do primeiro elemento do array que corresponde a uma determinada condição.
findLastIndex(): retorna o índice do último elemento que atende à condição.
flat(): simplifica a estrutura de elementos aninhados do array.
forEach(): aplica uma função específica a cada elemento do array.
includes(): verifica se um valor está presente no array.
indexOf(): retorna o índice da primeira ocorrência de um elemento no array.
join(): junta elementos do array em uma string.
lastIndexOf(): retorna o índice da última ocorrência de um elemento no array.
map(): transforma cada elemento do array em outro valor com base em uma função de transformação (projeção dos elementos).
pop(): remove o último elemento do array.
push(): adiciona um elemento ao final do array.
reduce(): combina elementos do array em um único valor.
reverse(): inverte a ordem dos elementos do array.
shift(): remove o primeiro elemento do array.
slice(): extrai elementos específicos do array.
splice(): adiciona elementos em uma posição específica no array.
some(): verifica se pelo menos um elemento atende a uma condição.
sort(): ordena o array.
unshift(): adiciona um novo elemento no início do array.

Adicionando Dados

push()

O método push() adiciona um elemento ao final do array:

const people = [];
people.push("Tom");
people.push("Sam");
people.push("Bob", "Mike");

console.log("elementos no people: ", people.length);
console.log(people); // ["Tom", "Sam", "Bob", "Mike"]

unshift()

O método unshift() adiciona um novo elemento no início do array:

const people = ["Bob"];

people.unshift("Alice");
console.log(people); // ["Alice", "Bob"]

people.unshift("Tom", "Sam");
console.log(people); // ["Tom", "Sam", "Alice", "Bob"]

Adicionando Dados em um Índice Específico

splice()

O método splice permite inserir elementos em uma posição específica. O primeiro argumento representa o índice no array onde os novos elementos devem ser adicionados. O segundo argumento representa o número de elementos que devem ser removidos (este método também é usado para remoção). Para adicionar elementos, defina este argumento como 0. Os demais argumentos representam os elementos que devem ser adicionados ao array:

const people = ["Tom", "Sam", "Bob"];
people.splice(1, 0, "Alice"); // adiciona o elemento "Alice" no índice 1
console.log(people); // ["Tom", "Alice", "Sam", "Bob"]

Também é possível adicionar um conjunto de elementos a partir de um índice específico:

const people = ["Tom", "Sam", "Bob"];
people.splice(1, 0, "Alice", "Alex", "Kate"); // adiciona os elementos no índice 1
console.log(people); // ["Tom", "Alice", "Alex", "Kate", "Sam", "Bob"]

Removendo Dados

pop()

O método pop() remove o último elemento do array:

const people = ["Tom", "Sam", "Bob", "Mike"];

const lastPerson = people.pop(); // remove o último elemento do array
console.log(lastPerson); // Mike
console.log(people); // ["Tom", "Sam", "Bob"]

Como resultado, o método pop retorna o elemento removido.

shift()

O método shift() remove o primeiro elemento do array:

const people = ["Tom", "Sam", "Bob", "Mike"];

const first = people.shift(); // remove o primeiro elemento do array
console.log(first); // Tom
console.log(people); // ["Sam", "Bob", "Mike"]

Removendo Elementos por Índice

splice()

O método splice também pode ser usado para remover elementos de um array. Por exemplo, para remover elementos a partir do terceiro índice:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(3);
console.log(deleted); // ["Alice", "Kate"]
console.log(people); // ["Tom", "Sam", "Bill"]

O método splice retorna os elementos removidos como um novo array. Se for passado um índice negativo, a remoção será feita a partir do final do array. Por exemplo, para remover o último elemento:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(-1);
console.log(deleted); // ["Kate"]
console.log(people); // ["Tom", "Sam", "Bill", "Alice"]

Uma versão adicional do método permite definir a quantidade de elementos a serem removidos. Por exemplo, para remover três elementos a partir do primeiro índice:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const deleted = people.splice(1, 3);
console.log(deleted); // ["Sam", "Bill", "Alice"]
console.log(people); // ["Tom", "Kate"]

Substituindo Elementos

splice()

O método splice() permite tanto adicionar quanto remover elementos. Podemos combinar essas duas possibilidades para substituir elementos do array por outros. Por exemplo:

const people = ["Tom", "Sam", "Bob", "Alice", "Kate"];
const deleted = people.splice(1, 3, "Alex", "Mike");
console.log(deleted); // ["Sam", "Bob", "Alice"]
console.log(people); // ["Tom", "Alex", "Mike", "Kate"]

Aqui, removemos três elementos a partir do índice 1 (primeiro parâmetro de splice) e, em vez deles, inserimos dois elementos: "Alex" e "Mike".

Copiando Arrays

slice()

Copiar um array pode ser uma cópia superficial (shallow copy) ou uma cópia profunda (deep copy).

Para uma cópia superficial, basta atribuir o valor de uma variável que contém um array a outra variável:

const users = ["Tom", "Sam", "Bill"];
console.log(users);     // ["Tom", "Sam", "Bill"]
const people = users;   // cópia superficial
    
people[1] = "Mike";     // alterando o segundo elemento
console.log(users);     // ["Tom", "Mike", "Bill"]

Neste caso, a variável people após a cópia apontará para o mesmo array que a variável users. Portanto, ao alterar elementos em people, os elementos em users também serão alterados, pois são, na verdade, o mesmo array.

Esse comportamento nem sempre é desejável. Por exemplo, queremos que, após a cópia, as variáveis apontem para arrays separados. Nesse caso, podemos usar a cópia profunda com o método slice():

const users = ["Tom", "Sam", "Bill"];
console.log(users);             // ["Tom", "Sam", "Bill"]
const people = users.slice();   // cópia profunda
    
people[1] = "Mike";             // alterando o segundo elemento
console.log(users);             // ["Tom", "Sam", "Bill"]
console.log(people);            // ["Tom", "Mike", "Bill"]

Neste exemplo, após a cópia, as variáveis apontarão para arrays diferentes, permitindo alterações independentes.

Mas vale destacar que a mesma cópia pode ser feita usando o operador spread ...:

const users = ["Tom", "Sam", "Bill"];
console.log(users);     // ["Tom", "Sam", "Bill"]
const people = [...users];
    
people[1] = "Mike";     // alterando o segundo elemento
console.log(users);     // ["Tom", "Sam", "Bill"]
console.log(people);    // ["Tom", "Mike", "Bill"]

O método slice() também permite copiar parte de um array. Para isso, ele aceita dois parâmetros:

slice(indice_inicial, indice_final)

O primeiro parâmetro indica o índice inicial do elemento para a seleção de valores do array. O segundo parâmetro é o índice final, até o qual a cópia deve ser feita.

Se apenas o índice inicial for especificado e for positivo, a cópia será feita deste índice até o final do array:

const users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const people = users.slice(2);  // do segundo índice até o final
console.log(people);            // ["Bill", "Alice", "Kate"]

Se apenas o índice inicial for especificado, mas for negativo, o índice é contado a partir do final do array, e a cópia é feita do final até este índice:

const users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const people = users.slice(-2);  // até o segundo índice a partir do final
console.log(people);             // ["Alice", "Kate"]

O segundo parâmetro permite limitar a seleção dos elementos a serem copiados. Por exemplo, selecionando elementos do índice 1 ao 4, excluindo o índice 4:

const users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const people = users.slice(1, 4);
console.log(people);        // ["Sam", "Bill", "Alice"]

Como a indexação de arrays começa em zero, o novo array conterá o segundo, terceiro e quarto elementos.

O segundo parâmetro também pode ser negativo. Nesse caso, o índice é contado a partir do final:

const users = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const people = users.slice(2, -1);  // do índice 2 até o índice 1 a partir do final
console.log(people);                // ["Bill", "Alice"]

copyWithin()

O método copyWithin() permite copiar elementos dentro do array. Ele aceita três parâmetros:

copyWithin(destino, inicio, fim)

Exemplo de uso:

const users = ["Tom", "Sam", "Bob", "Alice", "Kate"];
const people = users.copyWithin(1, 3, 5);  // elementos do índice 3 ao 4 (dois elementos)
                                           // são copiados para o índice 1
console.log(people);                       // ["Tom", "Alice", "Kate", "Alice", "Kate"]

Obtendo Elementos Fora do Intervalo

toSpliced()

Se quisermos obter elementos fora de um determinado intervalo sem alterar o array atual, podemos usar o método toSpliced(). Este método retorna um array com elementos fora do intervalo especificado:

const people = ["Tom", "Sam", "Bill", "Alice", "Kate"];
const range = people.toSpliced(1, 3);
console.log(range);       // ["Tom", "Kate"]
console.log(people);      // ["Tom", "Sam", "Bill", "Alice", "Kate"]

Concatenando Arrays

concat()

O método concat() serve para unir arrays. Como resultado, ele retorna um array combinado:

const men = ["Tom", "Sam", "Bob"];
const women = ["Alice", "Kate"];
const people = men.concat(women);
console.log(people);  // ["Tom", "Sam", "Bob", "Alice", "Kate"]

Ordenando Arrays

sort()

O método sort() ordena o array em ordem crescente:

const people = ["Tom", "Sam", "Bob"];
people.sort();
console.log(people);  // ["Bob", "Sam", "Tom"]

Vale notar que, por padrão, o método sort() considera os elementos do array como strings e os ordena em ordem alfabética, o que pode levar a resultados inesperados, como:

const numbers = [200, 15, 5, 35];
numbers.sort();
console.log(numbers);  // [15, 200, 35, 5]

Aqui, queremos ordenar um array de números, mas o resultado pode ser surpreendente: [15, 200, 35, 5]. Nesse caso, podemos ajustar o método, passando uma função de comparação. Definimos a lógica da função de comparação:

const numbers = [200, 15, 5, 35];
numbers.sort((a, b) => a - b);
console.log(numbers);  // [5, 15, 35, 200]

A função de comparação recebe dois elementos adjacentes do array. Ela retorna um número negativo se o primeiro elemento deve ser colocado antes do segundo. Se o primeiro elemento deve ser colocado após o segundo, retorna um número positivo. Se os elementos são iguais, retorna 0.

sorted()

O JavaScript também fornece o método toSorted(), que retorna os elementos ordenados em um novo array, sem alterar o array atual:

const numbers = [200, 15, 5, 35];
const sorted = numbers.toSorted();
console.log(sorted);  // [15, 200, 35, 5]

Por padrão, o método toSorted() também ordena em ordem alfabética. Mas também podemos passar uma função de comparação:

const numbers = [200, 15, 5, 35];
const sorted = numbers.toSorted((a, b) => a - b);
console.log(sorted);  // [5, 15, 35, 200]

Revertendo a Ordem dos Elementos

reverse()

O método reverse() inverte a ordem dos elementos em um array:

const people = ["Tom", "Sam", "Bob"];
people.reverse();
console.log(people);  // ["Bob", "Sam", "Tom"]

toReversed()

O método toReversed() também inverte a ordem dos elementos, mas retorna um novo array sem alterar o array atual:

const people = ["Tom", "Sam", "Bob"];
const reversed = people.toReversed();
console.log(people);   // ["Tom", "Sam", "Bob"]
console.log(reversed); // ["Bob", "Sam", "Tom"]

Pesquisa do Índice de um Elemento

Os métodos indexOf() e lastIndexOf() retornam o índice da primeira e última ocorrência de um elemento em um array. Por exemplo:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];

const firstIndex = people.indexOf("Tom");
const lastIndex = people.lastIndexOf("Tom");
const otherIndex = people.indexOf("Mike");
console.log(firstIndex); // 0
console.log(lastIndex);  // 3
console.log(otherIndex); // -1

firstIndex tem o valor 0, já que a primeira ocorrência de "Tom" no array está no índice 0, enquanto a última está no índice 3.

Se o elemento não for encontrado, o método indexOf() e lastIndexOf() retornam -1.

Verificação de Presença de um Elemento

includes()

O método includes() verifica se um valor existe no array. Se o valor estiver presente, o método retorna true; caso contrário, retorna false. Por exemplo:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];

console.log(people.includes("Tom"));    // true - "Tom" está no array
console.log(people.includes("Kate"));   // false - "Kate" não está no array

Como segundo parâmetro, o método includes() aceita o índice a partir do qual a busca deve começar:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];

console.log(people.includes("Bob", 2)); // true
console.log(people.includes("Bob", 4)); // false

Neste exemplo, ao procurar a partir do índice 2, encontramos a string "Bob", mas ao procurar a partir do índice 4, ela não está presente.

Se este parâmetro não for fornecido, a busca começa no índice 0 por padrão. Se for passado um valor negativo, a busca começa do final do array:

const people = ["Tom", "Sam", "Bob", "Tom", "Alice", "Sam"];

console.log(people.includes("Tom", -2)); // false - 2º índice a partir do final
console.log(people.includes("Tom", -3)); // true - 3º índice a partir do final

Verificação de Condições

every()

O método every() verifica se todos os elementos do array satisfazem uma determinada condição:

const numbers = [1, -12, 8, -4, 25, 42];
const passed = numbers.every(n => n > 0);
console.log(passed); // false

O método every() aceita uma função como parâmetro, que representa a condição a ser verificada. Esta função recebe um elemento e retorna true se o elemento satisfaz a condição, ou false caso contrário. Se ao menos um elemento não satisfaz a condição, o método retorna false.

some()

O método some() é similar ao every(), mas verifica se ao menos um elemento satisfaz a condição. Se houver pelo menos um elemento que satisfaça a condição, o método retorna true. Caso contrário, retorna false:

const numbers = [1, -12, 8, -4, 25, 42];
const passed = numbers.some(n => n > 0);
console.log(passed); // true

filter()

O método filter(), assim como some() e every(), aceita uma função de condição:

filter(callbackFn)
filter(callbackFn, thisArg)

Como parâmetro, filter recebe uma função callback que será chamada para cada elemento do array em iteração. Essa função callback pode receber até três parâmetros:

callback(element, index, array)

A função callback recebe sequencialmente o elemento atual (element), o índice do elemento (index) e uma referência ao próprio array (array). O callback retorna true (ou um valor que corresponda a true) se o elemento atender à condição. Caso contrário, retorna false.

Opcionalmente, um objeto pode ser passado como segundo parâmetro para o método filter(), que pode ser acessado dentro da função callback através de this.

Como resultado, o método filter() retorna um array contendo os elementos que atendem à condição especificada:

const numbers = [1, -12, 8, -4, 25, 42];
const filteredNumbers = numbers.filter(n => n > 0);
console.log(filteredNumbers); // [1, 8, 25, 42]

Iteração de Elementos

forEach()

O método forEach() percorre os elementos do array e aplica uma ação específica a cada um deles.

forEach(callbackFn)
forEach(callbackFn, thisArg)

Como parâmetro, forEach recebe uma função callback que será chamada para cada elemento do array em iteração. Essa função callback pode receber até três parâmetros:

callback(element, index, array)

A função callback recebe sequencialmente o elemento atual (element), o índice do elemento (index) e uma referência ao próprio array (array).

Opcionalmente, um objeto pode ser passado como segundo parâmetro para o método forEach(), que pode ser acessado dentro da função callback através de this.

Por exemplo, podemos usar o método forEach() para calcular os quadrados dos números em um array:

const numbers = [1, 2, 3, 4, 5, 6];

numbers.forEach(n => 
    console.log("Quadrado do número", n, "é", n * n)
);

O método forEach() aceita uma função como parâmetro, que recebe o elemento atual em iteração. No corpo da função, diversas operações podem ser realizadas sobre esse elemento.

Saída no console:

Quadrado do número 1 é 1
Quadrado do número 2 é 4
Quadrado do número 3 é 9
Quadrado do número 4 é 16
Quadrado do número 5 é 25
Quadrado do número 6 é 36

Transformação de Array

map()

O método map() é similar ao método forEach(), aceitando os mesmos parâmetros:

map(callbackFn)
map(callbackFn, thisArg)

O primeiro parâmetro é uma função callback que recebe o elemento atual em iteração, seu índice e uma referência ao array. O segundo parâmetro é um valor para this dentro da função callback. Porém, o método map() retorna um novo array com os resultados das operações sobre os elementos do array.

Por exemplo, usamos o método map() para calcular os quadrados dos números em um array:

const numbers = [1, 2, 3, 4, 5, 6];

const squares = numbers.map(n => n * n);
console.log(squares);   // [1, 4, 9, 16, 25, 36]

A função passada para o método map() recebe o elemento atual, realiza operações sobre ele e retorna um valor. Esse valor é então inserido no array resultante squares.

Busca em Array

find()

O método find() retorna o primeiro elemento do array que atende a uma condição. Como parâmetro, find aceita uma função de condição:

const numbers = [1, 2, 3, 5, 8, 13, 21, 34];

// Obtém o primeiro elemento que é maior que 10
let found = numbers.find(n => n > 10);
console.log(found); // 13

Neste caso, obtemos o primeiro elemento que é maior que 10. Se nenhum elemento atender à condição, undefined será retornado.

findLast()

De forma semelhante, o método findLast() retorna o último elemento que atende à condição:

const numbers = [1, 2, 3, 5, 8, 13, 21, 34];
let found = numbers.findLast(n => n < 10);
console.log(found); // 8

findIndex()

O método findIndex() também aceita uma função de condição, mas retorna o índice do primeiro elemento que atende à condição:

const numbers = [1, 2, 3, 5, 8, 13, 21, 34];

// Obtém o índice do primeiro elemento que é maior que 10
let foundIndex = numbers.findIndex(n => n > 10);
console.log(foundIndex); // 5

Se nenhum elemento for encontrado, retorna -1.

findLastIndex()

O método findLastIndex() retorna o índice do último elemento que atende à condição:

const numbers = [1, 2, 3, 5, 8, 13, 21, 34];
// Obtém o índice do último elemento que é menor que 10
let foundIndex = numbers.findLastIndex(n => n < 10);
console.log(foundIndex); // 4

Transformação de Array

flat()

O método flat() simplifica um array considerando o nível de profundidade especificado dos elementos:

const people = ["Tom", "Bob", ["Alice", "Kate", ["Sam", "Ann"]]];
const flattenPeople = people.flat();
console.log(flattenPeople); // ["Tom", "Bob", "Alice", "Kate", ["Sam", "Ann"]]

Isso significa que o método flat() transfere os elementos dos arrays aninhados para o array externo do nível mais alto. No entanto, notamos que os elementos do segundo nível de profundidade são transferidos para o primeiro nível, mas ainda estão em um array aninhado. Isso ocorre porque, por padrão, o método flat() aplica-se apenas aos arrays aninhados do primeiro nível de profundidade. Podemos, no entanto, especificar o nível de profundidade:

const people = ["Tom", "Bob", ["Alice", "Kate", ["Sam", "Ann"]]];
const flattenPeople = people.flat(2);
console.log(flattenPeople); // ["Tom", "Bob", "Alice", "Kate", "Sam", "Ann"]

Se o array contiver arrays aninhados de níveis muito mais profundos, ou se não soubermos os níveis de profundidade existentes no array, mas queremos que todos os elementos sejam transformados em um único array, podemos usar o valor Infinity:

const people = ["Tom", "Bob", ["Alice", "Kate", ["Sam", "Ann"]]];
const flattenPeople = people.flat(Infinity);
console.log(flattenPeople); // ["Tom", "Bob", "Alice", "Kate", "Sam", "Ann"]

reduce()

O método reduce permite consolidar todos os valores de um array em um único valor, que é retornado pelo método. Ele recebe uma função com quatro parâmetros:

function (prev, current, curIndex, array) { .... }

Parâmetros:

prev: elemento anterior (no início - o primeiro elemento)
current: elemento atual (no início - o segundo elemento)
curIndex: índice do elemento atual
array: o array para o qual a função é chamada

Usamos o método reduce() para calcular a soma de um array de números:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((prev, current) => prev += current);
console.log(sum);   // 15

Neste caso, a função (prev, current) => prev += current soma o elemento anterior com o atual e retorna a soma.

Outra forma do método reduce recebe dois parâmetros. O segundo parâmetro é o valor inicial, a partir do qual o cálculo começa:

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((prev, current) => prev + current, 10);
console.log(sum);   // 25

Neste caso, o valor inicial de prev é 10.

Se o método reduce percorre os elementos do array do início (da esquerda para a direita), o método reduceRight() faz isso na ordem inversa (da direita para a esquerda):

const numbers = [1, 2, 3, 4, 5];
const reduced1 = numbers.reduce((prev, current) => prev += current.toString());
console.log(reduced1);   // 12345
const reduced2 = numbers.reduceRight((prev, current) => prev += current.toString());
console.log(reduced2);   // 54321

Combinação de Métodos

Quando necessário, podemos combinar várias operações em uma cadeia de métodos. Por exemplo, temos um array de usuários:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const people = [
  new Person("Tom", 38), 
  new Person("Kate", 31), 
  new Person("Bob", 42), 
  new Person("Alice", 34), 
  new Person("Sam", 25)
];

// Exibimos os nomes de todos os usuários com mais de 33 anos:
const isAgeMoreThan33 = (p) => p.age > 33;
const getPersonName = (p) => p.name;
const printPersonName = (p) => console.log(p);

const view = people
          .filter(isAgeMoreThan33)
          .map(getPersonName)
          .forEach(printPersonName);

Neste exemplo, primeiro filtramos os usuários com mais de 33 anos, depois obtemos seus nomes e, finalmente, exibimos os nomes no console.

Tom
Bob
Alice