Este artigo fornecerá um entendimento sólido sobre exatamente como iterar sobre uma matriz em JavaScript. Se você está apenas começando o JavaScript ou está aqui para uma atualização, haverá um valor para você de qualquer maneira. Esta é uma introdução a um dos conceitos de JavaScript mais usados.

Matriz JavaScript:

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];

A descrição acima é uma matriz JavaScript usada para armazenar vários valores. Essa é uma das formas mais simples de uma matriz. Ele contém 4 “elementos” dentro da matriz, todas as strings. E como você pode ver, cada elemento é separado por uma vírgula.

Este exemplo de matriz é de diferentes marcas de carros, que podem ser chamadas de variáveis ​​”carros”, ie. var cars.

Existem várias maneiras pelas quais podemos iterar nessa matriz. O JavaScript é incrivelmente rico em recursos, por isso temos o luxo de escolher a melhor maneira de resolver o nosso problema. Veja como abordaremos a iteração sobre matrizes em JavaScript.

  1. Destaque 5 métodos comuns para iterar sobre uma matriz
  2. Mostre algumas idéias sobre cada método iterativo
  3. Forneça algum código que você possa usar para testá-lo também!

Parece bom? Vamos mergulhar!

O JavaScript suporta essa ferramenta de programação e a incorporou à linguagem para que você possa resolver seus problemas com mais facilidade e eficiência. Não é mais necessário digitar a mesma linha de código cinco vezes!

Neste artigo, mostraremos como usá-lo com o Estrutura de dados da matriz, percorrendo a matriz para executar tarefas simples.

Tradicional para loop

O que é um loop for?

A Wikipedia define um For Loop Como:

“No Ciência da Computação, uma for-loop (ou simplesmente para laço) é um controle de fluxo declaração para especificar iteração, que permite que o código seja executado repetidamente.”

Um loop for é uma maneira de executar o código repetidamente. Em vez de digitar console.log(“hi”) cinco vezes, você pode envolvê-lo em um loop for.

Neste primeiro exemplo, aprenderemos como iterar na matriz de carros que você viu acima e imprimir todos os elementos. O iterador, ou contador, começará no primeiro índice “Tesla” e terminará no último “Audi”. Ele se move pela matriz e imprime um elemento de cada vez.

let cars = ["Tesla", "Ferrari", "Lamborghini", "Audi"];for(var i=0; i < cars.length; i++) {	console.log(cars[i]);}

Resultado:

TeslaFerrariLamborghiniAudi

Mergulhando no código, passamos três opções para o loop for

  • a variável iteradora - var i = 0;
  • onde o iterador deve parar - i < card.length
  • quanto incrementar o iterador a cada loop - i++

Esse loop inicia-nos em 0, aumenta a variável em um a cada loop e para quando atingimos o último elemento na matriz.

O principal benefício do loop for tradicional é que você tem mais controle.

É possível acessar diferentes elementos dentro da matriz ou iterar através da matriz de uma maneira sofisticada para resolver um problema complexo. Por exemplo, pular todos os outros elementos da matriz pode ser feito facilmente com o loop for tradicional.

O método forEach

Qual é o método forEach?

O método forEach é usado para executar uma função em cada elemento da sua matriz. Esse método é uma ótima opção se o comprimento da matriz for "desconhecido" ou se houver alteração na garantia. Este método pode ser usado apenas com matrizes, conjuntos e mapas.

const amounts = [65, 44, 12, 4];let doubledAmounts = [];amounts.forEach(item => {    doubledAmounts.push(item * 2);})console.log(doubledAmounts);

O maior benefício de um forEach O loop pode acessar cada item, mesmo que sua matriz provavelmente cresça em tamanho. É uma solução escalável para muitos casos de uso e é mais fácil de ler e entender do que um loop for tradicional, porque sabemos que iremos iterar sobre cada elemento exatamente uma vez.

Enquanto loop

O que é um loop While?

A Wikipedia define um loop While como:

"UMA enquanto loop é um controle de fluxo declaração que permite que o código seja executado repetidamente com base em um determinado boleano doença. o enquanto loop pode ser pensado como uma repetição declaração if."

UMA while loop é uma maneira de executar código repetidamente para verificar se uma condição é verdadeira ou falsa. Portanto, em vez de usar um loop for, com uma instrução if aninhada, podemos usar um loop while nesses casos. Ou, se não tivermos acesso para encontrar o comprimento da matriz, enquanto os loops são uma excelente opção.

O loop while pode ser frequentemente controlado por um contador, controlando o loop while. Neste exemplo de código abaixo, mostramos um loop while básico percorrendo uma matriz. A chave é ter controle sobre o loop while que você está criando.

Exemplo de loop While (bom):

var i = 0 while (i < 5) {         console.log(i);     i++; }

Resultado:

01234

Como mostrado, esta é a instrução if do loop while "Eu <5", e é falado em voz alta: "i é inferior a 5". A variável i é incrementada toda vez que o loop é executado.

Isso significa que, em termos simples, 1 é adicionado à variável i toda vez que o loop executa uma iteração completa. Na primeira iteração, i é igual a 0 e imprimimos no console "0" - que é o início da saída.

O maior risco de usar um loop while é escrever uma condição que nunca é atendida.

Isso ocorre frequentemente em cenários do mundo real, onde alguém escreve um loop while, mas esquece de testar seu loop, e introduz um Loop infinito na base de código. Um loop infinito ocorre quando a condição nunca é atendida, e o loop continua em execução para sempre. Isso geralmente resulta em alterações quebradas, o que faz com que todo o aplicativo de software pare e pare de funcionar.

Aviso: não execute este código.

Exemplo de loop infinito (incorreto):

var i = 0 while (i < 5) {         console.log(i); }

Resultado:

Os resultados podem variar.

O loop do while

O que é um loop do while?

A Wikipedia define um loop Do-While como:

"uma faça loop enquanto é um controle de fluxo declaração que executa um bloco de código pelo menos uma veze, em seguida, executa repetidamente o bloco, ou não, dependendo de um determinado boleano condição no final do bloco ".

Um loop do-while é quase idêntico a um loop while, no entanto, há uma diferença importante. O loop do-while garantirá sempre a execução do bloco de código pelo menos uma vez. Antes da instrução if ser verificada.

Costumo pensar nisso como um loop while reverso e quase nunca os uso. No entanto, eles são úteis para alguns cenários muito específicos.

Exemplo de loop automático (bom):

var i = 0; do {     console.log(i);     i++; } while (i < 5);

Resultado:

01234

O maior risco de usar um loop é escrever uma condição que nunca é atendida. (Igual ao exemplo de loop While).

Aviso: não execute este código.

Exemplo de loop infinito (incorreto):

var i = 0; do {     console.log(i); } while (i < 5);

Resultado:

Os resultados podem variar.

Deseja levar seu conhecimento de JavaScript para o próximo nível? Aprender sobre map que é o mesmo que forEach mas com um bônus !! 🎉

Exemplo de bônus (Iteração por mapa)

O que é mapa?

A Wikipedia define um mapa como:

"Em muitos linguagens de programação, mapa é o nome de um função de ordem superior que aplica um dada função para cada elemento de um functor, por exemplo. uma Lista, retornando uma lista de resultados na mesma ordem. É frequentemente chamado aplicar a todos quando considerado em forma funcional. ”

Como funciona? A função map () em JavaScript aplica uma função a todo elemento dentro da matriz. Reserve um momento para reler essa frase. Posteriormente, a função map () retorna uma nova matriz com os resultados da aplicação de uma função a todos os elementos da matriz.

Exemplo de mapa ():

const array = [1, 1, 1, 1];// pass a function to mapconst results  = array.map(x => x * 2);console.log(results);

Resultado:

[2,2,2,2]

Aplicamos a função de mapa ao array com quatro 1's. A função de mapa multiplicou cada elemento por 2, ou seja. x * 2 e retornou uma nova matriz como results.

Ao visualizar nossa saída, podemos ver isso funcionando com êxito. Todos os elementos da matriz foram multiplicados por 2. Esse método pode ser usado como uma substituição de um loop em alguns casos e é incrivelmente poderoso.

Conclusão

Bem feito! Você aprendeu 5 maneiras diferentes de iterar sobre uma matriz em JavaScript. Estes são os blocos de construção fundamentais que o ajudarão a ter sucesso na sua programação JavaScript.

Você também foi exposto a um conceito avançado, map, que é usado frequentemente em aplicativos de software em larga escala. Então, vou deixar você com isso: como você usará matrizes em seus projetos? E qual método de iteração você achou mais interessante?

Obrigado pela leitura!

Se você gostou do meu artigo, siga-me e / ou envie-me uma mensagem!

Twitter:

https://twitter.com/MartyJacobsDev

Médio:

https://medium.com/@majikarpp

Github:

https://github.com/majikarp





Fonte