JSFiddle - React, Tailwind, and code Playground

by loopmode

HTML

<div class="app">
    <h1><a href="http://davidwalsh.name/combining-js-arrays">http://davidwalsh.name/combining-js-arrays</a>
    </h1>
    <label>iterations:</label>
    <input type="text" value="100, 1000, 10000, 100000" />
    <button>run</button>
    <div class="log"></div>
</div>

CSS

.app {
    width: 500px;
    overflow: hidden;
    font-family: Arial;
    font-size: 11px;
}
label {
    display: inline-block; 
    width: 50px;
}
input {
    display: inline-block; 
    padding: 5px;
    width: 430px;
}
button {display: block; width: 100%; padding: 10px;}
.log {
    padding: 5px;
    background: #ddd;
}

JavaScript

$(document).on('click', 'button', run);
 
var methods = {
    apply: function(a, b) {
        a.push.apply( a, b );
    },
    forLoop: function(a, b) {
        for (var i=0; i < b.length; i++) {
            a.push( b[i] );
        }
    },
    whileLoop: function(a, b) {
        while (b.length) {
            a.push(b.shift());
        }
    },
    reduce: function(a, b) {
        a = b.reduce( function(coll,item){
            coll.push( item );
            return coll;
        }, a );
    }
};

function run() {
    logReset();
    var iterations = getIterationsFromInput();
    
    $.each(iterations, function(i) {
        var numItems = iterations[i];
        log(numItems + ' items:');
        $.each(methods, function(name, method) {
   
            var a = createData('a', numItems);
            var b = createData('b', numItems);        
            
            var t = new Date().getTime();
            method(a, b);             
            log(name + ': ' + (new Date().getTime() - t) + 'ms');
        });
        log('----');
    });
}

function createData(name, size) {
    var data = [];
    for (var i=0; i<size; i++) {
        var obj = {};
        obj[name] = name + '_' + i;
        data.push(obj);
    }
    return data;
}

function getIterationsFromInput() {
    var result = [];
    $.each($('input').val().split(','), function(i, value) {
        result.push(Number(value));
    });
    return result;
}

function log(msg, reset) {
    $('.log')[0].innerHTML += msg + '<br>';
}
function logReset() {
    $('.log')[0].innerHTML = '';
}