为何for...of循环执行中断？添加if判断后却能正常运行

对应的HTML代码： #

<a name="list">the list</a>
<ul>
  <li><a href="http://google.com">http://google.com</a></li>
  <li><a href="/tutorial">/tutorial.html</a></li>
  <li><a href="local/path">local/path</a></li>
  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
  <li><a href="http://internal.com/test">http://internal.com/test</a></li>
</ul>

原无法运行的JavaScript代码： #

let links = document.querySelectorAll('a');
for (let link of links) {
  let href = link.getAttribute('href');
  alert(href.includes("://"))
}

修改后可正常运行的JavaScript代码： #

let links = document.querySelectorAll('a');
for (let link of links) {
  let href = link.getAttribute('href');
  if (!href) continue;
  alert(href.includes("://"))
}

原因解析： #

你的HTML里第一个<a>标签只有name属性，没有href属性。当用getAttribute('href')获取它的href值时，会返回null。

而null属于原始值，没有includes方法，直接调用href.includes("://")会抛出TypeError，导致代码直接中断，后续循环无法执行。

添加if (!href) continue;后，当href为null（或空字符串）时，会直接跳过当前循环迭代，不执行后续的alert语句，这样后面带有合法href属性的<a>标签就能正常触发弹窗，代码也不会因报错中断。

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