Vue JS 3中如何合并相同标题数组并对对应数值求和？

你需要先通过一个映射对象来累加相同标题对应的数值，再将映射对象转换为最终需要的标题和数值数组，修改后的代码如下：

onMounted(() => {
    chart.totalField = props.datas.length === 0 ? 0 : JSON.parse(props.datas[0].fieldDatas).length
    chart.totalData = props.datas.length

    // 初始化映射对象，用于存储标题对应的数值总和
    const sumMap = {}

    if (chart.totalData !== 0) {
        for (let i = 0; i < chart.totalData; i++) {
            const fieldDatas = JSON.parse(props.datas[i].fieldDatas)
            for (let j = 0; j < chart.totalField; j++) {
                const title = fieldDatas[j].title
                // 将字符串数值转为数字，方便累加计算
                const value = Number(fieldDatas[j].value)

                // 累加逻辑：标题不存在则初始化，存在则累加对应数值
                if (sumMap[title]) {
                    sumMap[title] += value
                } else {
                    sumMap[title] = value
                }
            }
        }
    }

    // 将映射对象转换为最终需要的两个数组
    chart.title = Object.keys(sumMap)
    // 把总和转回字符串类型，匹配你期望的输出格式
    chart.value = Object.values(sumMap).map(num => num.toString())

    console.log(chart.title);
    console.log(chart.value);
})

关键修改说明： #

• 新增sumMap中间对象，避免标题重复的同时完成数值累加
• 遍历数据时不再直接向数组push内容，而是对每个标题的数值进行累加计算
• 最后通过Object.keys()和Object.values()拆解映射对象，得到去重后的标题数组和求和后的数值数组，同时将数值转回字符串类型

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