如何计算数组中对象值的动态平均值？

Posted 2023-02-22

【中文标题】如何计算数组中对象值的动态平均值？

【英文标题】：How can I calculate dynamic average of an Object value in an array?

【发布时间】：2020-01-07 08:52:51

【问题描述】：

我有这个数据结构，其中分数是一个由 4 个对象组成的数组

export const scores = [
   day: '1', Barcelona: 1, Real: 3, Valencia: 0,
   day: '2', Barcelona: 4, Real: 6, Valencia: 3,
   day: '3', Barcelona: 7, Real: 7, Valencia: 3,
   day: '4', Barcelona: 7, Real: 8, Valencia: 6,
];

我想计算每支球队的平均分

例如，巴塞罗那的平均值在此数据中为 4.75。

var res = scores.map(score => score.Barcelona).reduce((acc, score) => score + acc);

var total = scores.length

var average = res/total

这是我复制问题的原型。

https://codesandbox.io/s/qecrh?fontsize=14

我需要根据我在下拉列表中选择的团队动态地进行此计算。

我有两个状态 this.state.homeCity 和 this.state.awayCity 我可以重复使用来动态计算平均值。

【参考方案1】：

根据所选团队过滤数组。将所有值相加并除以scores 的length

    const scores = [
       day: '1', Barcelona: 1, Real: 3, Valencia: 0,
       day: '2', Barcelona: 4, Real: 6, Valencia: 3,
       day: '3', Barcelona: 7, Real: 7, Valencia: 3,
       day: '4', Barcelona: 7, Real: 8, Valencia: 6,
    ]
    
    const calculateAverageByTeam = team =>
        const total = scores.map(x=> x[team]).reduce((a,c) => a +c)
        return total / scores.length
    
    
    const barcelona = calculateAverageByTeam('Barcelona')
    const real = calculateAverageByTeam('Real')
    const valencia = calculateAverageByTeam('Valencia')
    console.log(barcelona, real, valencia)

【讨论】：

如果你愿意在我提供的代码框里给我看，我接受答案

用分叉的沙箱更新了答案

【参考方案2】：

您可以从下拉列表中提供团队名称并将其发送到函数以计算该团队的平均得分：

 const scores = [
   day: '1', Barcelona: 1, Real: 3, Valencia: 0,
   day: '2', Barcelona: 4, Real: 6, Valencia: 3,
   day: '3', Barcelona: 7, Real: 7, Valencia: 3,
   day: '4', Barcelona: 7, Real: 8, Valencia: 6,
];

function getAverageScore(scores, team)
 return  scores.reduce((sum, t) => sum + t[team], 0)/ scores.length;

console.log(getAverageScore(scores, "Barcelona"));

【参考方案3】：

这是一个对代码稍作修改并支持动态值的示例：

const scores = [
   day: '1', Barcelona: 1, Real: 3, Valencia: 0,
   day: '2', Barcelona: 4, Real: 6, Valencia: 3,
   day: '3', Barcelona: 7, Real: 7, Valencia: 3,
   day: '4', Barcelona: 7, Real: 8, Valencia: 6,
];

const printAverage = function() 
  const avg = scores.reduce((acc, c) => acc + c[this.value], 0) / scores.length;
  console.log(avg);


document.getElementById("team").addEventListener("change", printAverage);

<select id="team">
  <option value="Barcelona">Barcelona</option>
  <option value="Real">Real</option>
  <option value="Valencia">Valencia</option>
</select>

【参考方案4】：

这是使用您提供的沙盒代码的解决方案。基本解决方案是使用obj[key] 属性访问器，它允许动态属性选择。 score['Barcelona'] 和score.Barcelona 一样，但是因为它需要一个字符串，所以我们可以提供一个变量来代替，将下拉列表的值传入。

  getTeamAverage = (team) => 
    const sum = scores.map(score => score[this.state[`$teamCity`]])
    .reduce((acc, score) => score + acc);

    return sum / scores.length;
  

  render() 
  const homeAverage = this.getTeamAverage('home');
  const awayAverage = this.getTeamAverage('away');
    return (
      <div>
        <div className="wrapper">
          <div className="main">
            <div className="container">
              <div className="row">
                <div className="col-xs-5 title-container" />
                <div className="col-xs-7 form-container">
                  Pick the team:
                  <select
                    value=this.state.value
                    onChange=this.handleChangeHomeCity
                  >
                    listItems
                  </select>
                  <select
                    value=this.state.value
                    onChange=this.handleChangeAwayCity
                  >
                    listItems
                  </select>
                  <p>Team 1:this.state.homeCity</p>
                  <p>Team 2:this.state.awayCity</p>
                  <p>Average Score Team 1: homeAverage</p>
                  <p>Average Score Team 2: awayAverage</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );