新人学习笔记之(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

相关文章

Spring Boot @RestControllerAdvice全局异常处理最佳实践

《SpringBoot@RestControllerAdvice全局异常处理最佳实践》本文详解SpringBoot中通过@RestControllerAdvice实现全局异常处理,强调代码复用、统... 目录前言一、为什么要使用全局异常处理?二、核心注解解析1. @RestControllerAdvice2

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

Spring事务传播机制最佳实践

《Spring事务传播机制最佳实践》Spring的事务传播机制为我们提供了优雅的解决方案,本文将带您深入理解这一机制,掌握不同场景下的最佳实践,感兴趣的朋友一起看看吧... 目录1. 什么是事务传播行为2. Spring支持的七种事务传播行为2.1 REQUIRED(默认)2.2 SUPPORTS2

怎样通过分析GC日志来定位Java进程的内存问题

《怎样通过分析GC日志来定位Java进程的内存问题》:本文主要介绍怎样通过分析GC日志来定位Java进程的内存问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、GC 日志基础配置1. 启用详细 GC 日志2. 不同收集器的日志格式二、关键指标与分析维度1.

Java进程异常故障定位及排查过程

《Java进程异常故障定位及排查过程》:本文主要介绍Java进程异常故障定位及排查过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、故障发现与初步判断1. 监控系统告警2. 日志初步分析二、核心排查工具与步骤1. 进程状态检查2. CPU 飙升问题3. 内存

java中新生代和老生代的关系说明

《java中新生代和老生代的关系说明》:本文主要介绍java中新生代和老生代的关系说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、内存区域划分新生代老年代二、对象生命周期与晋升流程三、新生代与老年代的协作机制1. 跨代引用处理2. 动态年龄判定3. 空间分

Java设计模式---迭代器模式(Iterator)解读

《Java设计模式---迭代器模式(Iterator)解读》:本文主要介绍Java设计模式---迭代器模式(Iterator),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录1、迭代器(Iterator)1.1、结构1.2、常用方法1.3、本质1、解耦集合与遍历逻辑2、统一

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

深度解析Java DTO(最新推荐)

《深度解析JavaDTO(最新推荐)》DTO(DataTransferObject)是一种用于在不同层(如Controller层、Service层)之间传输数据的对象设计模式,其核心目的是封装数据,... 目录一、什么是DTO?DTO的核心特点:二、为什么需要DTO?(对比Entity)三、实际应用场景解析

Java 线程安全与 volatile与单例模式问题及解决方案

《Java线程安全与volatile与单例模式问题及解决方案》文章主要讲解线程安全问题的五个成因(调度随机、变量修改、非原子操作、内存可见性、指令重排序)及解决方案,强调使用volatile关键字... 目录什么是线程安全线程安全问题的产生与解决方案线程的调度是随机的多个线程对同一个变量进行修改线程的修改操