tipscode.github.io/docs/foreach-javascript/index.json at master · TipsCode/tipscode.github.io

1 lines (1 loc) · 17 KB

{"instances":{"application":{"persistent":false},"FacebookPixel/0-0-0-0-0":{"persistent":false},"GoogleAnalytics/0-0-0-0-1":{"persistent":false},"Article_Articles/0-0-15/foreach-javascript":{"persistent":false,"slug":"foreach-javascript","content":"Fala dev, vamos a mais um artigo, neste vamos abordar um tema bastante importante e que vai lhe trazer bastante produtividade na hora de escrever seus códigos em JavaScript, estudaremos neste artigo o foreach JavaScript.\n<h2>O que é Foreach?</h2>\nForeach é uma função nativa da API do JavaScript, onde a mesma nos permiti percorrer os elementos de um array, existem várias formas de percorrer um array, breve estarei publicando aqui no site. Vamos ao nosso editor de texto para vermos na prática o funcionamento do foreach JavaScript.\n<pre><code>const aprovados = ['Emanuel', 'Maria', 'João', 'Roberto', 'Gabriel']\n\naprovados.forEach( function(nome, indice) {\n console.log(` ${indice + 1} ${nome} `)\n} )\n</code></pre>\n<img src=\"/uploads/2020/01/Saide-do-exemplo-1.jpg\" alt=\"foreact javascript\">\nforeach javascript\nComeçamos criando um array de elementos cujo o nome é “aprovados” e agora vamos percorrer essa lista de aprovados e imprimir na tela, então escrevemos aprovados.foreach(), neste momento passamos como parâmetro uma função callback, onde essa função será chamada para cada iteração do nosso array de aprovados passando o próprio elemento e o índice correspondente ao array, ou seja, ele irá percorrer os elementos por exemplo “Emanuel” e o índice do mesmo, depois “Maria” e o índice e assim sucessivamente para cada elemento de aprovados.\n<h2>Foreach sem Indice</h2>\nCaso você não precise mostrar o índice do array é possível oculta o índice, pois não é obrigatório passa os parâmetros da função call-back no JavaScript, veja como é simples.\n<pre><code>aprovados.forEach( nome => console.log( nome ) )\n</code></pre>\n<img src=\"/uploads/2020/01/saida-do-exemplo-2.jpg\" alt=\"foreact javascript\">\nforeach javascript\nNeste caso estamos usando o novo recurso do JavaScript ás arrow function, neste cenário estamos interessados somente em imprimir o nome de cada elemento, caso você desconheça as arrow function <a href=\"http://bit.ly/tipscode-curso-programador-full-stack-javascript\" target=\"_blank\" rel=\"noopener\">clique aqui para saber mais</a>. Observação importante, aqui o índice ele é passado sim, porém o JavaScript o ignorar.\n<h2>Percorrendo com Variável</h2>\nOutro cenário bem interessante é armazenar uma função em uma variável e passar a mesma como parâmetro. Veja como:\n<pre><code>const exibirAprovados = aprovado => console.log(aprovado)\n\naprovados.forEach(exibirAprovados)\n</code></pre>\n<img src=\"/uploads/2020/01/saida-do-exemplo-2-1.jpg\" alt=\"foreact javascript\">\nforeach javascript\nCriamos uma constante “exibirAprovados” atribuímos uma arrow function com o nome de “aprovado” onde será exibido no console.log os “aprovados”, ou seja, com essa função armazenada em uma variável, podemos passa como parâmetro para o foreach, como mostro na linha 3.\n<h2>Detalhando o Foreach</h2>\nForeach recebe dois parâmetros sempre, o name e o índice, caso não queira o índice podemos suprimir esse parâmetro, caso queira somente o índice somos obrigados a escrever o primeiro parâmetro, por que o índice sempre é passado como ultimo e não como primeiro. Cabe uma observação muito importante, o foreach na verdade tem 3 parâmetros, o próprio array do elemento é passado como parâmetro do foreach. Vamos ao código:\n<pre><code>aprovados.forEach( function(nome, indice, array) {\n console.log(` ${indice + 1} ${nome} `)\n console.log(array)\n} )\n</code></pre>\n<img src=\"/uploads/2020/01/saida-do-exemplo-4.jpg\" alt=\"foreact javascript\">\nforeach javascript\nVeja que foi impresso o elemento e depois o próprio array, ou seja, a função call-back que passamos para o Foreach JavaScript receber 3 parâmetros, o nome, o índice e o próprio array. Lembrando que podemos suprimi-los, dependendo do seu problema em questão.\n<h2>Reescrevendo o Foreact</h2>\nPara entendemos de uma vez por todas o Foreact JavaScript, vamos reescreve-lo e observar como ele funciona por debaixo dos panos, então vamos coda!!\n<pre><code>const aprovados = ['Emanuel', 'Maria', 'João', 'Roberto', 'Gabriel']\n\naprovados.forEachPersonalizado( function(nome, indice) {\n console.log(` ${indice + 1} ${nome} `)\n \n} )\n</code></pre>\n<img src=\"/uploads/2020/01/saida-do-exemplo-5.jpg\" alt=\"foreact javascript\">\nforeach javascript\nNote que a função forEachPersonalizado() não existe, então vamos escrever nosso proprio foreach JavaScript. Vamos voltar ao visualCode.\n<pre><code>Array.prototype.forEachPersonalizado = function(callback) {\n for (let i = 0; i < this.length; i++) {\n callback(this[i], i, this)\n }\n}\nconst aprovados = ['Emanuel', 'Maria', 'João', 'Roberto', 'Gabriel']\n\naprovados.forEachPersonalizado( function(nome, indice) {\n console.log(` ${indice + 1} ${nome} `)\n \n} )\n</code></pre>\nCriamos dentro de prototype de um array e associamos a uma função, onde a mesma recebe uma função call-back como parâmetro. No corpo dessa função estamos percorrendo o array utilizando a estrutura de repetição FOR do JavaScript. Então escrevemos “let i = 0, i < this.length; i++”, o this representa o nosso array, onde acessamos o array dentro de uma função que pertence ao prototype, ou seja, acessamos a instancia do array através do “this” neste FOR estamos percorrendo os índices. Dentro do FOR estamos chamando a função call-back passando três parâmetros, primeiro parâmetro é o próprio valor, segundo é o índice e o terceiro é o array completo. Vamos testar e ver o resultado.\n<img src=\"/uploads/2020/01/saida-do-exemplo-6.jpg\" alt=\"foreact javascript\">\n<h2>Conclusão</h2>\nChegamos ao fim de mais um artigo galera, espero ter lhe ajudado de algum forma. Que ingressa no mercado de trabalho? Se sua resposta for SIM. Participe do MEGA treinamento PROGRAMADOR FULL STACK EM 8 SEMANAS. Esse curso é 100% voltado para o mercado de trabalho, o acesso é vitalicio. <a href=\"http://bit.ly/tipscode-curso-programador-full-stack-javascript\" target=\"_blank\" rel=\"noopener\">QUERO ME TORNAR UM PROGRAMADOR FULL STACK</a>\n<a href=\"/programador-fullstack-8-semanas\"><img src=\"/uploads/2020/01/banner-JS8-1080x1080-2.png\" alt=\"\"></a>\n<h4>DO ZERO A PROGRAMADOR</h4>\nFULL STACK JAVASCRIPT (REACT + NODEJS)\nNele você vai aprender do zero: HTML 5, CSS, Bulma para criar sites responsivos, JavaScript + Lógica de programação, Git e Github, JavaScript moderno (es6+), React que é uma das libs mais pedidas pelo mercado, Express.js que é uma ferramenta de backend construída com NodeJs e muito mais!\n<a href=\"/programador-fullstack-8-semanas\">Saiba Mias!</a>\nLeia o artigo sobre NodeJS <a href=\"/conhecendo-nodejs/\">CLIQUE AQUI</a>\n","date":"2020-01-11T00:00:00.000Z","readingTime":6,"title":"Como usar o Foreach JavaScript","description":"Fala dev, vamos a mais um artigo, neste vamos abordar um tema bastante importante e que vai lhe trazer bastante produtividade na hora de escrever seus códigos em JavaScript, estudaremos neste artigo o foreach JavaScript.","imgArticle":"/thumbnail-article/como-usar-foreach.png","imgHome":"/thumbnail-home/como-usar-foreach.png"},"Navigation/0-0-15-0-0":{"expanded":false,"persistent":false},"Icon1/0-0-15-0-0-0-0-0-0-1-0":{"persistent":false}},"page":{"image":"/thumbnail-article/como-usar-foreach.png","status":200,"locale":"pt-BR","title":"Como usar o Foreach JavaScript - TipsCode","description":"Fala dev, vamos a mais um artigo, neste vamos abordar um tema bastante importante e que vai lhe trazer bastante produtividade na hora de escrever seus códigos em JavaScript, estudaremos neste artigo o foreach JavaScript."}}

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FilesExpand file tree

index.json

Latest commit

History

index.json

File metadata and controls