React+react-stockcharts计算SMA：循环与手动赋值结果差异排查

嘿，我太懂你这种踩坑的感觉了——用循环计算SMA时，结果数组里全是最后一个元素的值，哪怕试了深拷贝方法也没搞定，对吧？我之前做股票可视化的时候也碰到过一模一样的问题，咱们来拆解下根源和解决办法：

核心问题：重复复用同一个对象引用 #

大概率你是在循环里只创建了一个对象，然后每次迭代都修改它的属性，再把这个对象push到结果数组里。这时候数组里存的全是同一个对象的引用，当最后一次循环修改完这个对象后，数组里所有元素都会“同步”变成最后一次的结果——因为它们指向的是同一个内存地址。

举个你可能写错的反例：

// 错误示范：复用同一个对象引用
const calculateSMA = (data, period) => {
  const result = [];
  // 只创建一次对象，后续循环全改它
  let smaItem = {}; 
  
  for (let i = period - 1; i < data.length; i++) {
    let sum = 0;
    for (let j = 0; j < period; j++) {
      sum += data[i - j].close;
    }
    // 修改同一个对象的属性
    smaItem.date = data[i].date;
    smaItem.sma = sum / period;
    // push的是同一个引用
    result.push(smaItem);
  }
  return result;
};

为什么你试的拷贝方法没生效？ #

你用的JSON.parse(JSON.stringify())或者Object.assign()本身是有效的，但可能是拷贝时机不对，或者对特殊类型（比如Date对象）处理有问题：

• 如果是在push之后才拷贝，那已经晚了——数组里已经存了旧引用；
• JSON.parse(JSON.stringify())会把Date对象转成ISO字符串，而react-stockcharts需要的是原生Date类型，这时候就算拷贝了，图表也可能识别不了数据，反而让你误以为拷贝没生效。

正确的解决方式：每次循环创建新对象 #

最简单有效的办法，就是在每次循环里都创建一个全新的对象，而不是复用旧对象。这样每个push到数组里的元素都是独立的引用，不会互相覆盖。

写法1：循环内新建对象

const calculateSMA = (data, period) => {
  const result = [];
  
  for (let i = period - 1; i < data.length; i++) {
    let sum = 0;
    // 关键：每次循环都创建新对象
    const smaItem = {};
    
    for (let j = 0; j < period; j++) {
      sum += data[i - j].close;
    }
    
    smaItem.date = new Date(data[i].date); // 显式创建新Date，避免引用原数据的date
    smaItem.sma = sum / period;
    result.push(smaItem);
  }
  
  return result;
};

写法2：用对象字面量直接创建（更简洁）

const calculateSMA = (data, period) => {
  const result = [];
  
  for (let i = period - 1; i < data.length; i++) {
    let sum = 0;
    for (let j = 0; j < period; j++) {
      sum += data[i - j].close;
    }
    // 直接在push时创建新对象，一步到位
    result.push({
      date: new Date(data[i].date),
      sma: sum / period
    });
  }
  
  return result;
};

额外推荐：用函数式写法（reduce）

如果喜欢更优雅的函数式风格，用reduce也能天然避免引用问题，因为每次迭代都返回新对象：

const calculateSMA = (data, period) => {
  return data.reduce((acc, _, index) => {
    if (index >= period - 1) {
      // 计算周期内的收盘价总和
      const sum = data.slice(index - period + 1, index + 1)
        .reduce((total, item) => total + item.close, 0);
      // 新建对象加入结果数组
      acc.push({
        date: new Date(data[index].date),
        sma: sum / period
      });
    }
    return acc;
  }, []);
};

最后再确认下 #

你可以在循环里打印每个smaItem的内存地址（比如console.log(smaItem)），如果是同一个对象，每次打印的地址都一样；如果是新对象，每次地址都不同——这样就能快速验证问题是否解决啦。

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