Cloning an Object (v70)

Revision 70 of this benchmark created on

Description

There is no quick and easy facility for cloning an object, Some people recommend using JQuery.extend others JSON.parse/stringify

http://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-clone-a-javascript-object

If you want the fastest possible clone function. I would personally anticipate the data structure of your object and write a custom clone to handle it.

Preparation HTML

<script src="http://code.jquery.com/jquery-1.5.1.js" type="text/javascript">
</script>
<script>
  var oldObject = {
    a: 1,
    b: 2,
    c: 3,
    d: new Date,
    e: 5,
    f: 9,
    g: [7, 8, 9]
  };

  function clone(obj) {
    var target = {};
    for (var i in obj) {
      if (obj.hasOwnProperty(i)) {
        target[i] = obj[i];
      }
    }
    return target;
  }

  Object.defineProperties(Object, {
    'extend': {
      'configurable': true,
      'enumerable': false,
      'value': function extend(what, wit) {
        var extObj, witKeys = Object.keys(wit);

        extObj = Object.keys(what).length ? Object.clone(what) : {};

        witKeys.forEach(function(key) {
          Object.defineProperty(extObj, key, Object.getOwnPropertyDescriptor(wit, key));
        });

        return extObj;
      },
      'writable': true
    },
    'clone': {
      'configurable': true,
      'enumerable': false,
      'value': function clone(obj) {
        return Object.extend({}, obj);
      },
      'writable': true
    }
  });

  function structuredClone(obj) {
/*    var oldState = history.state;
    history.replaceState(obj);
    var clonedObj = history.state;
    history.replaceState(oldState);
    return clonedObj;*/
  }

  var pendingCallbacks = {};

  window.addEventListener('message', function(e) {
    var cloneId = e.data.cloneId,
        clonedValue = e.data.value;

    if (e.source === window && cloneId && cloneId in pendingCallbacks) {
      var callback = pendingCallbacks[cloneId];
      delete pendingCallbacks[cloneId];
      callback(clonedValue);
    }
  });

  var asyncStructuredClone = function(o, callback) {
      var cloneId = String(Math.random());
      pendingCallbacks[cloneId] = callback;
      window.postMessage({
        value: o,
        cloneId: cloneId
      }, '*');
      };
</script>
<script src="https://rawgithub.com/Jamtis/FluidWeb/master/FluidWeb/WebContent/lib/scripts/FluidWeb.js"
onload="FluidWeb.Module.provideSystemModule('Object')">
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
JQuery.extend deep
var newObject = jQuery.extend(true, {}, oldObject);
ready
JSON
 
ready
JQuery.extend
 
ready
simple clone function
 
ready
ES5 Object.clone
 
ready
structured clone (using history)
var newObject = structuredClone(oldObject);
ready
async structured clone (using postMessage)
// async test
asyncStructuredClone(oldObject, deferred.resolve);
ready
FluidWeb Object clone
FluidWeb.Modules.Object.clone(oldObject);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.