Como manipular matrizes JavaScript

Arrays JavaScript são estruturas de dados que permitem armazenar vários valores sob 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.

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

Declarando uma matriz

As matrizes de JavaScript usam colchetes quadrados. 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 válido de JavaScript, como uma string, um inteiro, um objeto ou outra matriz.

let emptyArray = & # 91; & # 93 ;;   let FillArray = & # 91; " hello ", 123, & # 123; foo: " bar " & # 125;, & # 91; " x ", " y " & # 93; & # 93; ;

Acessando valores de array

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

let myArray = & # 91; " foo ", " bar ", " exemplo " & # 93 ;;   // registra " bar " console. log & # 40; myArray & # 91; 1 & # 93; & # 41 ;;

Os índices de matriz são sempre inteiros em JavaScript. Você pode &’ usar strings como índices — usar um objeto se precisar fazer isso.

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

arr & # 91; 1 & # 93; = " teste & quot ;;

meuArray mostrado acima agora conteria os valores foo, teste, exemplo.

Adicionando itens a matrizes

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

& # 91; " carro & quot ;, " caminhão " & # 93; . push & # 40; " ônibus " & # 41 ;; // carro, caminhão, ônibus

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 ().

& # 91; " carro ", " caminhão " & # 93; . unshift & # 40; " ônibus " & # 41 ;; // ônibus, carro, caminhão

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

& # 91; " carro ", " caminhão " & # 93; . splice & # 40; 1,0, " ônibus " & # 41 ;; // carro, ônibus, caminhão

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 retidos. O argumento final é o item a ser adicionado.

Removendo itens de matrizes

Para remover um item da matriz, use o método pop (). Ele “ estourará ” o último item da matriz:

& # 91; " carro ", " caminhão ", " ônibus " & # 93;. pop & # 40; & # 41 ;; // carro, caminhão

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

& # 91; " carro ", " caminhão ", " ônibus " & # 93; . shift & # 40; & # 41 ;; // caminhão, ônibus

Se desejar remover um item específico, você &’ precisará usar o método splice () novamente. Você precisará saber o índice que deseja remover primeiro. Se você estiver trabalhando a partir de um dos valores da matriz, 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 = & # 91; " carro ", " caminhão ", " ônibus " & # 93 ;; arr. splice & # 40; arr. indexOf & # 40; " caminhão " & # 41;, 1 & # 41 ;; // carro, ônibus

Iterando sobre matrizes

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

const arr = & # 91; " carro ", " caminhão ", " ônibus " & # 93 ;; para & # 40; let i = 0; i < arr. length; i ++ & # 41; & # 123; console. log & # 40; `Veículo na posição $ & # 123; i & # 125; é $ & # 123; arr & # 91; i & # 93; & # 125; `& # 41 ;; & # 125;

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

& # 91; " carro ", " caminhão ", " ônibus " & # 93; . para cada & # 40; & # 40; veículo, i & # 41; = > & # 123; console. log & # 40; `Veículo na posição $ & # 123; i & # 125; é $ & # 123; veículo & # 125; `& # 41 ;; & # 125; & # 41 ;;

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

const arr = & # 91; " carro ", " caminhão ", " ônibus " & # 93 ;;   // registra " carro " para & # 40; let i = 0; i < arr. length; i ++ & # 41; & # 123; console. log & # 40; arr & # 91; i & # 93; & # 41 ;; if & # 40; arr & # 91; i & # 93; === " caminhão " & # 41; return; & # 125;   // registra " carro & quot ;, " caminhão & quot ;, " ônibus " arr. forEach & # 40; & # 40; veículo, i & # 41; = > & # 123; console. log & # 40; veículo & # 41 ;; if & # 40; veículo === " caminhão " & # 41; return; & # 125; & # 41 ;;

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

Mapeando matrizes

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

const arr = & # 91; 2,4,8,16 & # 93 ;; const mapped = arr. map & # 40; v = > & # 40; v * v & # 41; & # 41 ;; // mapeado contém 4, 16, 64, 256

Sua função de retorno de chamada na verdade recebe três argumentos — o valor na posição atual, o índice da posição atual e a matriz que map () está sendo chamada.

& # 91; 1,2,3 & # 93; . map & # 40; & # 40; valor, índice, arr & # 41; = > & # 40; valor * valor & # 41; & # 41 ;;

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

const MyComponent = users = > & # 40; users. map & # 40; user = > & # 40; < div > < p > & # 123; user. Name & # 125; < / p > < p > & # 123; user. Email & # 125 ; < / p > < / div > & # 41; & # 41; & # 41 ;;

Considere o uso de map () sempre que precisar realizar alguma ação em cada elemento em uma matriz, mesmo se você &’ não estiver interessado no valor de retorno do seu retorno de chamada.

Filtrando matrizes

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

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

const filtrado = & # 91; 1,2,3 & # 93; . filter & # 40; v = > & # 40; v% 2 === 0 & # 41 ; & # 41 ;; // filtrado é [2]

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

Métodos de utilidade

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

• Unindo dois arrays: Use o método concat () para unir dois arrays. Ele retornará um novo array, com seu argumento anexado ao array em que foi chamado. ["a," b "," c "]. concat ([" x "," y "," z "]) retorna [" a "," b "," c "," x "," y " , "z"].
• Converter 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ê sabe que existe um valor em um array, você pode 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. Ele retorna um booleano indicando se o valor foi encontrado. ["a", "b", "c"]. includes ("a") retornaria verdadeiro.
• 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 uma matriz com 10 índices (0-9), cada um com indefinido como valor.
• Testando se todos os elementos em uma matriz correspondem a uma condição: às vezes você pode querer verificar se todos os elementos em uma matriz atendem a uma condição. O método every () permite que você faça isso. Ele aceita um retorno de chamada que funciona de maneira semelhante ao método filter (). O método só retornará verdadeiro se cada chamada de retorno de chamada retornar verdadeiro. Se você quiser saber se apenas alguns dos elementos do array combinam, use o método some ().

Conclusão

Os 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 em linha que mantêm seu código limpo e legível.