Angular中遍历数组实现付款选项分组展示的最优方案是什么

你提到的hashmap（哈希映射）方案完全可行，而且是当前场景下的最优解，比你现在硬编码拆分不同时长数组的方案扩展性、维护性都高很多。

具体实现方案 #

1. 数据分组处理

对API返回的原始数组做一次聚合分组，以serviceLength作为分组的key，仅需遍历一次即可完成分组，时间复杂度为O(n)，示例代码（TS环境）：

// 原始API返回数据
const options = [
  { price: 10,
    serviceLength: "1 year",
    paymentFrequency: "monthly payment",
  },
  { price: 100,
    serviceLength: "1 year",
    paymentFrequency: "one-time payment",
  },
  { price: 8,
    serviceLength: "2 year",
    paymentFrequency: "monthly payment",
  },
  { price: 150,
    serviceLength: "2 year",
    paymentFrequency: "one-time payment",
  },
]

// 生成分组哈希映射
const groupedOptions = options.reduce((acc, curr) => {
  const key = curr.serviceLength;
  // 不存在对应分组则先初始化
  if (!acc[key]) {
    acc[key] = [];
  }
  acc[key].push(curr);
  return acc;
}, {} as Record<string, typeof options[0]>);

处理后的数据结构如下，不需要提前声明1年、2年的单独变量，后续新增任意时长的服务都会自动归入对应分组：

{
  "1 year": [月付选项, 一次性预付选项],
  "2 year": [月付选项, 一次性预付选项]
}

2. Angular模板渲染

Angular 6+可以直接用内置的keyvalue管道遍历哈希映射对象，模板代码如下：

<div *ngFor="let group of groupedOptions | keyvalue: sortByLength">
  <!-- 自动生成标题，比如"1 year"转为"1 Year Service" -->
  <h3>{{ group.key | titlecase }} Service</h3>
  <ul>
    <li *ngFor="let option of group.value">
      {{ option.paymentFrequency === 'monthly payment' ? 'Monthly' : 'Upfront' }} - ${{ option.price.toFixed(2) }}
    </li>
  </ul>
</div>

如果需要固定服务时长的展示顺序（比如按1年、2年、3年升序排列），可以新增一个排序函数传入keyvalue管道：

// 组件内排序方法
sortByLength = (a, b) => {
  return Number(a.key.split(' ')[0]) - Number(b.key.split(' ')[0]);
}

方案优势 #

• 无硬编码逻辑，后续新增3年、5年服务，或者新增按季度付费等新付款方式，都不需要修改分组逻辑，仅需调整文案映射规则即可
• 分组效率更高，仅需遍历一次原始数组，比多次过滤拆分的方案性能更好
• 模板代码更简洁，避免多层嵌套的冗余逻辑

内容的提问来源于stack exchange，提问作者Billy Keef