javascript - 如何将使用 classList.contains() 作为条件的 if 语句转换为 switch 语句？

Question

如何将以下if/else if语句变成switch语句？有可能这样做吗？

if(event.target.classList.contains("follow-user")){
        sendFollowRequest(event.target, 'subscribedUsers');
      } else if(event.target.classList.contains("follow-hashtag")){
        sendFollowRequest(event.target, 'subscribedHashtags');
      } else if(event.target.classList.contains("follow-cat")){
        sendFollowRequest(event.target, 'subscribedCategories');
      }

标签： javascript

Answer 1

开关实际上是为了匹配精确匹配。有一些不好的做法，你可以在比赛的开关中使用 true 。如果您正在寻找清理代码。您可以轻松地使用变量来提取常见的东西，但仍然会是很多代码。

var target = event.target 
var cList = target.classList
if(cList.contains("follow-user")){
  sendFollowRequest(target, 'subscribedUsers');
} else if(cList.contains("follow-hashtag")){
  sendFollowRequest(target, 'subscribedHashtags');
} else if(cList.contains("follow-cat")){
  sendFollowRequest(target, 'subscribedCategories');
}

其他选项是使用对象和循环

var subscribedOptions = {
  'follow-user': 'subscribedUsers',
  'follow-hashtag': 'subscribedHashtags',
  'follow-cat': 'subscribedCategories',
}

function clicky(event) {
  var target = event.target;
  var cList = target.classList;
  
  Object.entries(subscribedOptions).forEach(function(req) {
    if (cList.contains(req[0])){
      sendFollowRequest(target, req[1]);
    }
  })

}

function sendFollowRequest(target, action) {
  console.log(target, action);
}

document.querySelectorAll(".bar").forEach(b => b.addEventListener("click", clicky))

<button class="foo bar follow-hashtag">foo bar follow-hashtag</button>
<button class="foo bar follow-user">foo bar follow-user</button>
<button class="foo bar follow-cat">foo bar follow-cat</button>