Arrays

    Resumo/Informações
    • Array 01
      const boxes = document.querySelector('.box');

      ES5
      var boxesArr5 = Array.prototype.slice.call(boxes);
      boxesArr5.forEach(fcuntion(cur) {
      cur.style.backgroundColor = 'dodgerblue';
      });

      ES6
      const boxesArr6 = Array.from(boxes); transforms the node list that we have in boxes to an array
      boxesArr6.forEach(cur => cur.style.backgroundColor = 'dodgerBlue');

      or

      Array.from(boxes).forEach(cur => cur.style.backgroundColor = 'dodgerblue');
      * Both this examples selects all the boxes (because it selects the class .box) and changes it's colors to dodger blue.

      * Agora para alterar o escrito das boxes do nome da cor que estava, por exemplo I'm green!, I'm orange para outros nomes.

      ES5
      for(var i = 0; i < boxArr5.length; i++) {
      if(boxesArr5[i].className === 'boxblue') { className returns the name of the class
      continue; continue simply will skip this iteration of the loop and continue to the next.
      continue because if the className is boxblue, it means it was already blue, so it shoudn't have it's name changed to 'I changed to blue'.
      }

      boxesArr5[i].textContent = 'I changed to blue!'; //boxesArr5[posicaoAtual].textContent (para mudar o texto) = 'texto que quero';
      }

      ES6
      for(const cur of boxesArr6) { creat a new variable (const), define the element name (cur), we say that this is an element of the boxArr6. (of boxesArr6)
      if (cur.className === 'boxblue') {
      continue;
      }
      cur.textContent = ' I changed to blue!';
      }

      or
      for(const cur of boxesArr6) { creat a new variable (const), define the element name (cur), we say that this is an element of the boxArr6. (of boxesArr6)
      if (cur.className.includes('blue')) { aqui verifica se existe 'blue' no nome da classe, para não precisar digitar o nome inteiro da classe.
      continue;
      }
      cur.textContent = ' I changed to blue!';
      }
    • Array 02
      Suppose that we have a group of people and we know that only one of them is of full age.
      Let's find out who and hold old the person is.

      ES5
      var ages = [12, 17, 8, 21, 14, 11];

      var full = ages.map(function(cur){ cur = current element
      return cur >= 18; returns if the current element is >= 18
      the return of this will be the array: [false, false, false, true, false, false]
      });

      console.log(full.indexOf(true)); indexOf(true), visto que onde está como true a pessoa encaixa em >= 18 anos.
      console.log(ages[full.indexOf(true)]); shows the age number, 23.

      ES6
      ages.findIndex(cur => cur >= 18); return the element of which the expression cur >= 18 is true
      returns 3, the index, or the position number the true is on the array.

      ages.find(cur => cur >= 18); shows the value of where is true, so 23.