Iteração de matriz em JavaScript

A iteração de matriz é um conceito fundamental do JavaScript que permite aos desenvolvedores fazer um loop e manipular elementos em uma matriz. O JavaScript oferece uma variedade de métodos para iterar sobre matrizes, desde os loops tradicionais (while, do...while, for, for...in, for...of) até os métodos de matriz modernos (forEach, map, filter, reduce, reduceRight). Cada método é adequado a diferentes tarefas, como filtragem, transformação ou redução de dados. Métodos avançados como flatMap, Array.from, chaves, entradas e o operador de propagação oferecem flexibilidade e funcionalidade adicionais. O domínio dessas técnicas permite que os desenvolvedores escrevam códigos concisos, eficientes e expressivos para manipular arrays, o que é essencial para a criação de aplicativos JavaScript robustos. A compreensão desses métodos também garante a compatibilidade com os navegadores modernos, tornando-os práticos para o desenvolvimento contemporâneo da Web.

Principais conclusões: O JavaScript oferece vários métodos de iteração de matriz, incluindo loops tradicionais (while, do...while, for, for...in, for...of) e métodos de matriz modernos (forEach, map, filter, reduce, reduceRight). Cada método tem recursos exclusivos adequados para diferentes casos de uso, desde iterações simples até transformações complexas. O domínio dessas técnicas permite que os desenvolvedores escrevam códigos eficientes e expressivos para manipular matrizes, o que é essencial para a criação de aplicativos JavaScript avançados. A maioria dos métodos é compatível com os navegadores modernos, garantindo ampla compatibilidade.

O que são loops em JavaScript?

Os loops em JavaScript são estruturas de controle que permitem que os desenvolvedores executem repetidamente um bloco de código até que uma condição específica seja atendida. Eles oferecem uma maneira de automatizar tarefas repetitivas e processar matrizes ou coleções de dados com eficiência. O JavaScript oferece vários tipos de loops, incluindo while, do...while, for, for...in e for...of, cada um com sua própria sintaxe e casos de uso.

Como percorrer uma matriz com um loop while em JavaScript

O loop while em uma matriz de objetos javascript executa um bloco de código enquanto uma condição especificada for avaliada como verdadeira. É um loop versátil que pode ser usado para iterar sobre matrizes, gerenciando manualmente a variável de índice. Aqui está um exemplo de uso de um loop while para iterar sobre uma matriz:

const numbers = [1, 2, 3, 4, 5];
let i = 0;

while (i < numbers.length) {
  console.log(numbers[i]);
  i++;
}

Neste exemplo, o loop while continua a ser executado enquanto o índice i for menor que o comprimento da matriz de números. O loop imprime cada elemento no console e incrementa a variável de índice.

Como percorrer uma matriz com um loop do...while em JavaScript

O loop do...while é semelhante ao loop while, mas garante que o bloco de código seja executado pelo menos uma vez antes de verificar a condição. Aqui está um exemplo de uso de um loop de matriz do...while em javascript:

const fruits = ['apple', 'banana', 'orange'];
let i = 0;

do {
  console.log(fruits[i]);
  i++;
} while (i < fruits.length);

In this case, the loop prints each fruit to the console and increments the index variable. The loop continues until the condition i < fruits.length evaluates to false.

Como percorrer uma matriz com um laço for em JavaScript

O loop for é uma estrutura de loop compacta e comumente usada em JavaScript. Ele combina a inicialização, a condição e as expressões de incremento/decremento em uma única linha. Aqui está um exemplo de uso de um loop for para iterar sobre uma matriz:

const colors = ['red', 'green', 'blue'];

for (let i = 0; i < colors.length; i++) {
  console.log(colors[i]);
}

The for loop initializes the index variable i to 0, checks the condition i < colors.length, and increments i after each iteration. The loop prints each color to the console.

Como fazer loop em uma matriz com um loop for...in em JavaScript

O loop for...in é usado para iterar sobre as propriedades de um objeto. Quando usado com matrizes, ele itera sobre os índices da matriz. Aqui está um exemplo:

const persons = ['Alice', 'Bob', 'Charlie'];

for (let index in persons) {
  console.log(index + ': ' + persons[index]);
}

Neste exemplo, o loop for...in itera sobre os índices da matriz persons. Ele imprime cada índice e seu valor correspondente no console.

Como percorrer uma matriz com um for...of Loop em JavaScript

O loop for...of, introduzido no ECMAScript 2015 (ES6), oferece uma maneira mais concisa e legível de iterar sobre objetos iteráveis, inclusive matrizes. Ele acessa diretamente os valores da matriz sem a necessidade de uma variável de índice. Aqui está um exemplo:

javascript

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

for (let number of numbers) {
  console.log(number);
}

Nesse caso, o loop for...of itera sobre cada elemento da matriz de números e o atribui à variável number. O loop imprime cada número no console.

Como percorrer uma matriz com um loop forEach em JavaScript

O método forEach() é um método de matriz incorporado que executa uma função fornecida uma vez para cada elemento da matriz. Ele oferece uma abordagem mais expressiva e funcional para a iteração da matriz. Aqui está um exemplo:

const fruits = ['apple', 'banana', 'orange'];

fruits.forEach((fruit) => {
  console.log(fruit);
});

Neste exemplo, o método forEach() é chamado na matriz fruits. Ele usa uma função de seta como argumento, que recebe cada fruta como parâmetro e a imprime no console.

Outros métodos de iteração de matriz

O JavaScript fornece vários outros métodos de iteração de matriz que oferecem recursos avançados para manipulação e transformação de matrizes. Esses métodos incluem:

• map(): Cria uma nova matriz chamando uma função fornecida em cada elemento da matriz.
• filter(): Cria uma nova matriz com todos os elementos que passam no teste implementado pela função fornecida.
• reduce(): Executa uma função redutora em cada elemento da matriz, resultando em um único valor de saída.
• every(): Testa se todos os elementos da matriz passam no teste implementado pela função fornecida.
• some(): Testa se pelo menos um elemento da matriz passa no teste implementado pela função fornecida.

Exploraremos esses métodos em mais detalhes nas seções a seguir.

JavaScript Array forEach()

O método forEach() executa uma função fornecida uma vez para cada elemento da matriz. Ele não retorna uma nova matriz, mas permite que você execute uma ação em cada elemento. Aqui estão alguns exemplos:

Exemplo 1

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

numbers.forEach((number) => {
  console.log(number);
});

Neste exemplo, o método forEach() é usado para imprimir no console cada número da matriz de números.

Exemplo 2

const fruits = ['apple', 'banana', 'orange'];
const upperCaseFruits = [];

fruits.forEach((fruit) => {
  upperCaseFruits.push(fruit.toUpperCase());
});

console.log(upperCaseFruits);

Neste exemplo, o método forEach() é usado para converter cada fruta da matriz fruits em maiúsculas e colocá-la em uma nova matriz upperCaseFruits.

JavaScript Array map()

O método map() cria uma nova matriz chamando uma função fornecida em cada elemento da matriz. Ele retorna uma nova matriz com os resultados da chamada da função para cada elemento. Aqui estão alguns exemplos:

Exemplo 1

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map((number) => {
  return number ** 2;
});

console.log(squaredNumbers);

Neste exemplo, o método map() é usado para criar uma nova matriz squaredNumbers, elevando cada número da matriz numbers ao quadrado.

Exemplo 2

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const names = persons.map((person) => {
  return person.name;
});

console.log(names);

Neste exemplo, o método map() é usado para extrair a propriedade name de cada objeto da matriz persons e criar uma nova matriz names contendo apenas os nomes.

JavaScript Array filter()

O método filter() cria uma nova matriz com todos os elementos que passam no teste implementado pela função fornecida. Ele retorna uma nova matriz contendo os elementos que satisfazem a condição. Aqui estão alguns exemplos:

Exemplo 1

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => {
  return number % 2 === 0;
});

console.log(evenNumbers);

Neste exemplo, o método filter() é usado para criar um novo array evenNumbers filtrando o array de números para incluir somente números pares.

Exemplo 2

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const adultPersons = persons.filter((person) => {
  return person.age >= 18;
});

console.log(adultPersons);

Neste exemplo, o método filter() é usado para criar um novo array adultPersons filtrando o array persons para incluir somente pessoas com 18 anos ou mais.

JavaScript Array reduce()

O método reduce() executa uma função redutora em cada elemento da matriz, resultando em um único valor de saída. Ele recebe um acumulador e o elemento atual como argumentos e retorna o acumulador para a próxima iteração. Aqui estão alguns exemplos:

Exemplo 1

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(sum);

Neste exemplo, o método reduce() é usado para calcular a soma de todos os números na matriz de números. O valor inicial do acumulador é definido como 0.

Exemplo 2

const words = ['Hello', 'World', 'JavaScript'];
const sentence = words.reduce((accumulator, currentValue) => {
  return accumulator + ' ' + currentValue;
});

console.log(sentence);

Neste exemplo, o método reduce() é usado para concatenar todas as palavras da matriz de palavras em uma única frase. O acumulador é inicializado com uma string vazia.

Exemplo 3

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const totalAge = persons.reduce((accumulator, person) => {
  return accumulator + person.age;
}, 0);

console.log(totalAge);

Neste exemplo, o método reduce() é usado para calcular a idade total de todas as pessoas na matriz persons. O acumulador é inicializado em 0.

JavaScript Array reduceRight()

O método reduceRight() é semelhante ao método reduce(), mas executa a função redutora da direita para a esquerda (do último elemento para o primeiro). Aqui estão alguns exemplos:

Exemplo 1

const numbers = [1, 2, 3, 4, 5];
const reversedSum = numbers.reduceRight((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

console.log(reversedSum);

Neste exemplo, o método reduceRight() é usado para calcular a soma de todos os números na matriz de números, começando pelo último elemento e indo em direção ao primeiro.

Exemplo 2

const words = ['Hello', 'World', 'JavaScript'];
const reversedSentence = words.reduceRight((accumulator, currentValue) => {
  return accumulator + ' ' + currentValue;
});

console.log(reversedSentence);

Neste exemplo, o método reduceRight() é usado para concatenar todas as palavras da matriz de palavras em uma única frase, começando pela última palavra e indo em direção à primeira.

JavaScript Array every()

O método every() testa se todos os elementos da matriz passam no teste implementado pela função fornecida. Ele retorna true se a função retornar true para todos os elementos e false caso contrário. Aqui estão alguns exemplos:

Exemplo 1

const numbers = [2, 4, 6, 8, 10];
const allEven = numbers.every((number) => {
  return number % 2 === 0;
});

console.log(allEven);

Neste exemplo, o método every() é usado para verificar se todos os números da matriz de números são pares. Ele retorna true, pois todos os números satisfazem a condição.

Exemplo 2

const persons = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 35 }
];

const allAdults = persons.every((person) => {
  return person.age >= 18;
});

console.log(allAdults);

Neste exemplo, o método every() é usado para verificar se todas as pessoas da matriz persons são adultas (idade maior ou igual a 18 anos). Ele retorna true, pois todas as pessoas satisfazem a condição.

JavaScript Array some()

O método some() testa se pelo menos um elemento da matriz passa no teste implementado pela função fornecida. Ele retorna true se a função retornar true para pelo menos um elemento e false caso contrário. Aqui está um exemplo:

Exemplo

const numbers = [1, 2, 3, 4, 5];
const hasEvenNumber = numbers.some((number) => {
  return number % 2 === 0;
});

console.log(hasEvenNumber);

Neste exemplo, o método some() é usado para verificar se há pelo menos um número par na matriz de números. Ele retorna true, pois a matriz contém números pares.

Métodos avançados de iteração de matriz

O JavaScript fornece métodos adicionais de iteração de matriz que oferecem funcionalidade mais avançada. Esses métodos incluem:

• flatMap(): Cria uma nova matriz aplicando uma função a cada elemento e, em seguida, achatando o resultado.
• from(): Cria uma nova matriz a partir de um objeto do tipo matriz ou iterável.
• keys(): Retorna um novo objeto Array Iterator que contém as chaves de cada índice da matriz.
• entries(): Retorna um novo objeto Array Iterator que contém pares de valores-chave para cada índice da matriz.
• with(): Retorna uma nova matriz com um elemento especificado substituído por um novo elemento. (Introduzido no ES2023)

Vamos explorar esses métodos com mais detalhes.

JavaScript Array flatMap()

O método flatMap() primeiro mapeia cada elemento de uma matriz usando uma função de mapeamento e, em seguida, achata o resultado em uma nova matriz. Ele combina a funcionalidade de map() e flat() em um único método. Aqui está um exemplo:

Exemplo

const numbers = [1, 2, 3, 4, 5];
const mappedAndFlattened = numbers.flatMap((number) => {
  return [number, number * 2];
});

console.log(mappedAndFlattened);

Neste exemplo, o método flatMap() é usado para mapear cada número na matriz de números para uma matriz que contém o número e seu duplo e, em seguida, achatar as matrizes resultantes em uma única matriz.

Suporte a navegadores

O método flatMap() é compatível com os navegadores modernos, incluindo Chrome 69+, Edge 79+, Firefox 62+, Safari 12+ e Opera 56+.

JavaScript Array from()

O método Array.from() cria uma nova matriz a partir de um objeto do tipo matriz ou iterável. Ele permite que você converta objetos que tenham uma propriedade de comprimento e elementos indexados em uma matriz. Aqui está um exemplo:

Exemplo

em um exemplo de javascript:

const arrayLike = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
};

const array = Array.from(arrayLike);
console.log(array);

Neste exemplo, o método Array.from() é usado para converter um objeto semelhante a uma matriz em uma matriz real.

Suporte a navegadores

O método Array.from() é compatível com os navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é compatível com o Internet Explorer.

JavaScript Array keys()

O método keys() retorna um novo objeto Array Iterator que contém as chaves de cada índice da matriz. Ele permite que você itere sobre os índices da matriz. Aqui está um exemplo:

Exemplo

const fruits = ['apple', 'banana', 'orange'];
const iterator = fruits.keys();

for (const key of iterator) {
  console.log(key);
}

Neste exemplo, o método keys() é usado para obter um iterador que contém as chaves (índices) da matriz de frutas. Em seguida, o loop for...of é usado para iterar sobre as chaves e imprimi-las.

Suporte a navegadores

O método keys() é compatível com os navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é compatível com o Internet Explorer.

JavaScript Array entries()

O método entries() retorna um novo objeto Array Iterator que contém pares de valores-chave para cada índice da matriz. Cada entrada é uma matriz na forma de [índice, elemento]. Aqui está um exemplo:

Exemplo

em um exemplo de javascript:

const fruits = ['apple ', 'banana', 'orange']; const iterator = fruits.entries();
for (const [index, element] of iterator) { console.log(${index}: ${element}); }

Neste exemplo, o método `entries()` é usado para obter um iterador que contém pares de valores-chave para cada índice na matriz `fruits`. Em seguida, o loop `for...of` é usado para desestruturar cada entrada nas variáveis `index` e `element` e imprimi-las.

Método JavaScript Array with()

O método `with()` é uma nova adição introduzida no ECMAScript 2023 (ES2023). Ele permite que você crie uma nova matriz com um elemento especificado substituído por um novo elemento. Ele fornece uma maneira de atualizar um elemento em uma matriz sem alterar a matriz original. Aqui está um exemplo:

Exemplo

const numbers = [1, 2, 3, 4, 5];
const updatedNumbers = numbers.with(2, 10);

console.log(numbers);
console.log(updatedNumbers);

‍
Neste exemplo, o método with() é usado para criar um novo array updatedNumbers em que o elemento no índice 2 é substituído pelo valor 10. A matriz original de números permanece inalterada.

Espalhamento de matriz em JavaScript (...)

O operador de propagação (...) permite que você expanda uma matriz em elementos individuais. Ele pode ser usado para concatenar matrizes, passar matrizes como argumentos para funções ou criar novas matrizes com elementos existentes. Aqui está um exemplo:

Exemplo

const fruits = ['apple', 'banana'];
const moreFruits = ['laranja', 'uva'];
const allFruits = [...fruits, ...moreFruits];

console.log(allFruits);

Neste exemplo, o operador de propagação é usado para concatenar as matrizes fruits e moreFruits em uma nova matriz allFruits.

Suporte a navegadores

O operador de spread é compatível com os navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é compatível com o Internet Explorer.

Concluindo

O JavaScript oferece uma ampla variedade de métodos de iteração de matriz que permitem aos desenvolvedores fazer um loop javascript através da matriz javascript, manipular elementos e criar novas matrizes com base em condições específicas. Neste artigo, exploramos vários métodos, inclusive loops tradicionais como while, do...while, for, for...in e for...of, bem como métodos de matriz modernos como forEach(), map(), filter(), reduce(), every(), some() e outros.

Compreender e aproveitar essas técnicas de iteração de matriz permite que os desenvolvedores escrevam códigos concisos, eficientes e expressivos ao trabalhar com matrizes para cada em javascript. Ao dominar esses métodos, você pode executar operações complexas em matrizes com facilidade e criar aplicativos avançados de loop de matriz em JavaScript.

PERGUNTAS FREQUENTES

Qual é a diferença entre os loops for...of e for...in?

O loop for...of é usado para iterar sobre os valores de um objeto iterável, como uma matriz, enquanto o loop for...in é usado para iterar sobre as propriedades enumeráveis de um objeto, incluindo índices de matriz.

Quando devo usar map() em vez de forEach()?

Use map() quando você quiser criar uma nova matriz transformando cada elemento de uma matriz existente. Use forEach() quando você quiser executar uma ação em cada elemento de uma matriz sem criar uma nova matriz.

Como posso iterar sobre uma matriz em ordem inversa?

Você pode usar o método reverse() para inverter a ordem dos elementos em uma matriz e, em seguida, iterar sobre a matriz invertida usando qualquer um dos métodos de iteração discutidos neste artigo.

Como posso sair de um loop prematuramente?

Você pode usar a instrução break para sair prematuramente de uma matriz de loop no javascript. Quando encontrada dentro de um loop, a instrução break encerra imediatamente o loop e transfere o controle para a próxima instrução após o loop.