[JavaScript] 第四章控制、循环语句

最新推荐文章于 2024-09-01 13:33:34 发布

青花科技

最新推荐文章于 2024-09-01 13:33:34 发布

阅读量777

点赞数 21

文章标签： javascript 开发语言 ecmascript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/s445320/article/details/135477720

版权

前端小知识分享专栏收录该内容

9 篇文章 0 订阅

订阅专栏

春花秋月何时了，往事知多少。此付费专栏不要订阅，不要订阅，听人劝。

🌹作者主页：青花锁 🌹简介：Java领域优质创作者🏆、Java微服务架构公号作者😄
🌹简历模板、学习资料、面试题库、技术互助

🌹文末获取联系方式 📝

系列专栏目录

[Java项目实战] 介绍Java组件安装、使用；手写框架等
 [Aws服务器实战] Aws Linux服务器上操作nginx、git、JDK、Vue等
 [Java微服务实战] Java 微服务实战，Spring Cloud Netflix套件、Spring Cloud Alibaba套件、Seata、gateway、shadingjdbc等实战操作
 [Java基础篇] Java基础闲聊，已出HashMap、String、StringBuffer等源码分析，JVM分析，持续更新中
 [Springboot篇] 从创建Springboot项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回、全局异常处理、Swagger文档
 [Spring MVC篇] 从创建Spring MVC项目，到加载数据库、静态资源、输出RestFul接口、跨越问题解决到统一返回
 [华为云服务器实战] 华为云Linux服务器上操作nginx、git、JDK、Vue等，以及使用宝塔运维操作添加Html网页、部署Springboot项目/Vue项目等
 [Java爬虫] 通过Java+Selenium+GoogleWebDriver 模拟真人网页操作爬取花瓣网图片、bing搜索图片等
 [Vue实战] 讲解Vue3的安装、环境配置，基本语法、循环语句、生命周期、路由设置、组件、axios交互、Element-ui的使用等
 [Spring] 讲解Spring(Bean)概念、IOC、AOP、集成jdbcTemplate/redis/事务等

前言

本章介绍JavaScript的控制、循环语句，包括：if、switch、while 、do while、for、for in、for of、跳出循环等。

1、if 语句

if (条件表达式 1) {
    // 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
    // 条件表达式 2 为真时执行的代码
}
...
  else if (条件表达式N) {
    // 条件表达式 N 为真时执行的代码
} else {
    // 所有条件表达式都为假时要执行的代码
}

<script>
  function checkAge() {
       var ageElement = document.getElementById("age")
       var ageValue = ageElement.value;
  
       if(ageValue < 0 ) {
            alert("输入不合法")
       } else if( ageValue <= 10 ) {
           alert("儿童")
       } else if( ageValue > 10 && ageValue < 18 ) {
           alert("少年")
       } else if( ageValue >= 18 && ageValue <= 40 ) {
           alert("青年")
       } else {
           alert("老年")
       }
   }
</script>
<body>
    <input type="number" id="age" placeholder="请输入年龄！">
    <br>
    <input type="button" onclick="checkAge()" value="确定">
</body>

2、switch语句

switch (表达式){
    case value1:
        statements1  // 当表达式的结果等于 value1 时，则执行该代码
        break;
    case value2:
        statements2  // 当表达式的结果等于 value2 时，则执行该代码
        break;
    ......
    case valueN:
        statementsN  // 当表达式的结果等于 valueN 时，则执行该代码
        break;
    default :
        statements  // 如果没有与表达式相同的值，则执行该代码
}

<script>
  function checkAge() {
       var ageElement = document.getElementById("age")
       var ageValue = ageElement.value;
  
       var ageStatus = 0;
       if(ageValue < 0 ) {
           ageStatus = -1;
       } else if( ageValue <= 10 ) {
           ageStatus = 1;
       } else if( ageValue > 10 && ageValue < 18 ) {
           ageStatus = 2;
       } else if( ageValue >= 18 && ageValue <= 40 ) {
           ageStatus = 3;
       } else {
           ageStatus = 4;
       }

       switch (ageStatus) {
           case -1:
               alert("输入不合法")  // 当表达式的结果等于 value1 时，则执行该代码
               break;
           case 1:
               alert("儿童")  // 当表达式的结果等于 value2 时，则执行该代码
               break;
           case 2:
               alert("少年")  // 当表达式的结果等于 value2 时，则执行该代码
               break;
           case 3:
               alert("青年")  // 当表达式的结果等于 valueN 时，则执行该代码
               break;
           default :
               alert("老年")  // 如果没有与表达式相同的值，则执行该代码
       }
   }
</script>
<body>
    <input type="number" id="age" placeholder="请输入年龄！">
    <br>
    <input type="button" onclick="checkAge()" value="确定">
</body>

3、while循环语句

while (条件表达式) {
    // 要执行的代码
}

var i = 1;
while( i <= 5) {
    document.write(i+", ");
    i++;
}

4、do while语句

do {
    // 需要执行的代码
} while (条件表达式);

var i = 1;
do{
    document.write(i + " ");
    i++;
}while (i < 5);

5、for

for(initialization; condition; increment) {
    // 要执行的代码
}

for (var i = 1; i <= 10; i++) {
    document.write(i + " ");
}

6、for in

for (variable in object) {
    // 要执行的代码
}

// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};

// 遍历对象中的所有属性
for(var prop in person) {
    document.write("<p>" + prop + " = " + person[prop] + "</p>");
}

7、for of

for (variable of iterable) {
    // 要执行的代码
}

// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {
    document.write(value + ", ");
}
document.write("<br>");