javascript - 按属性对数组中的元素进行分组

Question

我正在尝试从下面的 json 中过滤相同的颜色对象，并且每个颜色值都包含两个值（颜色和数值）的组合，但我只想根据颜色进行过滤。

这是我尝试过的

var _ = require('underscore-plus');
var data = [{
"name": "jim",
    "color": "blue 1",
    "age": "22"
}, {
"name": "Sam",
    "color": "blue 2",
    "age": "33"
}, {
"name": "eddie",
    "color": "green 1",
    "age": "77"
},
{
"name": "Dheeraj",
    "color": "blue 3",
    "age": "25"
},
{
"name": "Suraj",
    "color": "green 1",
    "age": "25"
}
];

var result=_.groupBy(data,"color");
console.log(result)

结果应该是具有相同颜色的对象数组。

[{ "name": "jim", "color": "blue 1", "age": "22" },
 { "name": "Sam", "color": "blue 2", "age": "33" },
 { "name": "Dheeraj", "color": "blue 3", "age": "25" }]

和

[{ "name": "Suraj", "color": "green 1", "age": "25" },
 { "name": "eddie", "color": "green 1", "age": "77" }]

Answer 1

例如你可以使用Jquery.grep()

var result = $.grep(data, function(n){ return n.color == "blue 3" })

Answer 2

只需使用下划线文档here 中详述的groupBy 函数：

var result = _.groupBy(data, function(datum) { return datum.color; });

您需要提供一个要使用的函数，该函数将返回用于分组元素的属性，在本例中为颜色。

如果您想过滤，如问题中所述，您可以使用下划线filter 方法：

var blueOne = _.filter(data, function(datum){ return datum.color == 'blue 1'; });

Answer 3

你可以按颜色分组。

var data = [{ "name": "jim", "color": "blue 1", "age": "22" }, { "name": "Sam", "color": "blue 2", "age": "33" }, { "name": "eddie", "color": "green 1", "age": "77" }, { "name": "Dheeraj", "color": "blue 3", "age": "25" }, { "name": "Suraj", "color": "green 1", "age": "25" }],
    grouped = {},
    colors;

data.forEach(function (a) {
    var group = a.color.match(/^[a-z]+/i);
    grouped[group] = grouped[group] || [];
    grouped[group].push(a);			
});
colors = Object.keys(grouped);
colors.forEach(function (color) {
    console.log(color, grouped[color]);
});

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 4

您可以使用Array.prototype.reduce对项目进行分组：

var data = [{
  "name": "jim",
  "color": "blue 1",
  "age": "22"
}, {
  "name": "Sam",
  "color": "blue 2",
  "age": "33"
}, {
  "name": "eddie",
  "color": "green 1",
  "age": "77"
}, {
  "name": "Dheeraj",
  "color": "blue 3",
  "age": "25"
}, {
  "name": "Suraj",
  "color": "green 1",
  "age": "25"
}];

var result = data.reduce(function(grouped, obj) {
  var key = obj.color.split(' ')[0]; // get the color from the key
  grouped[key] = (grouped[key] || []).concat(obj); // use the existing array or create a new array, add the object to it, and assign it to the grouped object
  
  return grouped; // return the grouped object
}, {});

console.log(result);