├── README.md
├── dowhile.js
├── every.js
├── filter.js
├── filter2.js
├── find.js
├── for.js
├── foreach.html
├── foreach.js
├── forin.js
├── forof.js
├── forof2.js
├── forof3.js
├── forof4.html
├── map.js
├── reduce.js
├── reduce2.js
├── some.js
└── while.js


/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | # 8 Formas de usar Looping em Arrays no JavaScript 
  3 | 
  4 | # 1. For 
  5 | > A instrução for cria um loop que consiste em três expressões opcionais, dentro de parênteses e separadas por ponto e vírgula, seguidas por uma declaração ou uma sequência de declarações executadas em sequência.
  6 | #### Syntax
  7 | ```javascript
  8 | for (let i = 0; condição; i++) {
  9 |   declaração
 10 | }  
 11 | ```
 12 | 
 13 | 
 14 | 
 15 | # 2. While
 16 | > A declaração while cria um laço que executa uma rotina especifica enquanto a condição de teste for avaliada como verdadeira. A condição é avaliada antes da execução da rotina.
 17 | #### Syntax
 18 | ```javascript
 19 | while (condição) {
 20 |   rotina
 21 | }
 22 | ``` 
 23 | 
 24 | # 3. ForEach
 25 | > O forEach executa o callback fornecido uma vez para cada elemento da ordem com um valor atribuido. Ele não é invocado para propriedades de índices que foram deletados ou que não foram inicializados (por ex. em arrays esparsos).
 26 | 
 27 | ```javascript
 28 | array.forEach(function(element, index) {
 29 | declaração
 30 | })
 31 | ```
 32 | 
 33 | > Obs: O seu return é sempre undefined
 34 | 
 35 | # 4. Map
 36 | > O método map() invoca a função callback passada por argumento para cada elemento do Array e devolve um novo Array como resultado.
 37 | 
 38 | #### Sintaxe
 39 | ```javascript
 40 | array.map(function(element, index) {
 41 | declaração
 42 | })
 43 | ```
 44 | 
 45 | # 5. Filter
 46 | > O método filter() cria um novo array com todos os elementos que passaram no teste implementado pela função fornecida.
 47 | 
 48 | #### Sintaxe
 49 | ```javascript
 50 | let newArray = array.filter(function(element, index) {
 51 | declaração
 52 | })
 53 | ```
 54 | 
 55 | # 6. Reduce  
 56 | > O método reduce() executa uma função redutor (fornecida por você) para cada elemento do array, resultando num único valor de retorno.
 57 | 
 58 | > O valor de retorno da sua função reducer é atribuída ao acumulador. O acumulador, com seu valor atualizado, é repassado para cada iteração subsequente pelo array, que por fim, se tornará o valor resultante, único, final.
 59 | 
 60 | #### Sintaxe
 61 | ```javascript
 62 | array.reduce(function(acumulador, valorAtual) {
 63 |   declaração
 64 | }, valorInicial)
 65 | ```
 66 | 
 67 | ## parâmetros
 68 | ##### function
 69 | > é executada em cada valor no array (exceto no primeiro, se nenhum valorInicial for passado); recebe quatro argumentos:
 70 | ##### acumulador
 71 | > O valor retornado na última invocação do callback, ou o argumento valorInicial, se fornecido (exemplo abaixo).
 72 | ##### valorAtual
 73 | > O elemento atual que está sendo processado no array.
 74 | ##### valorInicial  
 75 | > Opcional. Valor a ser usado como o primeiro argumento da primeira chamada da função callback. Se nenhum valorInicial é fornecido, o primeiro elemento do array será usado como o valor inicial do acumulador e o valorAtual não será lido. Chamar reduce() em uma array vazia sem valor inicial retornará um erro.
 76 | 
 77 | # 7. Every  
 78 | > O método every() testa se todos os elementos do array passam pelo teste implementado pela função fornecida.
 79 | 
 80 | ### Sintaxe
 81 | arr.every(callback[, thisArg])
 82 | ```javascript
 83 | array.every(function(element) {
 84 |   declaração
 85 | })
 86 | ```
 87 | 
 88 | #### Valor de retorno
 89 | >true se a função de callback retorna um valor truthy para cada um dos elementos do array; caso contrário, false.
 90 | 
 91 | # 8. Some
 92 | > O método some() testa se algum dos elementos no array passam no teste implementado pela função atribuída.
 93 | 
 94 | #### Sintaxe
 95 | ```javascript
 96 | array.some(function(element) {
 97 |   declaração
 98 | })
 99 | ```
100 | 
101 | > some() executa a função callback uma vez para cada elemento presente no array até achar um onde o callback retorne um valor true. Se em qualquer dos elementos o valor for encontrado, some() imediatamente retorna true. Caso contrario, some() retorna false.
102 | 


--------------------------------------------------------------------------------
/dowhile.js:
--------------------------------------------------------------------------------
 1 | const bolsaVanessa = [
 2 |     'cartão de crédito',
 3 |     'chaves',
 4 |     'dinheiro',
 5 |     'escova de cabelo',
 6 |     'lenço de papel',
 7 |     'perfume',
 8 |     'alcool gel'
 9 | ]
10 | 
11 | let index = 0
12 | do {
13 |     console.log(`${index + 1}. ${bolsaVanessa[index]}`)
14 |     index++
15 | }
16 | while (index < bolsaVanessa.length)


--------------------------------------------------------------------------------
/every.js:
--------------------------------------------------------------------------------
 1 | const idadeFamilia = [{
 2 |         nome: 'Vanessa',
 3 |         idade: 39
 4 |     },
 5 |     {
 6 |         nome: 'Gabriel',
 7 |         idade: 39
 8 |     },
 9 |     {
10 |         nome: 'Bielzinho',
11 |         idade: 11
12 |     },
13 |     {
14 |         nome: 'Felipe',
15 |         idade: 3
16 |     },
17 | ]
18 | 
19 | const ehAdulto = valor => valor.idade >= 18
20 | const somenteAdulto = idadeFamilia.every(ehAdulto)
21 | console.log(somenteAdulto)


--------------------------------------------------------------------------------
/filter.js:
--------------------------------------------------------------------------------
1 | const numeros = [12, 24, 56, 34, 2, 567, 2, 6, 88, 3, 5, 7, 754]
2 | const par = n => n % 2 === 0
3 | const numerosPar = numeros.filter(par)
4 | 
5 | console.log(`Array com numeros pares: ${numerosPar}`)


--------------------------------------------------------------------------------
/filter2.js:
--------------------------------------------------------------------------------
 1 | const videoResolutions = [
 2 |     ['QVGA', '320x240', '4:3'],
 3 |     ['VGA', '640x480', '4:3'],
 4 |     ['VGA', '720x480', '4:3'],
 5 |     ['SVGA', '800x600', '4:3'],
 6 |     ['XGA', '1024x768', '16:9'],
 7 |     ['WXGA - HD¹/720p', '1280x720', '16:9'],
 8 |     ['WXGA¹', '1366x768', '16:9'],
 9 |     ['WXGA +', '1440x900', '16:10(8:5)'],
10 |     ['UXGA', '1600x900', '16:9'],
11 |     ['UXGA++', '1680x1050', '16:10(8:5)'],
12 |     ['Full HD / 1080p', '1920x1080', '16:9'],
13 |     ['Full HD Ultra Wide[1]', '2560x1080', '21:9'],
14 |     ['WQHD', '2560x1440', '16:9'],
15 |     ['4K Ultra HD / 2160p', '3840x2160', '16:9'],
16 |     ['8K UHDTV / 4320p', '7680x4320', '16:9'],
17 |     ['10K UHDTV', '10240×4320', '21:9'],
18 |     ['10K UHDTV', '10328×7760', '4:3'],
19 | ]
20 | 
21 | const resolution16_9 = videoResolutions.filter(value => value[2] === '16:9')
22 | 
23 | console.log(resolution16_9)


--------------------------------------------------------------------------------
/find.js:
--------------------------------------------------------------------------------
 1 | const sobremesas = [{
 2 |         nome: 'pudim',
 3 |         diet: true,
 4 |     },
 5 |     {
 6 |         nome: 'gelatina',
 7 |         diet: false,
 8 |     },
 9 |     {
10 |         nome: 'bolo de chocolate',
11 |         diet: false,
12 |     },
13 |     {
14 |         nome: 'pavê',
15 |         diet: true,
16 |     },
17 | ];
18 | 
19 | const isDiet = item => item.diet
20 | const sobremesa = sobremesas.find(isDiet);
21 | console.log(sobremesa)


--------------------------------------------------------------------------------
/for.js:
--------------------------------------------------------------------------------
 1 | const bolsaVanessa = [
 2 |     'cartão de crédito',
 3 |     'chaves',
 4 |     'dinheiro',
 5 |     'escova de cabelo',
 6 |     'lenço de papel',
 7 |     'perfume',
 8 |     'alcool gel'
 9 | ]
10 | 
11 | for (let index = 0; index < bolsaVanessa.length; index++) {
12 |     console.log(`${index+1}. ${bolsaVanessa[index]}`)
13 |     if (bolsaVanessa[index] == 'dinheiro') break
14 | }
15 | 
16 | for (let index = 0; index < bolsaVanessa.length; index++) {
17 |     if (bolsaVanessa[index] == 'dinheiro') continue
18 |     console.log(`${index+1}. ${bolsaVanessa[index]}`)
19 | }


--------------------------------------------------------------------------------
/foreach.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>ForEach</title>
 8 | 
 9 |     <style>
10 |         .container {
11 |             display: flex;
12 |             flex-wrap: wrap;
13 |         }
14 | 
15 |         .block {
16 |             margin: 5px auto;
17 |             width: 500px;
18 |             height: 200px;
19 |             background-color: blueviolet;
20 |             color: #fff;
21 |         }
22 |     </style>
23 | </head>
24 | 
25 | <body>
26 | 
27 |     <button onclick='divs.forEach(hide)'>Esconder</button>
28 |     <button onclick='divs.forEach(show)'>Mostrar</button>
29 | 
30 |     <div class="container">
31 |         <div class="block">Bloco 1</div>
32 |         <div class="block">Bloco 2</div>
33 |         <div class="block">Bloco 3</div>
34 |         <div class="block">Bloco 4</div>
35 |         <div class="block">Bloco 5</div>
36 |         <div class="block">Bloco 6</div>
37 |         <div class="block">Bloco 7</div>
38 |         <div class="block">Bloco 8</div>
39 |     </div>
40 | 
41 |     <script>
42 |         const divs = Array.from(document.querySelectorAll('.block'))
43 |         const hide = el => el.style.display = 'none'
44 |         const show = el => el.style.display = 'block'
45 |     </script>
46 | 
47 | </body>
48 | 
49 | </html>


--------------------------------------------------------------------------------
/foreach.js:
--------------------------------------------------------------------------------
 1 | const bolsaVanessa = [
 2 |     'cartão de crédito',
 3 |     'chaves',
 4 |     'dinheiro',
 5 |     'escova de cabelo',
 6 |     'lenço de papel',
 7 |     'perfume',
 8 |     'alcool gel'
 9 | ]
10 | 
11 | bolsaVanessa.forEach((value, index) => {
12 |     console.log(`${index+1}. ${value}`)
13 | })


--------------------------------------------------------------------------------
/forin.js:
--------------------------------------------------------------------------------
 1 | const familia = [{
 2 |         nome: 'Gabriel',
 3 |         papel: 'pai'
 4 |     },
 5 |     {
 6 |         nome: 'Vanessa',
 7 |         papel: 'mae'
 8 |     },
 9 |     {
10 |         nome: 'Gabriel',
11 |         papel: 'filho'
12 |     },
13 |     {
14 |         nome: 'Felipe',
15 |         papel: 'filho'
16 |     },
17 | ]
18 | 
19 | for (let pessoa in familia) {
20 |     console.log(familia[pessoa])
21 | }


--------------------------------------------------------------------------------
/forof.js:
--------------------------------------------------------------------------------
 1 | const bolsaVanessa = [
 2 |     'cartão de crédito',
 3 |     'chaves',
 4 |     'dinheiro',
 5 |     'escova de cabelo',
 6 |     'lenço de papel',
 7 |     'perfume',
 8 |     'alcool gel'
 9 | ]
10 | 
11 | for (let item of bolsaVanessa) {
12 |     console.log(item)
13 | }


--------------------------------------------------------------------------------
/forof2.js:
--------------------------------------------------------------------------------
 1 | const videos = [{
 2 |         id: 'p9mqWsPJEY4',
 3 |         title: 'Teclado Mecânico é Melhor pra Programação? + Desafio de Youtubers Tech // Vlog #117',
 4 |         views: 37208
 5 |     },
 6 |     {
 7 |         id: 'Vxl5jUltHBo',
 8 |         title: 'Python na Prática fazendo Web Scraping (de JavaScript dinâmico) // Mão no Código #28',
 9 |         views: 22510
10 |     },
11 |     {
12 |         id: 'Xzt7GbQIQTk',
13 |         title: 'As TOP 7 Profissões de Tecnologia do Futuro (O PROGRAMADOR VAI ACABAR?) // Vlog #112',
14 |         views: 34732
15 |     },
16 | ]
17 | 
18 | for (let video of videos) {
19 |     console.log(video)
20 | }


--------------------------------------------------------------------------------
/forof3.js:
--------------------------------------------------------------------------------
1 | const canal = "Código Fonte TV"
2 | 
3 | for (let letra of canal) {
4 |     console.log(letra)
5 | }


--------------------------------------------------------------------------------
/forof4.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |     <title>For Of</title>
 8 | </head>
 9 | <style>
10 |     article p {
11 |         font-family: monospace;
12 |         font-size: 15pt;
13 |         margin: 2px;
14 |         padding: 5px;
15 |         font-weight: bold;
16 |         background-color: yellow
17 |     }
18 | 
19 |     .read {
20 |         font-weight: normal;
21 |         background-color: #f0f0f0;
22 |     }
23 | </style>
24 | 
25 | <body>
26 | 
27 |     <article>
28 |         <p>Este é o canal Código Fonte (que começou com um Blog) e que nós chamamos carinhosamente de CDFTV ou o canal
29 |             dos CDFs no Youtube.</p>
30 |         <p>Nossos CDFs são os nossos "CóDigo Fonters"!</p>
31 |         <p>Desde de Janeiro de 2016 o canal publica vídeos semanalmente comigo (Gabriel Fróes) e minha esposa Vanessa
32 |             Weber.</p>
33 |         <p>Somos um casal de programadores apaixonados por tecnologia desde 1996 e por aqui temos a missão de ajudar a
34 |             todos que queiram trabalhar com TI.</p>
35 |         <p>Falamos sobre esse mundo maravilhoso da programação de uma forma diferente e divertida, além de contar nossas
36 |             experiências na área.</p>
37 |     </article>
38 | 
39 |     <button onclick="marcar()">Marcar todos como lido</button>
40 |     <button onclick="marcar(false)">Marcar todos como não lido</button>
41 | 
42 | 
43 |     <script>
44 |         const marcar = (lido = true) => {
45 |             const paragrafos = document.querySelectorAll('article p')
46 |             for (let paragrafo of paragrafos) {
47 |                 (lido) ?
48 |                 paragrafo.classList.add('read'):
49 |                     paragrafo.classList.remove('read')
50 |             }
51 |         }
52 |     </script>
53 | 
54 | </body>
55 | 
56 | </html>


--------------------------------------------------------------------------------
/map.js:
--------------------------------------------------------------------------------
1 | const temperaturaCelsius = [0, 22, 31, 40, 45, 12, 3]
2 | const toFahrenheit = value => ((value * 9) / 5) + 32
3 | const temperaturaFahrneheit = temperaturaCelsius.map(toFahrenheit)
4 | 
5 | console.log(temperaturaCelsius)
6 | console.log(temperaturaFahrneheit)


--------------------------------------------------------------------------------
/reduce.js:
--------------------------------------------------------------------------------
 1 | const videos = [{
 2 |         id: 'p9mqWsPJEY4',
 3 |         title: 'Teclado Mecânico é Melhor pra Programação? + Desafio de Youtubers Tech // Vlog #117',
 4 |         views: 37208
 5 |     },
 6 |     {
 7 |         id: 'Vxl5jUltHBo',
 8 |         title: 'Python na Prática fazendo Web Scraping (de JavaScript dinâmico) // Mão no Código #28',
 9 |         views: 22510
10 |     },
11 |     {
12 |         id: 'Xzt7GbQIQTk',
13 |         title: 'As TOP 7 Profissões de Tecnologia do Futuro (O PROGRAMADOR VAI ACABAR?) // Vlog #112',
14 |         views: 34732
15 |     },
16 | ]
17 | 
18 | const totalViews = videos.reduce((sum, video) => {
19 |     return sum + video.views
20 | }, 0)
21 | 
22 | console.log(totalViews)


--------------------------------------------------------------------------------
/reduce2.js:
--------------------------------------------------------------------------------
 1 | const videos = [{
 2 |         id: 'p9mqWsPJEY4',
 3 |         title: 'Teclado Mecânico é Melhor pra Programação? + Desafio de Youtubers Tech // Vlog #117',
 4 |         views: 37208,
 5 |         likes: 1000
 6 |     },
 7 |     {
 8 |         id: 'Vxl5jUltHBo',
 9 |         title: 'Python na Prática fazendo Web Scraping (de JavaScript dinâmico) // Mão no Código #28',
10 |         views: 22510,
11 |         likes: 5000
12 |     },
13 |     {
14 |         id: 'Xzt7GbQIQTk',
15 |         title: 'As TOP 7 Profissões de Tecnologia do Futuro (O PROGRAMADOR VAI ACABAR?) // Vlog #112',
16 |         views: 34732,
17 |         likes: 5700
18 |     },
19 | ]
20 | 
21 | const totalViews = videos.reduce((sum, video) => {
22 |     sum.views += video.views
23 |     sum.likes += video.likes
24 |     return sum
25 | }, {
26 |     views: 0,
27 |     likes: 0
28 | })
29 | 
30 | console.log(totalViews)


--------------------------------------------------------------------------------
/some.js:
--------------------------------------------------------------------------------
 1 | const idadeFamilia = [{
 2 |         nome: 'Vanessa',
 3 |         idade: 39
 4 |     },
 5 |     {
 6 |         nome: 'Gabriel',
 7 |         idade: 39
 8 |     },
 9 |     {
10 |         nome: 'Bielzinho',
11 |         idade: 11
12 |     },
13 |     {
14 |         nome: 'Felipe',
15 |         idade: 3
16 |     },
17 | ]
18 | 
19 | const ehAdulto = valor => valor.idade >= 18
20 | const temAdulto = idadeFamilia.some(ehAdulto)
21 | console.log(temAdulto)


--------------------------------------------------------------------------------
/while.js:
--------------------------------------------------------------------------------
 1 | const bolsaVanessa = [
 2 |     'cartão de crédito',
 3 |     'chaves',
 4 |     'dinheiro',
 5 |     'escova de cabelo',
 6 |     'lenço de papel',
 7 |     'perfume',
 8 |     'alcool gel'
 9 | ]
10 | 
11 | let index = 0
12 | while (index < bolsaVanessa.length) {
13 |     console.log(`${index + 1}. ${bolsaVanessa[index]}`)
14 |     index++
15 | }


--------------------------------------------------------------------------------