What's the fastest way to split an associative Javascript array into two different arrays?

Question

I have an original data array that consists of the following structure ( Note: the links are dummy links just for the purpose of this example )...

  var densitySet = [
    { Name: "Node 1", Total: 1000, Link: "http://www.if4it.com" },
    { Name: "Node 2", Total: 1500, Link: "http://www.if4it.com" },
    { Name: "Node 3", Total: 700, Link: "http://www.if4it.com" },
    { Name: "Node 4", Total: 300, Link: "http://www.if4it.com" },
    { Name: "Node 5", Total: 1000, Link: "http://www.if4it.com" },
    { Name: "Node 6", Total: 900, Link: "http://www.if4it.com" },
    { Name: "Node 7", Total: 1090, Link: "http://www.if4it.com" },
    { Name: "Node 8", Total: 35, Link: "http://www.if4it.com" },
    { Name: "Node 9", Total: 1000, Link: "http://www.if4it.com" },
    { Name: "Node 10", Total: 99, Link: "http://www.if4it.com" }
  ];

I'd like to split the above array into two separate arrays, where the first array (called "totalsArray") would consist only of all Names and Totals (ie the first and second columns of the original array) and the second array (called "linksArray") would consist of all Names and Links (ie the first and third columns).

In other words, when done, the two new arrays would contain the following...

  var totalsArray = [
    { Name: "Node 1", Total: 1000 },
    { Name: "Node 2", Total: 1500 },
    { Name: "Node 3", Total: 700 },
    { Name: "Node 4", Total: 300 },
    { Name: "Node 5", Total: 1000 },
    { Name: "Node 6", Total: 900 },
    { Name: "Node 7", Total: 1090 },
    { Name: "Node 8", Total: 35 },
    { Name: "Node 9", Total: 1000 },
    { Name: "Node 10", Total: 99 }
  ];

  var linksArray = [
    { Name: "Node 1", Link: "http://www.if4it.com" },
    { Name: "Node 2", Link: "http://www.if4it.com" },
    { Name: "Node 3", Link: "http://www.if4it.com" },
    { Name: "Node 4", Link: "http://www.if4it.com" },
    { Name: "Node 5", Link: "http://www.if4it.com" },
    { Name: "Node 6", Link: "http://www.if4it.com" },
    { Name: "Node 7", Link: "http://www.if4it.com" },
    { Name: "Node 8", Link: "http://www.if4it.com" },
    { Name: "Node 9", Link: "http://www.if4it.com" },
    { Name: "Node 10", Link: "http://www.if4it.com" }
  ];

In my real situation, the original array ("densitySet") can be VERY long so my question is: What is the fastest and most efficient way to declare the two new arrays and iterate through the original array to populate them?

My original code looks like:

  var totalsArray = [];
  var linksArray = [];
  for(var i = 0; i < densitySet.length; i++){
    var tempArray1 = {Name: densitySet[i].Name, Total: densitySet[i].Total};
    var tempArray2 = {Name: densitySet[i].Name, Link: densitySet[i].Link};
    totalsArray.push( tempArray1 );
    linksArray.push( tempArray2 );
  };

However, I don't know that this is the FASTEST and most EFFICIENT way to create the two new arrays...

Thanks, in advance, for any help you can offer.

Answer 1

Avoid doing this if you can, it's slow. A regular for loop is the fastest:

var totals = [];
var links = [];

for (var i = 0; i < densitySet.length; i++) {
    var obj = densitySet[i];

    totals.push({
        Name: obj.Name,
        Total: obj.Total
    });

    links.push({
        Name: obj.Name,
        Link: obj.Link
    });
}

Test it: http://jsperf.com/array-splitting-2

Answer 2

Create two new arrays and then push your objects into them

var totalsArray = [];
var linksArray = [];

for(var i = 0; i < densitySet.length; i++){
    var temp = {Name: densitySet[i].Name, Total: densitySet[i].Total};
    var anotherTemp = {Name: densitySet[i].Name, Link: densitySet[i].Link};
    totalsArray.push(temp);
    linksArray.push(anotherTemp);
}

Answer 3

Something like this?

var totalsArray = new Array();
var linksArray = new Array();
desitySet.forEach(function(elem) {
    totalsArray.push(desired object here);
    linksArray.push(desired object here);
}

elem will be each individual JSON object in the array, and you can create and push new ones from that.

Answer 4

This way is much faster using map higher order function:

var totalsArray = denistySet.map(({Name, Total}) => {
    return {Name, Total};
});

var linksArray = denistySet.map(({Name, Link}) => {
    return {Name, Link};
});

You can read this article: MDN Array Map