如何在angular或javascript中计算分组数组的长度？

Question

array = [  
  {
    name: 'hello 1',
    checked: true,
    color:'#1ac3ec',
    group:'first category'
  },
  {
    name: 'hello 2',
    checked: true,
    color:'#7dc55c',
    group:'first category'
  },
  {
    name: 'hello 3',
    checked: true,
    color:'#005073',
    group:'second category'
  },{
    name: 'hello 4',
    checked: true,
    color:'#fbb330',
    group:'second category'
    }
]

我想得到每组的长度。我们怎么能得到它？

例如array.group [＆＃39; secound category＆＃39;]。length

Answer 1

您可以使用array.filter：

var array = [  
  {
    name: 'hello 1',
    checked: true,
    color:'#1ac3ec',
    group:'first category'
  },
  {
    name: 'hello 2',
    checked: true,
    color:'#7dc55c',
    group:'first category'
  },
  {
    name: 'hello 3',
    checked: true,
    color:'#005073',
    group:'second category'
  },{
    name: 'hello 4',
    checked: true,
    color:'#fbb330',
    group:'second category'
    }
];

var len1 = array.filter(e => e.group === 'first category').length;
console.log(len1);
var len2 = array.filter(e => e.group === 'second category').length;
console.log(len2);

Answer 2

您可以使用纯JavaScript执行此操作。使用Array#reduce按类别创建组，然后您可以简单地计算元素语句的数量，例如：

group['first category'].length

工作演示：

const array = [  
  {
    name: 'hello 1',
    checked: true,
    color:'#1ac3ec',
    group:'first category'
  },
  {
    name: 'hello 2',
    checked: true,
    color:'#7dc55c',
    group:'first category'
  },
  {
    name: 'hello 3',
    checked: true,
    color:'#005073',
    group:'second category'
  },{
    name: 'hello 4',
    checked: true,
    color:'#fbb330',
    group:'second category'
    }
];

const group = array.reduce((acc, item) => {
  if (!acc[item.group]) {
    acc[item.group] = [];
  }
  
  acc[item.group].push(item);
  return acc;
}, {});

console.log(group['first category'].length);
console.log(group['second category'].length);

Answer 3

如果您需要找到一个特定群组名称的长度，请使用.filter;如果您需要找出所有群组名称，请使用reduce：

const input = [  
  {
    name: 'hello 1',
    checked: true,
    color:'#1ac3ec',
    group:'first category'
  },
  {
    name: 'hello 2',
    checked: true,
    color:'#7dc55c',
    group:'first category'
  },
  {
    name: 'hello 3',
    checked: true,
    color:'#005073',
    group:'second category'
  },{
    name: 'hello 4',
    checked: true,
    color:'#fbb330',
    group:'second category'
    },{
    name: 'hello 4',
    checked: true,
    color:'#fbb330',
    group:'sole category'
    }
];
const groups = input.reduce((accum, { group }) => {
  accum[group] = (accum[group] || 0) + 1;
  return accum;
}, {});
console.log(groups);

Answer 4

虽然冗长但这应该是更清洁的解决方案：

var array = [  
  {
    name: 'hello 1',
    checked: true,
    color:'#1ac3ec',
    group:'first category'
  },
  {
    name: 'hello 2',
    checked: true,
    color:'#7dc55c',
    group:'first category'
  },
  {
    name: 'hello 3',
    checked: true,
    color:'#005073',
    group:'second category'
  },{
    name: 'hello 4',
    checked: true,
    color:'#fbb330',
    group:'second category'
    }
];

var name = checked = color = group = 0;
array.forEach(function(item){
if(item.name){
    name++;
}
if(item.checked){
    checked++;
}
if(item.color){
    color++;
}
if(item.group){
    group++;
}
});
console.log(name);
console.log(checked);
console.log(color);
console.log(group);