如何在分组函数中使用参数？代码重构解析错误修复方案

我正在编写代码用于分组数据并生成树形图（treemap）的JSON数据，最初写了两段重复的可运行代码（分别按category和broker分组），但重构为带参数的复用函数时，出现了“Module build failed - Parsing error”错误，需要解决。

可运行的原始代码 #

// by category
const treemap_by_category = portfolio_assets.reduce((acc,curr)=>{
  const {category, ticker, total_today_brl} = curr
  const existing = acc[category]||[]
  return {...acc, [category]:[...existing, { x: ticker, y: total_today_brl }]}
},{})
const treemap_categories = Object.entries(treemap_by_category).map(([name,data])=>({name, data})).filter( data => data.name !== "Dividas")
console.log(treemap_categories)
treemap_categories.sort((a,b)=>b.data.map(({y})=>y).reduce((a, e) => a + e, 0)-a.data.map(({y})=>y).reduce((a, e) => a + e, 0))

// by broker
const treemap_by_broker = portfolio_assets.reduce((acc,curr)=>{
  const {broker, ticker, total_today_brl} = curr
  const existing = acc[broker]||[]
  return {...acc, [broker]:[...existing, { x: ticker, y: total_today_brl }]}
},{})
const treemap_brokers = Object.entries(treemap_by_broker).map(([name,data])=>({name, data}))
treemap_brokers.sort((a,b)=>b.data.map(({y})=>y).reduce((a, e) => a + e, 0)-a.data.map(({y})=>y).reduce((a, e) => a + e, 0))

报错的重构代码 #

function treemap_by(group_type){
  const treemap_by_group_type = portfolio_assets.reduce((acc,curr)=>{
    const {`${group_type}`, ticker, total_today_brl} = curr
    const existing = acc[`${group_type}`] || []
    return {...acc, [`${group_type}`]:[...existing, { x: ticker, y: total_today_brl }]}
    },{})
    const treemap_group = Object.entries(treemap_by_group_type).map(([name,data])=>({name, data})).filter( data => data.name !== "Dividas")
    treemap_group.sort((a,b)=>b.data.map(({y})=>y).reduce((a, e) => a + e, 0)-a.data.map(({y})=>y).reduce((a, e) => a + e, 0))
    return treemap_group
}

const treemap_categories = treemap_by("category")
const treemap_brokers = treemap_by("broker")

错误原因与修复方案 #

错误根源 #

JavaScript不支持在对象解构语法中使用模板字符串${group_type}来动态指定属性名，这是无效语法，直接导致了解析错误。另外，原重构代码对所有分组都过滤了"Dividas"，但原始代码中只有按category分组时才需要这个过滤逻辑，逻辑不一致。

修复后的代码 #

function treemap_by(group_type, filterDividas = false) {
  const treemap_by_group_type = portfolio_assets.reduce((acc, curr) => {
    // 动态获取分组字段的值，替代无效的模板字符串解构
    const groupValue = curr[group_type];
    const { ticker, total_today_brl } = curr;
    const existing = acc[groupValue] || [];
    return { ...acc, [groupValue]: [...existing, { x: ticker, y: total_today_brl }] };
  }, {});

  let treemap_group = Object.entries(treemap_by_group_type).map(([name, data]) => ({ name, data }));
  
  // 根据参数决定是否过滤"Dividas"，和原始逻辑对齐
  if (filterDividas) {
    treemap_group = treemap_group.filter(item => item.name !== "Dividas");
  }

  // 提取求和逻辑为单独函数，避免重复代码且更高效
  const calculateGroupTotal = group => group.data.reduce((sum, item) => sum + item.y, 0);
  treemap_group.sort((a, b) => calculateGroupTotal(b) - calculateGroupTotal(a));

  return treemap_group;
}

// 按需求调用：category需要过滤，broker不需要
const treemap_categories = treemap_by("category", true);
const treemap_brokers = treemap_by("broker");

关键修复点 #

1. 替换动态解构方式：用curr[group_type]动态获取分组属性值，这是JavaScript中访问动态属性的标准写法。
2. 区分过滤逻辑：新增filterDividas可选参数，让函数适配两种分组的不同需求，和原始代码逻辑保持一致。
3. 简化求和逻辑：把重复的求和计算提取为calculateGroupTotal函数，减少代码冗余，同时直接在reduce中累加y值，比先map再reduce更高效。

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