新人学习笔记之(JavaScript循环)

2024-05-28 16:12

本文主要是介绍新人学习笔记之(JavaScript循环),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

一、循环

        1.循环的目的

        2.js中的循环

二、for循环

        1.在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件,由循环体及循环的终止条件组成的语句,被称之为循环语句

         2.for循环重复某些相同操作

三、双重 for 循环

        1. 双重 for 循环概述

        2.外层的for控制行数

        3.内层的for控制每行的个数

        4.for循环小结

四、while 循环

        1.while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,知道比倒是不为真时结束循环

        2.执行思路

五、do while 循环

        1.do... while语句其实是while语句的一个变体。该循环会执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环体

        2.执行思路

六、continue break

        1.continue关键字

        2.break关键字


一、循环
        1.循环的目的

                (1)在实际问题中,有许多具有规律性的重复操作,因此在程序中要完成这类操作就需要重复执行某些语句

        2.js中的循环

                (1)在JS中,主要有三种类型的循环语句

                        1)for循环

                        2)while循环

                        3)do while 循环

二、for循环
        1.在程序中,一组被重复执行的语句被称之为循环体,能否继续重复执行,取决于循环的终止条件,由循环体及循环的终止条件组成的语句,被称之为循环语句

                (1)语法结构

                        1)for循环主要用于把某些代码循环若干次,通常跟计数有关系,其语法结构如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1. for 重复执行某些代码, 通常跟计数有关系// 2. for 语法结构// for (初始化变量; 条件表达式; 操作表达式) {//     循环体// }// 3. 初始化变量 就是用var 声明的一个普通变量 通常用于作为计数器使用// 4. 条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件// 5. 操作表达式 是每次循环最后执行的代码 经常用于我们计算器变量进行更新(递增或递减)// 6. 代码体验 重复循环100次 hello wordfor (var i = 1; i <= 100; i++) {console.log('hello word');}</script>
</head>
<body></body>
</html>

               (2)断点调试

                        1)断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

                        2)断点调试可以帮我们观察程序的运行过程

                        3)浏览器中按F12-->sources -->找到需要调试的文件-->在程序的某一行设置断点

                        4)Watch:监视,通过watch可以监视变量的值的变化,非常的常用。

                        5)F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值的变化

                        6)代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试知识点花点功夫肯定学的会,但是代码调试这个东西,自己不去练,永远都学不会

         2.for循环重复某些相同操作

                (1)for 循环因为有了计数器的存在,我们可以重复的执行某些操作,比如做一些算数运算

三、双重 for 循环
        1. 双重 for 循环概述

                (1)很多情况下,单层for循环并不能满足我们的需求,比如我们要打印5行5列的图形、打印一个倒角三角形等,此时就可以通过循环嵌套来实现

                (2)循环嵌套是指在一个循环语句中在定义一个循环语句的语法结构,例如在for循环语句中,一颗再嵌套一个for循环,这样的for循环语句我们称之为双重for循环

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1. 双重for循环 语法结构// for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式;) {//     for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式;) {//         // 执行语句;//     }// }// 2. 我们可以把里面的循环看作是外层循环的语句// 3. 外层循环一次,里面的循环执行全部// 4. 代码验证for (var i = 1; i<=3; i++) {console.log('这是外层循环的第'+i+'个');for (var j = 1; j <= 3; j++) {console.log('这是里层循环的第'+j+'次');}}</script>
</head>
<body></body>
</html>
        2.外层的for控制行数
        3.内层的for控制每行的个数
        4.for循环小结

                (1)for循环可以重复执行某些相同代码

                (2)for循环可以重复执行些许不同的代码,因为我们有计数器

                (3)for循环可以重复执行某些操作,比如算数运算符加法操作

                (4)随着需求增加,双重for循环可以做更多、更好看的效果

                (5)双重for循环,外层循环一次,内层for循环全部执行

                (6)for循环是循环条件和数字直接相关的循环

                (7)分析要比写代码更重要

                (8)一些核心算法想不到,但是要学会,分析他执行过程

四、while 循环
        1.while语句可以在条件表达式为真的前提下,循环执行指定的一段代码,知道比倒是不为真时结束循环
        2.执行思路

                (1)先执行条件表达式,如果结果为true,则执行循环体代码;如果结果为false,则退出循环体,执行后面代码

                (2)执行循环体代码

                (3)循环体代码执行完毕后,程序会继续判断执行条件表达式,如果条件仍然是true,则会继续执行循环体,直到循环条件为false时,整个循环过程才会结束

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1. while  循环语法结构 while 当...的时候// while (条件表达式) {//     // 循环体// }// 2. 执行思路 当条件表达式结果为true 则执行循环体 否则 退出循环体// 3. 代码验证var num = 1;while (num <= 100) {console.log('hello word');num++}// 4. 里面应该也有计数器 初始化变量’// 5. 里面应该也有操作表达式 完成计数器的更新 防止死循环</script>
</head><body></body></html>
五、do while 循环
        1.do... while语句其实是while语句的一个变体。该循环会执行一次代码块,然后对条件表达式进行判断,如果条件为真,就会重复执行循环体,否则退出循环体
        2.执行思路

                (1)先执行一次循环代码

                (2)在执行条件表达式,结果为true,则继续执行循环体代码,结果为false则退出循环体,继续执行后面代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// 1. do while 循环语法结构// do {//     // 循环体// } while (条件表达式);// 2. 执行思路 跟 while 不同的地方在于 do while 先执行一次循环体 在判断条件// 如果条件表达式结果为 真,则继续执行循环体 否则退出循环体// 3. 代码验证var i = 1;do {console.log('hello word');i++;} while (i <= 100);</script>
</head><body></body></html>

        3.注意:先再执行循环体,再判断,我们会发现do...while循环语句至少会执行一次循环题代码

六、continue break
        1.continue关键字

                (1)continue关键字用于立即跳出本次循环,继续下一次循环本次循环体中continue之后的代码就会少执行一次

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// continue  关键字 退出本次(当前次的循环)继续执行剩余次数循环for (var i = 1; i <= 5; i++) {if (i == 3) {continue; // 只要遇见continue就退出本次循环 直接跳转到i++}console.log('现在是hello word的第' + i + '遍');}// 1. 求1~100之间,除了能被7整除之外的整数和var sum = 0;for (var i = 1; i <= 100; i++) {if (i % 7 == 0) {continue;}sum += i;}console.log(sum);</script>
</head><body></body></html>
        2.break关键字

                (1)break 关键字用于立即跳出整个循环(循环结束)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>// break 退出整个循环for (var i = 1; i <= 5; i++) {if (i == 3) {break;}console.log('输出了' + i + '遍hello word');}</script>
</head><body></body></html>

这篇关于新人学习笔记之(JavaScript循环)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1011052

相关文章

Java中的String.valueOf()和toString()方法区别小结

《Java中的String.valueOf()和toString()方法区别小结》字符串操作是开发者日常编程任务中不可或缺的一部分,转换为字符串是一种常见需求,其中最常见的就是String.value... 目录String.valueOf()方法方法定义方法实现使用示例使用场景toString()方法方法

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类,使用它

Java进行文件格式校验的方案详解

《Java进行文件格式校验的方案详解》这篇文章主要为大家详细介绍了Java中进行文件格式校验的相关方案,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、背景异常现象原因排查用户的无心之过二、解决方案Magandroidic Number判断主流检测库对比Tika的使用区分zip

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义