Iteração de matriz JavaScript

A iteração de array é um conceito fundamental em JavaScript que permite aos desenvolvedores fazer um loop e manipular elementos dentro de um array. O JavaScript fornece uma variedade de métodos para iterar sobre arrays, desde loops tradicionais (while, do...while, for, for...in, for...of) até métodos de array modernos (forEach, map, filter, reduce, reduceRight). Cada método é adequado para diferentes tarefas, como filtragem, transformação ou redução de dados. Métodos avançados como flatMap, Array.from, keys, entries e o operador spread oferecem flexibilidade e funcionalidade adicionais. Dominar essas técnicas permite que os desenvolvedores escrevam código conciso, eficiente e expressivo para lidar com arrays, o que é essencial para construir aplicativos JavaScript robustos. Entender esses métodos também garante compatibilidade com navegadores modernos, tornando-os práticos para o desenvolvimento web contemporâneo.

Key Takeaways:  O JavaScript oferece vários métodos para iteração de array, incluindo loops tradicionais (while, do...while, for, for...in, for...of) e métodos de array modernos (forEach, map, filter, reduce, reduceRight). Cada método tem recursos exclusivos adequados para diferentes casos de uso, de iterações simples a transformações complexas. Dominar essas técnicas permite que os desenvolvedores escrevam código eficiente e expressivo para manipular arrays, essencial para construir aplicativos JavaScript poderosos. A maioria dos métodos é suportada em navegadores modernos, garantindo ampla compatibilidade.

O que são Loops em JavaScript?

Loops em JavaScript são estruturas de controle que permitem que desenvolvedores executem repetidamente um bloco de código até que uma condição específica seja atendida. Eles fornecem uma maneira de automatizar tarefas repetitivas e processar matrizes ou coleções de dados de forma eficiente. 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 fazer um loop em um array com um loop while em JavaScript

O loop while através de array 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 arrays gerenciando manualmente a variável index. Aqui está um exemplo de uso de um loop while para iterar sobre um array:

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 executar enquanto o índice i for menor que o comprimento do array numbers. O loop imprime cada elemento no console e incrementa a variável index.

Como fazer um loop em um array com um loop do...while em JavaScript

O loop do...while é similar 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 array do...while em javascript:

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

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

Neste caso, o loop imprime cada fruta no console e incrementa a variável index. O loop continua até que a condição i < fruits.length seja avaliada como false.

Como fazer um loop em um array com um loop for em JavaScript

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

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

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

O loop for inicializa a variável de índice i para 0, verifica a condição i < colors.length e incrementa i após cada iteração. O loop imprime cada cor no console.

Como fazer um loop em um array com um loop for...in em JavaScript

O loop for...in é usado para iterar sobre as propriedades de um objeto. Quando usado com arrays, ele itera sobre os índices do array. 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 do array people. Ele imprime cada índice e seu valor correspondente no console.

Como fazer um loop em um array com um loop for...of em JavaScript

O loop for...of, introduzido no ECMAScript 2015 (ES6), fornece uma maneira mais concisa e legível de iterar sobre objetos iteráveis, incluindo arrays. Ele acessa diretamente os valores do array 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);
}

Neste caso, o loop for...of itera sobre cada elemento do array numbers e o atribui à variável number. O loop imprime cada número no console.

Como fazer um loop em um array com um loop forEach em JavaScript

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

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

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

Neste exemplo, o método forEach() é chamado no array fruits. Ele pega uma arrow function como argumento, que recebe cada fruit 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 array que oferecem capacidades poderosas para manipular e transformar arrays. Esses métodos incluem:

• map(): Cria um novo array chamando uma função fornecida em cada elemento do array.
• 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 do array, resultando em um único valor de saída.
• every(): testa se todos os elementos no array passam no teste implementado pela função fornecida.
• some(): testa se pelo menos um elemento no array passa no teste implementado pela função fornecida.

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

Matriz JavaScript para cada()

O método forEach() executa uma função fornecida uma vez para cada elemento do array. Ele não retorna um novo array, 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 cada número na matriz de números no console.

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 no array fruits para maiúsculas e colocá-la em um novo array upperCaseFruits.

Mapa de matriz JavaScript()

O método map() cria um novo array chamando uma função fornecida em cada elemento do array. Ele retorna um novo array com os resultados da chamada de 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 ao quadrado cada número na matriz numbers.

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 no array persons e criar um novo array names contendo apenas os nomes.

Filtro de matriz JavaScript()

O método filter() cria um novo array com todos os elementos que passam no teste implementado pela função fornecida. Ele retorna um novo array 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 uma nova matriz evenNumbers filtrando a matriz de números para incluir apenas 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 uma nova matriz adultPersons filtrando a matriz persons para incluir apenas pessoas com 18 anos ou mais.

Reduzir matriz JavaScript ()

O método reduce() executa uma função redutora em cada elemento do array, resultando em um único valor de saída. Ele pega 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 no array numbers. 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 no array words 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 no array persons. O acumulador é inicializado como 0.

Matriz JavaScript reduceRight()

O método reduceRight() é similar ao método reduce(), mas ele executa a função reducer da direita para a esquerda (do último elemento para o primeiro elemento). 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 do último elemento e indo em direção ao primeiro elemento.

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 na matriz de palavras em uma única frase, começando pela última palavra e indo em direção à primeira palavra.

Matriz JavaScript every()

O método every() testa se todos os elementos no array passam no teste implementado pela função fornecida. Ele retorna true se a função retorna 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 no array numbers 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 no array persons são adultas (idade maior ou igual a 18). Ele retorna true, pois todas as pessoas satisfazem a condição.

Matriz JavaScript some()

O método some() testa se pelo menos um elemento no array passa no teste implementado pela função fornecida. Ele retorna true se a função retorna 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 no array numbers. Ele retorna true, pois o array contém números pares.

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

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

• flatMap(): Cria um novo array aplicando uma função a cada elemento e então achatando o resultado.
• from(): Cria um novo array a partir de um objeto iterável ou semelhante a um array.
• keys(): Retorna um novo objeto Array Iterator que contém as chaves para cada índice no array.
• entries(): Retorna um novo objeto Array Iterator que contém pares chave-valor para cada índice no array.
• 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.

Matriz JavaScript flatMap()

O método flatMap() primeiro mapeia cada elemento de um array usando uma função de mapeamento, então achata o resultado em um novo array. 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 contendo o número e seu duplo e, então, achatar as matrizes resultantes em uma única matriz.

Suporte do navegador

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

Matriz JavaScript de()

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

Exemplo

exemplo de array em 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 do navegador

O método Array.from() é suportado em navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é suportado no Internet Explorer.

Chaves de matriz JavaScript()

O método keys() retorna um novo objeto Array Iterator que contém as chaves para cada índice no array. Ele permite que você itere sobre os índices do array. 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) do array fruits. O loop for...of é então usado para iterar sobre as chaves e imprimi-las.

Suporte do navegador

O método keys() é suportado em navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é suportado no Internet Explorer.

Entradas de matriz JavaScript()

O método entries() retorna um novo objeto Array Iterator que contém pares chave-valor para cada índice no array. Cada entrada é um array no formato de [índice, elemento]. Aqui está um exemplo:

Exemplo

exemplo de array em 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 chave-valor para cada índice no array `fruits`. O loop `for...of` é então usado para desestruturar cada entrada em 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 uma nova matriz updatedNumbers onde o elemento no índice 2 é substituído pelo valor 10. A matriz numbers original permanece inalterada.

Distribuição de matriz JavaScript (...)

O operador spread (...) permite que você expanda um array em elementos individuais. Ele pode ser usado para concatenar arrays, passar arrays como argumentos para funções ou criar novos arrays com elementos existentes. Aqui está um exemplo:

Exemplo

const fruits = ['apple', 'banana'];
const moreFruits = ['orange', 'grape'];
const allFruits = [...fruits, ...moreFruits];

console.log(allFruits);

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

Suporte do navegador

O operador spread é suportado em navegadores modernos, incluindo Chrome 51+, Edge 15+, Firefox 54+, Safari 10+ e Opera 38+. Ele não é suportado no Internet Explorer.

Resumindo

O JavaScript fornece uma ampla gama de métodos de iteração de array que permitem que os desenvolvedores façam um loop de javascript por meio de array javascript, manipulem elementos e criem novos arrays com base em condições específicas. Neste artigo, exploramos vários métodos, incluindo loops tradicionais como while, do...while, for, for...in e for...of, bem como métodos de array modernos como forEach(), map(), filter(), reduce(), every(), some() e muito mais.

Entender e alavancar essas técnicas de iteração de array capacita os desenvolvedores a escrever código conciso, eficiente e expressivo ao trabalhar com arrays para each em javascript. Ao dominar esses métodos, você pode executar operações complexas em arrays com facilidade e construir poderosos aplicativos de loop de array 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 quiser criar um novo array transformando cada elemento de um array existente. Use forEach() quando quiser executar uma ação em cada elemento de um array sem criar um novo array.

Como posso iterar sobre um array em ordem reversa?

Você pode usar o método reverse() para inverter a ordem dos elementos em uma matriz e então 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 de um array de loop em javascript prematuramente. Quando encontrado dentro de um loop, break imediatamente encerra o loop e transfere o controle para a próxima instrução após o loop.