问我可以在Switch语句上使用对象吗？
EN

Stack Overflow用户

提问于 2020-03-17 06:14:56

回答 3查看 53关注 0票数 1

我想知道是否有其他方法可以用更少的代码来提高Switch语句的效率？

我听说对象更好更干净，而且不需要再使用break了。我怎样才能正确使用它？

谢谢。

代码在此- https://jsfiddle.net/lmanhaes/cq1g5dyt/4/

$.each(response.weather, function(index) { //retrieve data
      let icon;
      switch (response.weather[index].currentConditions) { //switch case for icons
        case "Cloud":
          icon = '<img src="./weather_icons/cloud.png" alt="cloud" width="22px"/>';
          break;
        case "Hail":
          icon = '<img src="./weather_icons/hail.png" alt="hail" width="22px"/>';
          break;
        case "Heavy Cloud":
          icon = '<img src="./weather_icons/heavy cloud.png" alt="heavy-clouds" width="22px"/>';
          break;
        case "Heavy Rain":
          icon = '<img src="./weather_icons/heavy rain.png" alt="heavy-rain" width="22px"/>';
          break;
        case "Rain":
          icon = '<img src="./weather_icons/rain.png" alt="rain" width="22px"/>';
          break;
        case "Sleet":
          icon = '<img src="./weather_icons/sleet.png" alt="sleet" width="22px"/>';
          break;
        case "Snow":
          icon = '<img src="./weather_icons/snow.png" alt="snow" width="22px"/>';
          break;
        case "Sun":
          icon = '<img src="./weather_icons/sun.png" alt="sun" width="22px"/>';
          break;
        case "Sun and Clouds":
          icon = '<img src="./weather_icons/sun and cloud.png" alt="sun-clouds" width="22px"/>';
          break
        case "Thunderstorm":
          icon = '<img src="./weather_icons/thunderstorm.png" alt="thunderstorm" width="22px"/>';
          break;
      }

javascript

ajax

switch-statement

javascript-objects

腾讯云会员中心

加入腾讯云会员，每月可领会员专属优惠券；会员云产品免费体验；云产品会员专享价；会员签到抽奖…

回答 3

Stack Overflow用户

发布于 2020-03-17 06:22:24

好的。你可以建立一个天气类型的字典。

/** @typedef {{file: string, label: string}} WeatherEntry */
/** @typedef {[key: string]: WeatherEntry} WeatherMap */

/** @type {WeatherMap} */
const weather = {
    "Cloud": {
        "file": "cloud.png",
        "label": "cloud"
    },
    // ...
};

然后使用它：

const entry = weather[response.weather[index].currentConditions];
let icon = `<img src="./weather_icons/${entry.file}" alt="${entry.label}" width="22px" />`;

票数 0

Stack Overflow用户

发布于 2020-03-17 06:23:31

每个天气条件都有三个与之相关联的唯一字符串:接口返回的字符串、图像文件名和图像alt。您可以使用API响应字符串索引的对象来简洁地完成此操作，其中每个值都是另一个对象或数组：

const weatherStrings = {
  Cloud: ['cloud', 'cloud',
  Hail: ['hail', 'hail'],
  'Heavy Cloud': ['heavy cloud', 'heavy-clouds'],
  // ...
}

// ...

success: function(response) {
  for (const item of response.weather) {
    const [filename, alt] = weatherStrings[item.currentConditions];
    const icon = `<img src="./weather_icons/${filename}.png" alt="${alt}" width="22px">`;
    // ...
  }

如果可能的话，你可以把你的后台改成和currentConditions字符串一样的文件名--比如，把cloud.png的文件名改成Cloud.png，把heavy rain.png改成Heavy Rain.png，这样每个天气字符串的值就只需要是alt字符串就可以了，这样就可以让天气变得更短更一致：

const altsByCurrentConditions = {
  Cloud: 'cloud',
  Hail: 'hail',
  'Heavy Cloud': 'heavy-clouds',
  // ...
}

// ...

success: function(response) {
  for (const item of response.weather) {
    const alt = altsByCurrentConditions[item.currentConditions];
    const icon = `<img src="./weather_icons/${item.currentConditions}.png" alt="${alt}" width="22px">`;
    // ...
  }

票数 0

Stack Overflow用户

发布于 2020-03-17 06:25:22

我想这对你来说是个更好的解决方案

$.each(response.weather, function (index) { //retrieve data
    let icon;
    let currentCondition = response.weather[index].currentConditions.toLowerCase();
    icon = '<img src="./weather_icons/${currentCondition}.png" 
    alt="${currentCondition}" width="22px"/>'; 
}