有没有更优雅的方式编写函数，该函数根据函数的参数返回图像的名称？

Question

我有一个对象，其属性称为tier有9个可能的值- IRON, BRONZE, SILVER, GOLD, PLATINUM, DIAMOND, MASTER, GRANDMASTER and CHALLENGER。

基于该属性，我想显示与该层相对应的标志，但是，虽然可以调用该层，但将调用IRON带有标志的图像文件Emblem_Iron。

这就是为什么我创建了一个函数，该函数以a tier作为参数，然后返回与相对应的标志图像的文件名，tier以便执行此操作：

<img class='ranked-emblem' :src="'../emblems/' + rankedEmblem(league.tier) + '.png'" alt="">

我的功能是：

rankedEmblem(tier){
    if (tier === 'IRON') {
        return 'Emblem_Iron'
    } else if (tier === 'BRONZE') {
        return 'Emblem_Bronze'
    } else if (tier === 'SILVER') {
        return 'Emblem_Silver'
    } else if (tier === 'GOLD') {
        return 'Emblem_Gold'
    } else if (tier === 'PLATINUM') {
        return 'Emblem_Platinum'
    } else if (tier === 'DIAMOND') {
        return 'Emblem_Diamond'
    } else if (tier === 'MASTER') {
        return 'Emblem_Master'
    } else if (tier === 'GRANDMASTER') {
        return 'Emblem_Grandmaster'
    } else if (tier === 'CHALLENGER') {
        return 'Emblem_Challenger'
    }
}

尽管这完全可以正常工作，但我想知道是否有更优雅的方法可以缩短功能，甚至消除几个if els。

Answer 1

您可以将平原Object用作地图。

var emblems = {
  IRON: "Emblem_Iron",
  BRONZE: "Emblem_Bronze",
  SILVER: "Emblem_Silver",
  GOLD: "Emblem_Gold",
  PLATINUM: "Emblem_Platinum",
  DIAMOND: "Emblem_Diamond",
  MASTER: "Emblem_Master",
  GRANDMASTER: "Emblem_Grandmaster",
  CHALLENGER: "Emblem_Challenger"
};

function rankedEmblem(tier) {
  // Could also help user by doing:  emblems[tier.toUpperCase()]
  return emblems[tier] || "No_Emblem";
}

console.log(rankedEmblem("GOLD"));
console.log(rankedEmblem("PLATINUM"));

Answer 2

您可以使用字符串缩写和类似的功能：

function rankedEmblem(tier){
    return "Emblem_" + tier.charAt(0).toUpperCase() + tier.slice(1).toLowerCase();
}

console.log(rankedEmblem("CHALLENGER"));

Answer 3

rankedEmblem(tier){
  let myEmblems = {IRON: 'Emblem_Iron', BRONZE: 'Emblem_Bronze' }; 
  //You can put whatever emblem you want as key:value pair
  return myEmblems[tier];
}