根据所选选项动态使用不同的数据对象

Question

我有一个包含 2 个数组的数据对象（团队名称列表）

const data = {
  Liga: ['Alaves','Atletico', 'Barcelona', 'Betis'],
  Premier: ["Arsenal", "Chelsea", "Everton", 'Liverpool']
};

根据值 i select（Liga 或 Premier）我得到了我的球队名单。

这些球队有两个不同的数据得分结果scoresliga和scorespremier

const scoresliga = [
  { day: '0', Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6},
  { day: '1', Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6}
];

const scorespremier = [
  { day: '0', Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6},
  { day: '1', Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6}
];

我的问题是我必须找到一种方法，当我 select 'Liga' 我必须消耗 scoresliga 对象并且如果我 select 'Premier' 我要吃scorespremier

这也将解决我在计算团队平均值时遇到的问题，目前它不是通用函数。

这是使用 scoresliga 数据对象的函数片段，但它需要是 Ligas（Premier 和 Liga）的共享函数。

const getAverage = team => {

  if (isNaN(scoresliga[0][team])) return null;

  return scoresliga.map(x => x[team]).reduce((a, c) => a + c) / scoresliga.length;
};

我的案例已经转载了，看看here

Answer 1

只需将额外的属性添加到 getAverage

const getAverage = (league, team) => {

  if (isNaN(league[0][team])) return null;

  return league.map(x => x[team]).reduce((a, c) => a + c) / 
     league.length;
};

同时在乐谱中创建一些映射

const scores = {
  Liga: [
    { day: "0", Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6 },
    { day: "1", Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6 }
  ],
  Premier: [
    { day: "0", Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6 },
    { day: "1", Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6 }
  ]
};

并且在 Chart.js

<span>{getAverage(scores[this.state.selectedLeague], this.state.selectedTeam)}</span>

此外，更新

handleLeagueChange = event => {
    const selectedLeague = event.target.value;
    this.setState({ selectedLeague: selectedLeague }, () => {
      this.setState({ selectedTeam: data[selectedLeague][0] });
    });
  };

Answer 2

我建议您将键 championShip 添加到数组中：

const scoresliga = [
  { day: '0', championShip: 'Liga', Alaves: -6, Atletico: -1, Barcelona: -2, Betis: -6},
  { day: '1', championShip: 'Liga', Alaves: -7, Atletico: 1, Barcelona: -2, Betis: -6, championShip: 'Liga'}
];

const scorespremier = [
  { day: '0', championShip: 'Premier',  Arsenal: -6, Chelsea: -1, Everton: -2, Liverpool: -6},
  { day: '1', championShip: 'Premier', Arsenal: -7, Chelsea: 1, Everton: -2, Betis: -6},
  { day: '1', championShip: 'Premier', Chelsea: 1, Everton: -2, Betis: -6}
];

那么用你的数组操作会更容易，你可以有一个数组：

let merged = scoresliga.concat(scorespremier);

let desiredTeam = 'Arsenal';
const filteredByTeam = merged.filter(f=> f.championShip === 'Premier' && f[desiredTeam]);
const averageByTeamQuantity = filteredByTeam.reduce((a,c) =>{
  a += +c[desiredTeam];
  return a;
}, 0)/ filteredByTeam.length;


console.log(averageByTeamQuantity);

根据所选选项动态使用不同的数据对象

Dynamically consume a different data object depending on the option selected

javascript

arrays

object

reactjs

codesandbox