Javascript合并多组股票价格数组并计算平均价格的React实现咨询

核心逻辑 #

不同股票返回的价格时间戳可能存在不完全对齐的情况，本方案默认采用「仅保留所有股票共有的时间戳计算平均」的规则，输出格式与单只股票接口返回格式完全一致；如果需要补全缺失时间戳的场景，可以自行扩展插值逻辑。

实现步骤 #

• 收集5只股票的接口返回数据，将每只股票的价格数组转换为Map结构，以时间戳为key、对应价格为value，大幅提升后续匹配查找的效率
• 以第一只股票的时间戳为基准，筛选出所有股票都存在的公共时间戳集合
• 遍历公共时间戳，取出5只股票的对应价格求和后除以股票数量，得到该时间点的平均价格
• 将时间戳与平均价格组合成要求的数组结构，按时间戳升序排序后输出

代码实现 #

核心计算工具函数 #

/**
 * 计算多只股票的平均价格数组
 * @param {Array} stockPricesList 多只股票的返回数据数组，每个元素为单只股票接口返回的{prices: []}结构
 * @returns {Object} 格式和单只股票接口返回完全一致的平均价格数据
 */
const calcAverageStockPrices = (stockPricesList) => {
  // 边界处理：输入为空直接返回空结构
  if (!stockPricesList?.length) return { prices: [] };

  // 1. 把每只股票的价格转成Map结构，方便快速查找
  const stockPriceMaps = stockPricesList.map(stockData => {
    return new Map(stockData.prices);
  });

  // 2. 筛选所有股票都有数据的公共时间戳
  const baseTimestamps = Array.from(stockPriceMaps[0].keys());
  const commonTimestamps = baseTimestamps.filter(ts => {
    return stockPriceMaps.every(map => map.has(ts));
  });

  // 3. 计算每个时间戳的平均价格
  const averagePrices = commonTimestamps.map(ts => {
    const total = stockPriceMaps.reduce((sum, map) => sum + map.get(ts), 0);
    const avg = total / stockPriceMaps.length;
    // 按需保留小数位数，比如avg.toFixed(4)再转数字即可
    return [ts, avg];
  });

  // 4. 按时间戳升序排序，和原接口输出顺序保持一致
  averagePrices.sort((a, b) => a[0] - b[0]);

  return { prices: averagePrices };
};

React 组件中使用示例 #

import { useEffect, useState } from 'react';

const StockAverageTrend = () => {
  const [averagePriceData, setAveragePriceData] = useState({ prices: [] });
  const STOCK_COUNT = 5;

  // 单只股票数据请求方法，替换为实际接口逻辑
  const fetchSingleStock = async (stockId) => {
    const res = await fetch(`/your/stock/api/${stockId}`);
    return res.json();
  };

  useEffect(() => {
    // 并行请求5只股票数据，提升请求效率
    const getAllStockData = async () => {
      try {
        const requestList = Array.from({ length: STOCK_COUNT }, (_, idx) => fetchSingleStock(idx + 1));
        const stockDataList = await Promise.all(requestList);
        const avgData = calcAverageStockPrices(stockDataList);
        setAveragePriceData(avgData);
        // 拿到avgData后可直接传给图表组件渲染走势
      } catch (err) {
        console.error('股票数据获取失败：', err);
      }
    };
    getAllStockData();
  }, []);

  return <div>{/* 图表渲染逻辑 */}</div>;
};

可选优化点 #

• 如果需要完整的时间序列，可先汇总所有股票的时间戳去重，对缺失价格的股票用前后邻近时间点的价格线性插值补全后再计算平均
• 数据量较大时，可以先对单只股票的价格数组做预排序，减少后续计算耗时
• 可以根据业务需求对平均价格做精度截断，避免冗余小数位影响渲染性能

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