JavaScript学习之旅-4(原创)

  1. 云栖社区>
  2. 博客>
  3. 正文

JavaScript学习之旅-4(原创)

小猪看流星 2018-03-26 18:14:00 浏览366
展开阅读全文

在上一篇文章中,我们主要介绍了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地址),文章请勿滥用,也希望大家尊重笔者的劳动成果。

网友评论

登录后评论
0/500
评论
小猪看流星
+ 关注