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地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

相关文章
|
2月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
72 3
|
3月前
|
JavaScript
ES6学习(9)js中的new实现
ES6学习(9)js中的new实现
|
9天前
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
|
2月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
38 4
js学习--制作猜数字
|
2月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
48 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
3月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
3月前
|
JavaScript 前端开发 API
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
该文章跟随月影老师的指导,探讨了编写优质JavaScript代码的三大原则:各司其职、组件封装与过程抽象,通过具体示例讲解了如何在实际开发中应用这些原则以提高代码质量和可维护性。
紧跟月影大佬的步伐,一起来学习如何写好JS(上)
|
2月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
37 4
|
2月前
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
20 2
|
2月前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
19 2
下一篇
无影云桌面