新人学习笔记之(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中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流(parallelStream)的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面:本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一:使用 which命令方法二:使用 Java_home工具(Apple 官方推荐)那问题来了,

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述:HashMap的宏观结构二、核心数据结构解析1. 数组(桶数组)2. 链表节点(Node

Java AOP面向切面编程的概念和实现方式

《JavaAOP面向切面编程的概念和实现方式》AOP是面向切面编程,通过动态代理将横切关注点(如日志、事务)与核心业务逻辑分离,提升代码复用性和可维护性,本文给大家介绍JavaAOP面向切面编程的概... 目录一、AOP 是什么?二、AOP 的核心概念与实现方式核心概念实现方式三、Spring AOP 的关

详解SpringBoot+Ehcache使用示例

《详解SpringBoot+Ehcache使用示例》本文介绍了SpringBoot中配置Ehcache、自定义get/set方式,并实际使用缓存的过程,文中通过示例代码介绍的非常详细,对大家的学习或者... 目录摘要概念内存与磁盘持久化存储:配置灵活性:编码示例引入依赖:配置ehcache.XML文件:配置

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程?1.2 为什么需要虚拟线程?二、虚拟线程与平台线程对比代码对比示例:三

Java中的.close()举例详解

《Java中的.close()举例详解》.close()方法只适用于通过window.open()打开的弹出窗口,对于浏览器的主窗口,如果没有得到用户允许是不能关闭的,:本文主要介绍Java中的.... 目录当你遇到以下三种情况时,一定要记得使用 .close():用法作用举例如何判断代码中的 input

Spring Gateway动态路由实现方案

《SpringGateway动态路由实现方案》本文主要介绍了SpringGateway动态路由实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随... 目录前沿何为路由RouteDefinitionRouteLocator工作流程动态路由实现尾巴前沿S