JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    Test requires a modern browser that supports ES2015.<br/><br/>  
    Please wait - tests are running ...
</div>

JavaScript

const
  itemCount = 10000,
  loopCount = 10000,
	array = [], // will be filled below
  tests = [], // will be filled below
  contentContainer = document.getElementById('content'),

  iterable = {
    [Symbol.iterator]: function* () {
       for (let i = 0; i < itemCount; ++i) {
           yield i;
       }
    }
  }; 

let report = '';
  
for (let i = 0; i < itemCount; ++i) {
  array.push(i);
}

tests[0] = () => {
  let sum = 0;

  for (let i = 0; i < itemCount; ++i) {
    sum += array[i];
  }
  
  return sum;
};

tests[1] = () => {
  let sum = 0;

  for (const n of array) {
    sum += n;
  }
  
  return sum;
};

tests[2] = () => {
  return array.reduce((n, m) => n + m, 0);
};

tests[3] = () => {
  let sum = 0;

  for (const n of iterable) {
    sum += n;
  }
  
  return sum;
};

console.log('--------------------------');

for (let i = 0; i < tests.length; ++i) {
  const
    test = tests[i],
  	startTime = Date.now();
  
  let result = null;
  
  for (let j = 0; j < loopCount; ++j) {
    result = test();
  }

  const
  	stopTime = Date.now(),
  	duration = (stopTime - startTime) + ' ms';

  const message = `Time needed for test #${i}: ${duration}`;

  if (i == 0) {
    report = message;
  } else {
  	report += '<br/>' + message;
  }
  
  console.log(`Result of test #${i}: ${result}`);
}

report += '<br/><br/>Finished.';
contentContainer.innerHTML = report;