kaniosrn-j
7/22/2017 - 8:41 AM

Array in ES5/ES6

Array in ES5/ES6

/**
 * Array in ES5/ES6
******************************************************/
const boxes = document.querySelectorAll('.box')

// ES5
  var boxesArr5 = Array.prototype.slice.call(boxes)
  boxesArr5.forEach(function(element) {
      console.log('ES5')
      return element.style.backgroundColor = 'dodgerblue'
  }, this);


// ES6
  var boxesArr6 = Array.from(boxes)
  boxesArr6.forEach(element => element.style.backgroundColor = 'dodgerblue')
  console.log('ES6')
  console.log(boxesArr6)



// ES5
  for (var i = 0; i < boxes.length; i++) {
      var element = boxes[i];
      if (element.className === 'box blue') {
          console.log(element)
          break
      }
      element.textContent = 'I\'ve changed!'
  }

// ES6
  for (const x of boxes) {
      if (x.className.includes('blue')) {
          x.textContent = 'I\'ve changed!'
          break
      }
  }


// ES5
var ages = [2, 1, 3, 35, 45, 30, 36, 42, 55]
var full = ages.map(function(element) {
    return element >= 36
});
console.log(full)

// ES6
var full = ages.find(element => element >= 3)
console.log(full)