javaScript - 循环内多种情况的条件判断写法

最新推荐文章于 2023-09-15 10:58:38 发布

thingir

最新推荐文章于 2023-09-15 10:58:38 发布

阅读量664

点赞数

分类专栏： javascript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/thingir/article/details/128917496

版权

javascript 专栏收录该内容

40 篇文章 2 订阅

订阅专栏

使用场景

对数组进行循环判断，有多种条件需要判断，然后对符合所有条件的那一项数据进行操作

案例如下

使用querySelectorAll可以获取页面所有a 标签数组，然后对符合条件的a 标签进行处理

在这里插入图片描述

代码实现

<!DOCTYPE HTML>
<html>
<body>

  <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>
</body>
</html>

第一种思路：直接if判断，把多种条件使用&&放一起，对符合所有条件的项进行处理

  <script>
    // 第一种思路
    let links = document.querySelectorAll('a');
 
    for(let link of links){
      let atr = link.getAttribute('href');
      if(atr && !atr.startsWith('http://internal.com') && atr.includes('://')){
        link.style.color = 'orange'
      }
    }
  </script>

第二种思路：使用continue，不符合条件的跳过本次循环

<script>
let links = document.querySelectorAll('a');

for (let link of links) {
  let href = link.getAttribute('href');
  if (!href) continue; // 没有特性

  if (!href.includes('://')) continue; // 没有协议

  if (href.startsWith('http://internal.com')) continue; // 内部的

  link.style.color = 'orange';
}
</script>