Javascript 如何将这个else if语句转换为switch语句？_Javascript_Jquery_Switch Statement

Javascript 如何将这个else if语句转换为switch语句？

javascript jquery

Javascript 如何将这个else if语句转换为switch语句？,javascript,jquery,switch-statement,Javascript,Jquery,Switch Statement,我创建了一个函数，每秒检查一个网站的当前url&根据某个值字符串更改HTML元素中的元标记图像。我的代码是完美的，但是我想让我的代码更具可读性7优化…所以我想把这段代码转换成switch语句，但我现在还不能自己弄明白。任何帮助都将不胜感激。代码如下： // Variable declarations var imgOgSrc = $('meta[property="og:image"]'); var twitterImgSrc = $('meta[name="twitter:image:src"

我创建了一个函数，每秒检查一个网站的当前url&根据某个值字符串更改HTML元素中的元标记图像。我的代码是完美的，但是我想让我的代码更具可读性7优化…所以我想把这段代码转换成switch语句，但我现在还不能自己弄明白。任何帮助都将不胜感激。代码如下：

// Variable declarations
var imgOgSrc = $('meta[property="og:image"]');
var twitterImgSrc = $('meta[name="twitter:image:src"]');
var currentUrl;

// Checks for current url & changes meta tags depending on slug value
function getCurrentUrl(){
    currentUrl = window.location.href;

    if(currentUrl.toLowerCase().indexOf('python') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }   else if (currentUrl.toLowerCase().indexOf('java') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }   else if (currentUrl.toLowerCase().indexOf('php') >= 0) {
            imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
            twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    }
        else {
            imgOgSrc.attr('content', currentUrl);
            twitterImgSrc.attr('content', currentUrl);
    }
}

因为所有的if条件都有相同的代码，所以可以这样使用

function getCurrentUrl() {
  currentUrl = window.location.href;
  const customUrlNeeded = ['python', 'java', 'php'].some(a => currentUrl.toLowerCase().includes(a))

  if (customUrlNeeded) {
    imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
  } else {
    imgOgSrc.attr('content', currentUrl);
    twitterImgSrc.attr('content', currentUrl);
  }

}

因为所有的if条件都有相同的代码，所以可以这样使用

function getCurrentUrl() {
  currentUrl = window.location.href;
  const customUrlNeeded = ['python', 'java', 'php'].some(a => currentUrl.toLowerCase().includes(a))

  if (customUrlNeeded) {
    imgOgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
    twitterImgSrc.attr('content', 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg');
  } else {
    imgOgSrc.attr('content', currentUrl);
    twitterImgSrc.attr('content', currentUrl);
  }

}

试试这个：

var-currentUrl；函数getCurrentUrl{ currentUrl=window.location.href.toLowerCase； var langType=函数类型{ 返回currentUrl.indexOftype>-1； } 切换为真{ “python”类型的大小写： imgOgSrc.attr'content'，'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'; twitterImgSrc.attr'content'，'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'; 打破案例类型“java”： // ... 打破案例类型“php”： // ... 打破违约： // ... 打破 } } 试试这个：

// Variable declarations
var imgOgSrc = $('meta[property="og:image"]');
var twitterImgSrc = $('meta[name="twitter:image:src"]');
var currentUrl;

function getCurrentUrl(){
  currentUrl = window.location.href.toLowerCase();

  const obj = {
    python : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    },
    java : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    },
    php : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    }
  }

  const word = currentUrl.match(/php | java | python /gi)[0];

  if(word){
    imgOgSrc.attr('content', obj[word].imgOgSrc);
    twitterImgSrc.attr('content', obj[word].twitterImgSrc);    
  }
  else {
    imgOgSrc.attr('content', currentUrl);
    twitterImgSrc.attr('content', currentUrl);
  }
}

您可以将图像存储在对象中，而不是switch/case，查看currentUrl是否包含关键字，提取它，然后使用它从该对象获取值：

// Variable declarations
var imgOgSrc = $('meta[property="og:image"]');
var twitterImgSrc = $('meta[name="twitter:image:src"]');
var currentUrl;

function getCurrentUrl(){
  currentUrl = window.location.href.toLowerCase();

  const obj = {
    python : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    },
    java : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    },
    php : {
      imgOgSrc : 'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg',
      twitterImgSrc :  'http://carrieres.nameofwebsite.com/static/img/custom-img.jpg'
    }
  }

  const word = currentUrl.match(/php | java | python /gi)[0];

  if(word){
    imgOgSrc.attr('content', obj[word].imgOgSrc);
    twitterImgSrc.attr('content', obj[word].twitterImgSrc);    
  }
  else {
    imgOgSrc.attr('content', currentUrl);
    twitterImgSrc.attr('content', currentUrl);
  }
}

您可以为python、java和php获取一个具有imgOgSrc和twitterImgSrc属性的对象，并为不匹配的URL使用null属性

函数getTargeturl{ 常量目标={ python:{ imgOgSrc:'data1'， twitterImgSrc:“数据2” }, 爪哇：{ imgOgSrc:“数据3”， twitterImgSrc:'data4' }, php:{ imgOgSrc:'data5'， twitterImgSrc:'data6' }, null:{//默认值 imgOgSrc:'data7'， twitterImgSrc:'data8' } }; 返回目标[url.toLowerCase.matchnew RegExpObject.keystargets.join'|']； } console.loggetTarget'blajavabla'；

console.loggetTarget'blabla' 您可以为python、java和php获取一个具有imgOgSrc和twitterImgSrc属性的对象，并为不匹配的URL使用null属性

console.loggetTarget'blabla'；then部分的区别在哪里？对于您的用例，if语句将是一种方法。签出这个进行速度测试的答案：当您不寻找精确匹配时，使用switch没有任何意义。@ManuelAbascal，Nina说if语句的attr内容中的URL都是相同的。因此，如果这不是一个拼写错误，你只需要一个if和一个else。我会以不同的方式匹配url，并且我会组合ifs，因为它们在每个url中都是相同的内容。then部分的差异在哪里？对于你的用例，if语句将是一种方式。签出这个进行速度测试的答案：当您不寻找精确匹配时，使用switch没有任何意义。@ManuelAbascal，Nina说if语句的attr内容中的URL都是相同的。因此，如果这不是一个拼写错误，你只需要一个if和一个else。我会以不同的方式匹配url，我会组合ifs，因为每个ifs的内容都是相同的。是的，这会起作用，但不是最好的解决方案。不是最好的，是的，我个人会选择Taki的解决方案。我只是想坚持OP选择的使用开关。是的，它会起作用，但这不是最好的解决方案。不是最好的，是的，我个人会选择Taki的解决方案。只是想坚持OP选择的开关。