AngularJS中如何通过单次循环实现数组按name属性分组优化性能

当然可以通过单次循环完成分组，这样能避免多次遍历大数据量数组带来的性能损耗，完美解决你提到的性能问题！

实现代码 #

var values = [{ id: 1, name: "item1_g1" }, { id: 2, name: "item2_g2" }, { id: 3, name: "item3_g1" }, { id: 2, name: "item4_g2" }];
var groupedResult = {};

// 单次遍历完成所有分组
values.forEach(function(item) {
    // 从name属性中提取分组标识（这里假设格式为"xxx_gx"，通过下划线分割获取）
    var groupKey = item.name.split('_')[1];
    
    // 如果当前分组尚未初始化，先创建空数组
    if (!groupedResult[groupKey]) {
        groupedResult[groupKey] = [];
    }
    
    // 将元素推入对应分组数组
    groupedResult[groupKey].push(item);
});

// 按需获取指定分组（如果分组不存在则返回空数组）
var group1 = groupedResult['g1'] || [];
var group2 = groupedResult['g2'] || [];

console.log(group1, group2);

方案优势 #

• 性能更优：仅遍历数组一次，时间复杂度为O(n)，而原两次filter实现的时间复杂度是O(2n)，数据量越大，性能提升越显著。
• 扩展性强：如果后续新增g3、g4等分组，无需额外编写新的过滤逻辑，代码会自动适配新的分组标识。
• 灵活适配分组规则：如果你的name属性格式有变化，比如不是下划线分割，可以调整分组标识的提取方式，例如用正则匹配：

  // 匹配name中类似g1、g2的分组标识
  var groupKey = item.name.match(/g\d+/)[0];
  

原实现的性能问题 #

原方案中两次调用filter方法，每次都会完整遍历整个数组。当数组包含大量元素时，重复遍历会增加不必要的计算开销，尤其在AngularJS的消化循环（digest cycle）中，这类重复操作可能导致页面响应变慢甚至卡顿。

内容的提问来源于stack exchange，提问作者Neji Soltani