【微搭低代码】JavaScript基础知识-循环和条件控制

简介: 【微搭低代码】JavaScript基础知识-循环和条件控制

我们上一篇讲解了变量的基础知识,我们本节继续介绍一下javascript中的循环和条件控制语句。在介绍循环之前,首先需要介绍一下表达式的基础知识


表达式


javascript中有几种表达式,一种是算术计算表达式,一种是逻辑运算表达式。算术计算表达式是通过算术运算符来进行表达,比如


1+1


这是做数字的相加,结果等于2。算术运算符也遵守四则运算的规则,比如先乘除后加减


1+2*3


这个表达式的结果是7,先做2乘以3得到6,然后再相加。算术运算符可以使用小括号来改变优先级,比如这样

(1+2)*3


小括号括起来就先进行求和然后再相乘。一般如果不肯定优先级的,最好都用括号括起来


如果不是数字运算的,比如左边是数字,右边是字符串的,那么+号就变成了字符串连接,比如

1+“2”


连接之后就变成了12,不是12的意思,是相当于字符串1和2的连接,连接完的类型也是字符串。这也是有的初学者会问,为啥没有进行计算,要看一下你的变量的类型,究竟是数字还是字符串


除了算术表达式外,还有一种常用的表达式是条件表达式,条件表达式一般会使用比较运算符

image.png

一般初学者比较难理解的是比较运算符,比较运算符会计算表达式的值,返回true或者false,我们一般是构造一个表达式,比如


3>0


在数学上3比0大,那么这个式子成立,就返回true,如果


1>3


这个式子不成立就返回false。通常我们不会写常量进行比较,往往是变量比较。比如我们从数据源中返回一个结果,用返回的总条数来和数字比较,比如


result.total>0


我就通过记录的条数是否大于0来决定后续代码的执行逻辑


循环


我们理解了表达式的意思之后,往往会应用到循环中。循环就是帮我们重复的执行一件事,比如我们数豆子,我们每拿一个豆子就计数为1,再拿一个豆子就计数为2,以此重复执行就是一种循环。循环有多种语法,通常有while循环,for循环。while循环的语法是

while(表达式){
  执行需要重复执行的动作
  改变表达式的计算规则,有可能是让循环变量+1或者-1
}


我们用代码演示一下

let loops = 5
while(loops>0){
  console.log(loops);
  loops = loops-1;
}

循环的执行步骤是:

1、先定义一个变量loops,并且赋值为5

2、检测loops>0的值,现在5>0,表达式的计算结果为true

3、条件为true就进入循环里

4、打印循环变量,目前在控制台输出5

5、循环变量减1,目前loops的值为4


然后再重复执行一次

1、检查loops>0的值,现在是4>0,表达式的计算结果为true

2、条件为true就进入循环里

3、打印循环变量,目前在控制台输出4

4、循环变量减1,目前loops的值为3


再重复执行

1、检查loops>0的值,现在是3>0,表达式的计算结果为true

2、条件为true就进入循环里

3、打印循环变量,目前在控制台输出3

4、循环变量减1,目前loops的值为2


再重复执行

1、检查loops>0的值,现在是2>0,表达式的计算结果为true

2、条件为true就进入循环里

3、打印循环变量,目前在控制台输出2

4、循环变量减1,目前loops的值为1


再重复执行

1、检查loops>0的值,现在是1>0,表达式的计算结果为true

2、条件为true就进入循环里

3、打印循环变量,目前在控制台输出1

4、循环变量减1,目前loops的值为0


再重复执行

1、检查loops>0的值,现在是0>0,表达式的计算结果为false

2、条件为false就不再进入循环里,这样循环就结束了


初学代码开发,可能最难理解的就是循环了,可以按照我的步骤,在本子上把每次执行的结果在头脑中运算一下,就理解是什么意思了


条件控制


除了循环往复执行外,还有一种就是按照条件执行,语法是

if(条件){
}else if(条件){
}else{
}


每一个if就是一个分支,需要检测条件的返回结果是否为true,如果为true就进入到这个分支里,如果条件都不满足就执行最后一个else语句


条件控制通常来帮助我们做决策,就像现实中如果天下雨,我就在家,如果天不下雨我就出门,那用条件控制来实现就是

if(天下雨){
  我就在家
}else{
  我就出门
}


我们通常所说的算法,其实就是一种逻辑,只要熟练掌握这两种语法,基本的程序开发就算入门了。当然只有逻辑还不行,我们通常还需要有数据结构,比如数组、Map、Set这些,不同的数据结构用来解决不同的问题,也需要仔细学习。


总结


我们本篇介绍了javascript的表达式、循环、条件控制等基本语法,初学编程需要熟练应用,才可以按照自己的需求来完成功能开发。


相关文章
|
2月前
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
43 6
JS循环for、for...of、for...in
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-流程控制之while循环
这篇文章介绍了JavaScript中的while循环和do...while循环的基础知识,并通过一个实际案例演示了如何使用while循环计算投资增长到特定金额所需的年数。
50 2
JavaScript基础知识-流程控制之while循环
|
1月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
31 0
|
3月前
|
JavaScript 前端开发
JavaScript中有哪几种循环?他们的运用场景在哪?
JavaScript中有哪几种循环?他们的运用场景在哪?
|
3月前
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
143 0
|
11天前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
22 2
|
2月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
51 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
2月前
|
JavaScript 前端开发 索引
|
2月前
|
JavaScript 前端开发
JavaScript基础知识-forEach循环
关于JavaScript基础知识中forEach循环的介绍。
42 1
JavaScript基础知识-forEach循环
|
1月前
|
JavaScript
自动循环提交js
自动循环提交js
17 0