JavaScript学习之旅-4(原创)

简介: 在上一篇文章中,我们主要介绍了javaScript的变量、对象,这一篇的内容我们主要学习JavaScript的条件判断、循环、break和continue语句。

在上一篇文章中,我们主要介绍了javaScript的变量、对象,这一篇的内容我们主要学习JavaScript的条件判断、循环、break和continue语句。

条件判断:

if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码

if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码

if...else if....else 语句 - 使用该语句来选择多个代码块之一来执行

switch 语句 - 使用该语句来选择多个代码块之一来执行

这个条件判断语法跟Java的条件判断语法几乎一样,


img_be7a1ef1917a73f52304ddef9927f662.png
判断条件初体验

 default 关键词来规定匹配不存在时所执行的事情

循环:

JavaScript的循环有两种,一种是for循环,通过初始条件、结束条件和递增条件来循环执行语句块;还有一种是while循环,while循环只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环。

for循环:


img_e3e10ce12ed560e91fc1207c3ccdf20d.png
for循环初体验

我们简单的分析下上面的代码:(document.write 是写入网页的意思,br标签是换行的意思 )

首先:i = 0 这是初始条件,将变量i置为0;

然后:i <= cars.length 这是判断条件,满足时就继续循环,不满足就退出循环;

接着:i++ 这是每次循环后的递增条件,由于每次循环后变量i都会加1,因此它终将在若干次循环后不满足判断条件 i < cars.length 而退出循环。

for循环最常用的地方是利用索引来遍历数组,当然也可以遍历对象。

在JavaScript中,for循环表现形式的还有一种是for ... in循环,它可以把一个对象的所有属性依次循环遍历出来:


img_61526b8586b4298f90409cd93f2393f7.png
for in 循环

如图,我们通过for in 循环可以遍历出对象的key和value;由于Array也是对象,而它的每个元素的索引被视为对象的属性,因此,for ... in循环可以直接循环出Array的索引,如下图:


img_8308f2689fb70bf878f90388026a58b7.png

while循环:

While 循环会在指定条件为true 时循环执行代码块。While只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环。这种while循环写起来,其格式相较for循环来说比较小清新:


img_7b59492f51cdf6bd923e8a81d6f0dca6.png
while循环


do ... while:

do ... while 他是while循环的一种,它和while循环的唯一区别在于,不是在每次循环开始的时候判断条件,而是在每次循环完成的时候判断条件(注意:在每次循环完成的时候会先去判断条件)


img_fff62797528f7db1a04efff70080147d.png
do while 循环

值得注意的是,如果在项目中使用do { ... } while()循环,该循环体至少会执行1次,而for和while循环如果不满足判断条件,则可能一次都不执行。

break、continue 语句:

 break语句是用于跳出循环;continue用于如果满足匹配条件,就跳出循环,进行下一次的循环。

比如,switch语句中,匹配条件,我们就用break跳出循环;下面给一个continue语句的截图,


img_02f5e3ab2a39ed3c8e0de6eda6609a24.png
continue用法

当满足 i == 3 这个判断条件的时候,循环就跳出;然后继续循环,所以日志上面打印的是0、1、2、4、5 没有打印3。


拓展:

1)for循环的3个条件都是可以省略的,如果没有退出循环的判断条件,就必须使用break语句退出循环,否则就是死循环:

img_10865cb64ce75e5c612de6176f32dcf3.png
for循环的无限循环

2)JavaScript的死循环会让浏览器无法正常显示或执行当前页面的逻辑,有的浏览器会直接挂掉,有的浏览器会在一段时间后提示你强行终止JavaScript的执行,因此,要特别注意死循环的问题。

未完待续。。。

如果这篇文章对你有帮助,希望各位看官留下宝贵的star,谢谢。

Ps:著作权归作者所有,转载请注明作者, 商业转载请联系作者获得授权,非商业转载请注明出处(开头或结尾请添加转载出处,添加原文url地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

相关文章
|
6月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
6月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
258 2
|
7月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
237 0
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
125 4
js学习--制作猜数字
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
226 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
248 5
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
127 7
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
145 2

热门文章

最新文章