如何使用javascript通过对象属性将数组拆分为数组？

Question

I currently have an array that resembles the array below:

[
      {id:1,color:'red'},
      {id:2,color:'blue'},
      {id:3,color:'red'},
      {id:4,color:'green'},
      {id:5,color:'blue'},
]

I am looking for the fastest way to get something like below where I could split/sort the array by a property in the object, in this example it would be 'color' :

[
      [
        {id:1,color:'red'},
        {id:3,color:'red'},
      ],[
        {id:2,color:'blue'},
        {id:5,color:'blue'},
      ],[
        {id:4,color:'green'},
    ]
]

I could write a function for this but I was thinking there may be something to do this already in underscore.js, but had no luck finding it.

Answer 1

You need to use the groupBy function of underscore you can find it in the docs right here .

groupBy_.groupBy(list, iterator, [context])
Splits a collection into sets, grouped by the result of running each value through iterator. If iterator is a string instead of a function, groups by the property named by iterator on each of the values.

[
      {id:1,color:'red'},
      {id:2,color:'blue'},
      {id:3,color:'red'},
      {id:4,color:'green'},
      {id:5,color:'blue'},
]

_.groupBy(a, function(x){ return x.color; });

Answer 2

You can combine the _.groupBy with the _.toArray function:

var dict = [
      {id:1,color:'red'},
      {id:2,color:'blue'},
      {id:3,color:'red'},
      {id:4,color:'green'},
      {id:5,color:'blue'},
];

var grouped = _.groupBy(dict, function(x){ return x.color; });
var result = _.toArray(grouped);

Answer 3

You can get the required results using ES5 features without need of third party libraries:

var data = [
      {id:1,color:'red'},
      {id:2,color:'blue'},
      {id:3,color:'red'},
      {id:4,color:'green'},
      {id:5,color:'blue'},
];

var temp = {};
data.forEach(function(item){
    if (temp[item.color]) { 
         temp[item.color].push(item);
     } else {
       temp[item.color] = [ item ]; }   
});

var result = Object.keys(temp).map(function(key){ return temp[key]; });

In order to support older browsers use ES5 shims