JavaScript遍历嵌套持仓JSON数组 按证券类型汇总净值生成饼图数据

核心遍历与计算逻辑 #

• 两层循环覆盖完整结构：第一层遍历portfolio_accounts数组下的所有投资账户，第二层进入每个账户的holdings字段遍历单条持仓记录
• 单持仓净值计算：严格按照规则执行单持仓净值计算，公式为净值 = 持仓price * 持有shares，无额外复杂运算
• 分类累计逻辑：动态维护以security_type为键的统计对象，首次遇到某类证券时初始化对应累计值，后续同类型持仓直接将净值累加到对应键值下
• 零扩展成本：不需要提前在代码中枚举所有可能的证券类型，后续新增任意类型（如加密货币Crypto、公募基金Fund）时，逻辑会自动识别新的类型值并纳入统计，无需修改原有代码

饼图自动适配实现 #

• 动态颜色分配：提前准备一套独立的预设色板数组，每识别到一个新的证券类型，按索引顺序从色板中取色绑定到该类型，色板长度超过时自动循环取色，不会出现颜色缺失问题
• 数据格式兼容：统计完成后直接输出包含「类型名称、累计净值、绑定颜色」的结构化数组，可直接传入主流饼图组件，组件会根据净值自动计算占比生成对应区块

示例数据计算校验 #

基于提供的参考JSON结构，按照规则计算的结果为：

• 股票（Stock）类累计净值：1000.50 * 20 = $20010
• 债券（Bond）类累计净值：(100.99 * 4) + (530.50 * 2) = $1464.96
• 组合整体总净值：$21474.96
• 对应占比：股票类约93.2%，债券类约6.8%

核心逻辑代码参考 #

// 初始化统计容器与预设色板
const securityTypeStats = {};
const colorPalette = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
let colorAssignIndex = 0;

// 第一层循环：遍历所有投资账户
portfolioData.portfolio_accounts.forEach(account => {
  // 第二层循环：遍历账户下的所有持仓
  account.holdings.forEach(holding => {
    // 计算单持仓净值
    const currentHoldingValue = holding.price * holding.shares;
    // 识别未统计过的新证券类型，自动初始化、分配颜色
    if (!securityTypeStats[holding.security_type]) {
      securityTypeStats[holding.security_type] = {
        totalNetValue: 0,
        bindColor: colorPalette[colorAssignIndex % colorPalette.length]
      }
      colorAssignIndex += 1;
    }
    // 同类资产净值累加
    securityTypeStats[holding.security_type].totalNetValue += currentHoldingValue;
  })
})

// 转换为饼图组件可直接消费的格式
const pieRenderData = Object.entries(securityTypeStats).map(([typeName, config]) => ({
  name: typeName,
  value: config.totalNetValue,
  itemStyle: { color: config.bindColor }
}))

代码无硬编码的证券类型判断分支，任意新增的证券类型都会被自动识别、分配颜色、纳入占比计算。

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