JavaScript数组求和最大值对应颜色返回问题及代码调试

先梳理原代码的核心问题：

• acc未初始化，首次使用扩展运算符会触发未定义错误
• Math.max(acc[i+1]) > Math.max(acc[i+1])是无效判断，两边完全相等，永远无法触发颜色赋值
• 逻辑顺序混乱，没有先完成所有符合条件数据的求和，也未正确识别最大值对应的项

以下是修正后的实现，满足「遇到最大值项时立即停止循环并返回对应颜色」的需求：

const getColorByTreatment = (d) => {
    let color = '';
    // 初始化累加对象，避免未定义问题
    const acc = {};

    if (props.forms[0].dataTreatment === 'highest data') {
        // 第一步：计算所有符合kecamatanId条件的id对应的总和
        for (const item of props.datas) {
            if (item.kecamatanId === d && item.id) {
                const fieldDatas = JSON.parse(item.fieldDatas);
                fieldDatas.forEach((field) => {
                    const value = parseInt(field?.value) ?? 0;
                    acc[item.id] = (acc[item.id] ?? 0) + value;
                });
            }
        }

        // 提取所有求和结果，找出最大值
        const sums = Object.values(acc);
        const maxSum = sums.length > 0 ? Math.max(...sums) : 0;

        // 第二步：遍历数据，定位到最大值对应的项后设置颜色并终止循环
        for (const item of props.datas) {
            if (item.kecamatanId === d && item.id) {
                if (acc[item.id] === maxSum) {
                    color = '#FFEDA0';
                    // 找到目标项后立即停止循环
                    break;
                }
            }
        }
    }

    return color;
};

代码说明 #

1. 拆分两次遍历：先完成所有符合条件数据的求和，再定位最大值项，逻辑更清晰
2. 使用for...of循环替代传统索引循环，可读性更强
3. 增加边界判断，避免空数组导致Math.max报错
4. 找到最大值项后通过break立即终止循环，满足「遇到最大值时停止」的要求

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