TypeScript 中使用 reduce 按属性对对象数组进行分组的完整指南-js教程-PHP中文网

TypeScript 中使用 reduce 按属性对对象数组进行分组的完整指南

本文详解如何在 TypeScript 中利用 Array.prototype.reduce 方法，根据对象的布尔属性（如 isUrgent）高效地将数组分组为结构化对象，包含类型安全实现、可复用模式及关键注意事项。

本文详解如何在 typescript 中利用 `array.prototype.reduce` 方法，根据对象的布尔属性（如 `isurgent`）高效地将数组分组为结构化对象，包含类型安全实现、可复用模式及关键注意事项。

在 TypeScript 项目中，对对象数组按某字段（尤其是布尔值）进行逻辑分组是常见需求。相比多次调用 filter 创建多个新数组，reduce 能以单次遍历完成分组，性能更优且语义更清晰。下面以 isUrgent 字段为例，展示类型安全、可维护的实现方式。

✅ 基础实现（类型推导 + 明确初始值）

interface TodoItem {
  id: string;
  todo: string;
  isUrgent: boolean;
}

const todos: TodoItem[] = [
  { id: '1', todo: 'Shopping', isUrgent: false },
  { id: '2', todo: 'Dinner', isUrgent: true },
  { id: '3', todo: 'Doctor appointment', isUrgent: true },
  { id: '4', todo: 'Yard sale', isUrgent: false },
];

type GroupedTodos = {
  urgentTodo: TodoItem[];
  notUrgentTodo: TodoItem[];
};

const grouped: GroupedTodos = todos.reduce<groupedtodos>(
  (acc, item) => {
    if (item.isUrgent) {
      acc.urgentTodo.push(item);
    } else {
      acc.notUrgentTodo.push(item);
    }
    return acc;
  },
  { urgentTodo: [], notUrgentTodo: [] }
);

console.log(grouped);
// {
//   urgentTodo: [...], 
//   notUrgentTodo: [...]
// }</groupedtodos>

? 关键点：

使用泛型 <groupedtodos></groupedtodos> 显式声明 reduce 的累加器类型，避免 any 推导；

初始值 { urgentTodo: [], notUrgentTodo: [] } 必须与类型完全匹配，确保类型安全；

push 操作直接修改原数组，符合 reduce 的常规用法（无需深拷贝）。

? 通用化函数（支持任意布尔键）

为提升复用性，可封装为高阶函数：

Galileo TypeScript sdk

完整的Galileo AI平台 TypeScript/JS SDK 参考，用于评估、观察和保护 GenAI 应用。适用于构建 Node.js 或 TypeScript 项目。

下载

function groupByBoolean<t extends record unknown>>(
  arr: T[],
  key: keyof T & string,
  trueKey: string = 'trueItems',
  falseKey: string = 'falseItems'
): Record<string t> {
  return arr.reduce<record t>>( // 使用 Record 确保动态键安全
    (acc, item) => {
      const value = item[key] as unknown as boolean; // 类型断言需谨慎，建议配合运行时校验
      const targetKey = value ? trueKey : falseKey;
      if (!acc[targetKey]) acc[targetKey] = [];
      acc[targetKey].push(item);
      return acc;
    },
    {} as Record<string t>
  );
}

// 使用示例
const result = groupByBoolean(todos, 'isUrgent', 'urgentTodo', 'notUrgentTodo');
// 类型为 Record<string todoitem>，若需更强约束，可进一步泛型化</string></string></record></string></t>

⚠️ 注意事项与最佳实践

避免突变外部状态：reduce 内部应仅操作 acc，不要意外修改原始 item 或外部变量；
空数组边界处理：初始值必须提供空数组，否则 push 会报错（TypeScript 会捕获）；
非布尔字段？ 若需按字符串/数字等多值字段分组，推荐使用 Map<string t></string> 或 Record<string t></string>，而非硬编码键名；
性能提示：对于超大数据集（>10k），reduce 单次遍历仍优于多次 filter，但若后续频繁读取分组结果，可考虑缓存或使用 Map 提升查找效率。