根据所选选项动态使用不同的数据对象
Posted
技术标签:
【中文标题】根据所选选项动态使用不同的数据对象【英文标题】:Dynamically consume a different data object depending on the option selected 【发布时间】:2020-02-18 11:54:07 【问题描述】:我有一个包含 2 个数组的数据对象(团队名称列表)
const data =
Liga: ['Alaves','Atletico', 'Barcelona', 'Betis'],
Premier: ["Arsenal", "Chelsea", "Everton", 'Liverpool']
;
根据我选择的值(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
];
我的问题是我必须找到一种方法,当我选择“Liga”时,我必须使用 scoresliga
对象,如果我选择“Premier”,我必须使用 scorespremier
这也将解决我在计算目前它不是一般功能的团队的平均值时遇到的问题。
这是使用 scoresliga
数据对象的函数的 sn-p,但它需要是 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
【问题讨论】:
【参考方案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] );
);
;
【讨论】:
您介意编辑我的代码框以接受答案吗? 这里不计算平均值codesandbox.io/s/recharts-examples-s5jj2 @Koala7 我添加了指向 CodeSandbox 的链接,它计算平均值。【参考方案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);
【讨论】:
以上是关于根据所选选项动态使用不同的数据对象的主要内容,如果未能解决你的问题,请参考以下文章