JSFiddle - React, Tailwind, and code Playground

by f0t0n

HTML

<p>unique1() duration: <span id="unique1"></span></p>
<p>unique2() duration: <span id="unique2"></span></p>
<p>ratio: <span id="ratio"></span></p>

CSS

p {
    margin: 0 0 5px 0;
}
span {
    font-weight: 700;
}

JavaScript

function unique1(arr) {
    var u = {}, a = [];
    for(var i = 0, l = arr.length; i < l; ++i){
        if(!u.hasOwnProperty(arr[i])) {
            a.push(arr[i]);
            u[arr[i]] = 1;
        }
    }
    return a;
}

function unique2(arr) {
    var uniq = {};
    arr.forEach(function(item) { uniq[item] = true; });
    return Object.keys(uniq);
}

function getRandomElement(arr) {
    return arr[Math.floor(Math.random() * arr.length)];
}

function speedTest(arr, numOfCalls, func) {
    var start = new Date().getTime();
    for(var i = 0; i < numOfCalls; i++) {
        func(arr);
    }
    var totalTime = new Date().getTime() - start;
    return {
        total: totalTime,
        avg: totalTime / numOfCalls
    };
}

function renderTestResults(el, res) {
    el.innerHTML = "total: " + res.total + "; avg: " + res.avg;
}

var res1 = document.getElementById('unique1'),
    res2 = document.getElementById('unique2'),
    ratio = document.getElementById('ratio'),
    testArray = [],
    numbers = ["one", "two", "three", "four", "five",
                 "six", "seven", "eight", "nine", "ten"];

for(var i = 0; i < 1000; i++) {
    testArray.push(getRandomElement(numbers));
}

var test1 = speedTest(testArray, 1000, unique1),
    test2 = speedTest(testArray, 1000, unique2);
renderTestResults(res1, test1);
renderTestResults(res2, test2);
ratio.innerHTML = test2.total / test1.total;