从对象数组构建对象的最高效方式

Question

Currently, I'm building an object from an array of objects with the following:

var popOverOptions = {
  defaultOption: true
}

if (a) {
  options.push({a: "b"});
}

if (c) {
  options.push({c: "d"});
}

// Loop through array of objects
for (var i = 0; i < options.length; i++) {
   // Add objects in array to popoverOptions object
   for (key in options[i]) {
     popoverOptions[key] = options[i][key]
   }
}

I'm thinking this could be optimized and I'm curious if there is a better way to write this, possibly using .reduce(), .forEach() or some other method.

Answer 1

In ECMAScript 6, you can use

• Object.assign to copy the properties to popOverOptions
• The spread operator to expand the options array.

Object.assign(popOverOptions, ...options);

Answer 2

You can optimise the loop itself like this:

for (var i=0, n=options.length; i<n; ++i) {

This reduces the number of times you need to access options.length which is slower than reading it from a local.

A smaller optimisation:

for (var i=options.length-1; i--; /* empty */) {

Source: http://www.phpied.com/extreme-javascript-optimization/

Answer 3

You can cache length for a slight speed improvement.

If the keys in your array are identical for each element, you can get twice the speed (in Chrome) by caching Object.keys(options[0]) , and iterating through that.

Even if the keys aren't the same, you can still get approx. 25% increase in speed by iterating through Object.keys(options[i]) .

 var options= []; for(var i = 0 ; i <= 1000 ; i++) { //create array of objects with random numbers options[i]= {}; for(var j = 0 ; j <= 5000 ; j++) { options[i][j]= Math.random(); } } var popOverOptions = {}; function keyin() { var timer= new Date(); for(var i = 0, leni = options.length ; i < leni; i++) { for(var key in options[i]) { popOverOptions[key] = options[i][key]; } } alert((new Date()-timer)/1000+' seconds'); } //keyin function objkeys(same) { var timer= new Date(), keys= Object.keys(options[0]); for(var i = 0, leni = options.length ; i < leni; i++) { if(!same) keys= Object.keys(options[i]); for(var key = 0, lenk = keys.length ; key < lenk ; key++) { popOverOptions[keys[key]] = options[i][keys[key]]; } } alert((new Date()-timer)/1000+' seconds'); } //objkeys 

 <button onclick="keyin()">key in options</button><br> <button onclick="objkeys(true)">Object.keys, same keys per element</button><br> <button onclick="objkeys(false)">Object.keys, different keys per element</button>