基于数组生成ul链接时href属性不匹配问题求助

嘿，我一眼就发现问题所在了——你的getURL函数里的switch语句缺少break关键字！

为什么href会乱匹配？ #

在JavaScript的switch语句中，如果某个case执行完后没有加break，程序会触发“贯穿”行为：它不会跳出switch，而是继续执行后续所有case和default的代码。

举个例子：

• 当传入'Yahoo'时，代码先把url设为Yahoo的链接，但因为没有break，会继续执行case 'Bing'的赋值逻辑，最后还会走到default，把url替换成Google的链接。
• 当传入'Bing'时，执行完case 'Bing'后同样会走到default，最终url还是Google的。
• 只有当完全匹配不到任何case时才会直接执行default，但这里的贯穿逻辑导致所有输入最后都会落到default分支。

修复方案 #

方案1：给每个case添加break

这是最直接的修复方式，阻止代码贯穿：

getURL (type) {
  let url
  switch (type) {
    case 'Yahoo':
      url = 'https://www.yahoo.com/'
      break; // 添加break，跳出当前case
    case 'Bing':
      url = 'https://www.bing.com/'
      break; // 添加break
    default:
      url = 'https://www.google.com'
  }
  return url
}

方案2：用对象映射替代switch（更简洁易维护）

如果你的类型和URL是一一对应的关系，用对象字面量替代switch会更清爽：

getURL (type) {
  const urlMap = {
    'Yahoo': 'https://www.yahoo.com/',
    'Bing': 'https://www.bing.com/',
    'Google': 'https://www.google.com'
  }
  // 若传入的type不在映射中，默认返回Google的链接
  return urlMap[type] || urlMap['Google']
}

修改完成后，每个列表项的href就会和对应的网站精准匹配啦！

内容的提问来源于stack exchange，提问作者pitchdiesel