React JS获取数组中数字的总和

Posted 2023-02-22

【中文标题】React JS获取数组中数字的总和

【英文标题】：React JS Get Sum of Numbers in Array

【发布时间】：2020-10-03 02:27:49

【问题描述】：

我有这个数组

const data = [
  "One",prix:100,
  "Two",prix:200,
  "Three",prix:300
]

我想像这样得到所有prix 的总和：

sum = 600

【问题讨论】：

您的数组中的对象无效。另外，到目前为止，您尝试了哪些方法，遇到了哪些问题？

是的，每个对象都有一个键值对

reduce() 对数组的每个元素执行一个函数，产生单个输出值。

【参考方案1】：

您可以使用reduce：

data.reduce((a,v) =>  a = a + v.prix , 0 )

const data = [
  title : "One",prix:100,
  title : "Two",prix:200,
  title : "Three",prix:300
]

console.log((data.reduce((a,v) =>  a = a + v.prix , 0 )))

【参考方案2】：

reduce() 方法对数组的每个元素执行（您提供的）reducer 函数，从而产生单个输出值。

arr.reduce(callback, initialValue);

reducer 将只返回一个值和一个值，因此名称为 reduce。回调是为数组中的每个元素运行的函数。

和函数参数function(total,currentValue, index,arr)：

Argument           Description

total              Required.The initialValue, or the previously returned value of the function
currentValue       Required.The value of the current element
currentIndex       Optional.The array index of the current element
arr                Optional.The array object the current element belongs to

在这个例子中使用这个代码：

const data = [
  title:"One",prix:100,
  title:"Two",prix:200,
  title:"Three",prix:300
];

const result = data.reduce((total, currentValue) => total = total + currentValue.prix,0);

console.log(result);  // 600

【参考方案3】：

const sum = data.map(datum => datum.prix).reduce((a, b) => a + b)

【讨论】：

那么为什么使用地图你可以像这样减少和添加data.reduce((a, b) => a + b.prix,0)

分离 map 和 reduce 更加模块化并且不需要初始化器 (0)。使用此功能的子集/超集重构为转换器或其他功能也更容易。