Como manipular matrizes JavaScript

Arrays JavaScript são estruturas de dados que permitem armazenar vários valores em um único nome de variável. Arrays são um tipo de objeto. Eles vêm com vários métodos utilitários que você pode usar para manipular seus dados.

Arrays em JavaScript têm restrições muito relaxadas sobre o que você pode colocar dentro deles. Eles não têm um comprimento fixo nem um tipo específico. Eles se comportam mais como uma lista de valores do que os arrays clássicos de linguagens fortemente tipadas.

Declarando um Array

Matrizes JavaScript usam colchetes. Você pode inicializá-los vazios ou adicionar uma série de valores padrão. Os valores são separados por vírgulas. Você pode usar qualquer valor JavaScript válido, como uma string, um número inteiro, um objeto ou outro array.

let emptyArray = [];
 
let filledArray = ["hello", 123, {foo: "bar"}, ["x", "y"]];

Acessando Valores de Matriz

Você recupera um valor de uma matriz especificando o índice que deseja acessar. Índices de matriz são numerados a partir de 0. Use a sintaxe de colchetes para definir o índice de matriz a ser recuperado.

let myArray = ["foo", "bar", "example"];
 
// logs "bar"
console.log(myArray[1]);

Índices de matriz são sempre inteiros em JavaScript. Você não pode usar strings como índices - use um objeto se precisar fazer isso.

Você pode alterar o valor de um índice de matriz definindo-o diretamente:

arr[1] = "test";

myArray mostrado acima agora conteria os valores foo, test, example.

Adicionando itens a matrizes

Você adiciona novos itens a arrays usando o método push():

["car", "truck"].push("bus");
// car, truck, bus

Isso adiciona o item ao final da matriz. Se você quiser que o novo elemento seja inserido no início da matriz, use o método unshift().

["car", "truck"].unshift("bus");
// bus, car, truck

Às vezes, pode ser necessário inserir um elemento no meio de uma matriz. Você pode usar o método splice() para adicionar um item em um índice específico:

["car", "truck"].splice(1, 0, "bus");
// car, bus, truck

O primeiro argumento para splice() é o índice no qual fazer a inserção. Em seguida, vem o número de itens a serem excluídos do início da matriz. Ao adicionar um novo item, ele deve ser 0 para que os elementos existentes sejam mantidos. O argumento final é o item a ser adicionado.

Removendo itens de arrays

Para remover um item do array, use o método pop(). Ele irá “retirar” o último item do array:

["car", "truck", "bus"].pop();
// car, truck

Para remover o elemento primeiro da matriz, use o método shift():

["car", "truck", "bus"].shift();
// truck, bus

Se você quiser remover um item específico, precisará usar o método splice() novamente. Você precisará saber o índice que deseja remover primeiro. Se você estiver trabalhando com um dos valores do array, primeiro chame indexOf() para obter seu índice. Você pode então passar isso para splice(), definindo o segundo argumento como 1 para excluir um item no índice fornecido.

const arr = ["car", "truck", "bus"];
arr.splice(arr.indexOf("truck"), 1);
// car, bus

Iterando sobre Arrays

Existem várias maneiras pelas quais você pode iterar em uma matriz. A abordagem tradicional é usar um loop for:

const arr = ["car", "truck", "bus"];
for (let i = 0; i < arr.length; i++) {
    console.log(`Vehicle at position ${i} is ${arr[i]}`);
}

Uma alternativa mais curta é usar o método forEach() do array. Isso deve receber uma função. A função é chamada uma vez para cada item na matriz. Ele recebe o valor e o índice de cada item como seus parâmetros.

["car", "truck", "bus"].forEach((vehicle, i) => {
    console.log(`Vehicle at position ${i} is ${vehicle}`);
});

forEach() geralmente é mais fácil de trabalhar do que um loop for. Você deve tomar cuidado ao retornar valores, no entanto. Retornar da função passada para forEach() não cancelará o loop:

const arr = ["car", "truck", "bus"];
 
// logs "car"
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
    if (arr[i] === "truck") return;
}
 
// logs "car", "truck", "bus"
arr.forEach((vehicle, i) => {
    console.log(vehicle);
    if (vehicle === "truck") return;
});

Com forEach(), a instrução return retorna da função anônima. O loop é criado pelo escopo externo, portanto, continua a chamar a função novamente para os itens restantes na matriz.

Matrizes de mapeamento

map() é um dos métodos de array mais poderosos do JavaScript. Ele aceita uma função que será chamada para cada item do array. Uma nova matriz contendo os resultados de cada chamada de função é então retornada.

const arr = [2, 4, 8, 16];
const mapped = arr.map(v => (v * v));
// mapped contains 4, 16, 64, 256

Na verdade, sua função de retorno de chamada recebe três argumentos: o valor na posição atual, o índice da posição atual e o array que map() está sendo chamado.

[1, 2, 3].map((value, index, arr) => (value * value));

O mapeamento é útil quando você precisa iterar em uma matriz, acessar cada valor e derivar algum novo valor dessa iteração. A técnica também é útil ao trabalhar com estruturas de interface do usuário, como React, onde você pode mapear os dados para transformá-los em um nó DOM:

const MyComponent = users => (
    users.map(user => (
        <div>
            <p>{user.Name}</p>
            <p>{user.Email}</p>
        </div>
    ))
);

Considere usar map() sempre que precisar executar alguma ação em cada elemento de um array, mesmo que não esteja interessado no valor de retorno de seu retorno de chamada.

Matrizes de filtragem

Outra tarefa comum é filtrar um array para excluir certos elementos. Você pode estar inclinado a criar uma nova matriz vazia e usar um loop for para testar elementos em seu original. Uma abordagem mais simples seria usar o método interno filter() do JavaScript.

Como map(), filter() usa uma função de retorno de chamada que é invocada em cada iteração. O valor atual, índice e array, são passados para o retorno de chamada como parâmetros. O retorno de chamada deve retornar true ou false para indicar se o valor atual deve ser incluído na nova matriz filtrada.

const filtered = [1, 2, 3].filter(v => (v % 2 === 0));
// filtered is [2]

Usar filter() torna a filtragem rápida e concisa. Você não precisa construir um loop for e configurar o novo array você mesmo. O método sempre retorna um novo array e não altera o original.

Métodos utilitários

Aqui estão alguns outros métodos que você pode achar úteis.

Unindo duas matrizes: use o método concat() para unir duas matrizes. Ele retornará um array novo, com seu argumento anexado ao array em que foi chamado. [\a, \b\, \c\].concat([\x\, \y\, \z\]) retorna [\a\, \b\, \c\, \x\, \y\, \z\].
Convertendo uma matriz em uma string: use o método join() para combinar os valores de uma matriz em uma única string. Você pode especificar o separador como o primeiro parâmetro da função. [\a\, \b\, \c\].join(\ - \) retornará a - b - c.
Obtendo índices de valor: se você souber que existe um valor em uma matriz, poderá obter seu índice numérico com indexOf(). Se o valor existir várias vezes na matriz, o índice da primeira ocorrência será retornado. Você pode obter o índice da última ocorrência usando lastIndexOf().
Determinando se um valor existe em uma matriz: o método includes() aceita um valor e permite que você verifique se ele existe em uma matriz. Retorna um booleano indicando se o valor foi encontrado. [\a\, \b\, \c\].includes(\a\) retornaria true.
Criando uma matriz vazia com um comprimento predeterminado: você pode usar o construtor Array para inicializar uma matriz vazia com um determinado comprimento. const myArr=new Array(10) criaria um array com 10 índices (0-9), cada um com undefined como seu valor.
Testar se todos os elementos em uma matriz correspondem a uma condição: às vezes, você pode querer verificar se cada elemento em uma matriz atende a uma condição. O método every() permite fazer isso. Ele aceita um retorno de chamada que funciona de maneira semelhante ao método filter(). O método só retornará true se cada chamada do retorno de chamada retornar true. Se você quiser saber se apenas alguns dos elementos da matriz correspondem, use o método some().

Conclusão

Arrays JavaScript são uma estrutura de dados versátil com métodos integrados úteis. Comparado com outras linguagens, trabalhar com arrays em JavaScript é simples e conciso. Você pode iterar, mapear e filtrar valores rapidamente usando funções de seta embutidas que mantêm seu código limpo e legível.