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

Question

我有这个数据结构，其中分数是一个由 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 我可以重复使用来动态计算平均值。

Answer 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)

Answer 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"));

Answer 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>

Answer 4

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

  getTeamAverage = (team) => {
    const sum = scores.map(score => score[this.state[`${team}City`]])
    .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>
    );
  }