Question

我想知道是否还有另一种方法可以用更少的代码来使此Switch语句更有效？

我听说对象更好，更干净，并且不再需要使用中断。如何正确使用？

谢谢。

此处的代码-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;
      }

Answer 1

好的。您可以建立天气类型字典。

/** @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" />`;

Answer 2

每个天气状况都有三个与之关联的唯一字符串：API返回的字符串，图像文件名和图像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">`;
    // ...
  }

Answer 3

我认为这对您来说是更好的解决方案

vmax

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

3 个答案: