如何重构基于数组的reduce代码以提升可读性？

我明白你想要的是简洁又易读的代码，不用堆砌一堆冗余常量。咱们可以把原逻辑拆成两步核心操作，既保持代码紧凑，又能让逻辑一目了然：

重构后的代码 #

// 第一步：收集所有场景的extent对象
const allExtents = selectedGroup.items.flatMap(item => 
  item.szenarios 
    ? item.szenarios.map(szenario => szenario.extent) 
    : [item.extent]
);

// 第二步：计算全局极值（直接在遍历中更新，不用存数组）
const { xmin, xmax, ymin, ymax } = allExtents.reduce((acc, ext) => ({
  xmin: Math.min(acc.xmin, ext.xmin),
  xmax: Math.max(acc.xmax, ext.xmax),
  ymin: Math.min(acc.ymin, ext.ymin),
  ymax: Math.max(acc.ymax, ext.ymax)
}), { 
  xmin: Infinity, 
  xmax: -Infinity, 
  ymin: Infinity, 
  ymax: -Infinity 
});

// 生成最终的扩展范围
const calculatedGroupExtent: __esri.Extent = new EsriExtent({
  xmax: xmax + 200,
  xmin: xmin - 200,
  ymax: ymax + 200,
  ymin: ymin - 200,
  spatialReference: { wkid: 2056 }
});

为什么这样改？ #

1. 拆分逻辑，职责单一

   • 第一部分flatMap专门负责把嵌套的/平级的extent全部收集到一个数组里，一眼就能看出来是在做“获取所有范围数据”的操作，不用再在reduce里混着处理两种item类型。
   • 第二部分reduce只专注于计算四个方向的极值，初始化的Infinity和-Infinity是极值计算的常用技巧，避免了先收集数组再调用Math.max/min(...arr)的额外开销。

2. 代码更紧凑，无冗余

   • 没有引入多余的中间变量，每一段代码的目的都很明确。
   • 用对象解构直接拿到最终的极值，后续生成Extent的代码也更清爽。

3. 可读性拉满

   • 即使不用注释，别人看代码也能快速理解：先收集所有范围，再算最大最小，最后扩边生成目标范围。

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