React JS中实现对象数组price值与前值累加生成新值的方法

首先注意到你提供的finaldata里的volume值看起来和原始数据无关联（像是示例占位值），下面的实现会先完成price的累计计算逻辑，同时说明如何自定义volume值：

核心实现：维护累计值遍历数组 #

我们可以通过一个变量维护累计的价格，结合map方法遍历数组生成新对象：

const data = [
  {price: 2, volume: 123},
  {price: 3, volume: 123},
  {price: 4, volume: 254},
  {price: 1, volume: 444},
  {price: 5, volume: 555}
];

// 初始化累计价格变量
let cumulativePrice = 0;
// 生成目标数组
const finalData = data.map(item => {
  cumulativePrice += item.price;
  // 这里如果要保留原volume就用item.volume，替换成自定义值就修改对应字段
  return { price: cumulativePrice, volume: item.volume };
});

console.log(finalData);

运行结果（保留原volume） #

输出的数组为：

[
  {price: 2, volume: 123},
  {price: 5, volume: 123},
  {price: 9, volume: 254},
  {price: 10, volume: 444},
  {price: 15, volume: 555}
]

自定义volume值的版本 #

如果你需要像示例里那样使用自定义的volume，可以提前准备好对应的值数组，结合索引赋值：

const data = [
  {price: 2, volume: 123},
  {price: 3, volume: 123},
  {price: 4, volume: 254},
  {price: 1, volume: 444},
  {price: 5, volume: 555}
];

// 自定义的volume数组
const customVolumes = [555, 777, 5000, 8000, 4000];
let cumulativePrice = 0;

const finalData = data.map((item, index) => {
  cumulativePrice += item.price;
  return { price: cumulativePrice, volume: customVolumes[index] };
});

这样就能得到你示例中finaldata的结构。

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