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

Question

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

- Koala7

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)

- Dupocas

---

如果您能够在我提供的 CodeSandbox 中展示给我，我会接受这个答案。 - Koala7

已更新答案并附上了分叉沙盒。 - Dupocas

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

- Fullstack Guy

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>

- Mohammad Usman

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>
    );
  }

- Jeff Hechler