JS基础知识之流程控制
运算符
算数运算符
包含加减乘除、取模(%
)运算等
let radius = prompt()
// console.log(radius);
radius = parseFloat(radius)
// console.log('raidus', radius);
// 通过输入框拿到用户输入的半径,计算出圆的面积
let res = Math.PI * radius * radius
// console.log('res', res);
document.write('圆的半径是:', radius, ';圆的面积是:', res)
加号上下文
- 如果
+
号左右只有一个值,解析的结果是正号,可用于隐式转换 - 如果
+
号两边都是数值类型,则是+号运算符 - 如果
+
号左右有一个数据是字符串类型的话,那么这个+
号会被解析成连接符
赋值运算符
使用=
表示,将等号右边的值赋予给左边,要求左边必须是一个容器。累加使用+=
表示。
一元运算符
一元运算符
仅操作一个操作数,比如正负号等
自增自减运算符
相同点
不管++
或者--
是在前还是在后,都是在原来的取值上自行加1或减1。
不同点
根据符号的位置判断,++在前先加,++在后后加
- 符号前置:先加一,再运算
- 符号后置:先运算,再加一
逻辑运算符
逻辑与
使用&&
表示,符号两边的值都为真,结果为真;否则为假。
逻辑或
使用||
表示,符号两边的值都为假,结果为假;否则为真。
逻辑非
使用|
表示,给定的值取反,当前值为真,结果为假;反之亦然。
比较运算符
包含>, <, >=, <=, ==, ===, !=, !==
等运算
等于和全等于的异同点
- 都是对符号两边进行相等判断
- 等于只需要符号两边的值相同即可;全等于则需要值和类型都相等
let left = '22'
let right = 22
let res1 = left == right // true
let res2 = left === right //false
console.log('结果', res1, res2);
运算符优先级
同阶运算符,遵循从左到右的顺序依次执行.
. [] ()
> 自增自减运算符 > 算数运算符 > 比较运算符 > 逻辑运算符 > 三元运算符 > 赋值运算符
运算符 | 描述 |
---|---|
. [] () | 字段访问、数组下表、函数调用以及表达式分组 |
++ -- ! | 自增、自减、非 |
/ * % | 除法、乘法、取模 |
+ - +string | 加法、减法、字符串拼接 |
< <= > >= | 小于、小于等于、大于、大于等于 |
== != === !== | 等于、不等、全等、不全等 |
&& | 与 |
|| | 或 |
?: | 三元运算符 |
= | 赋值 |
语句
表达式和语句
表达式
表达式是一组代码的集合,JavaScript
解释器会将其计算出一个结果。(如x = 7、num++)
语句
js
整句或命令,js
语句以分号结束。分号可省略。(如if
条件语句、for
循环语句)
区别
- 表达式计算出一个值
- 语句用来自行使某件事发生
分支语句
JavaScript提供if
结构和switch
结构,完成条件判断,即只有满足预设的条件,才会执行相应的语句。
if分支
if
结构先判断一个表达式的布尔值,然后根据布尔值的真伪,执行不同的语句。
// if结构的两种写法
// 当需要执行的代码有多个语句时,必须使用代码块的写法
if(布尔值) {
代码块;
}
// 或者
if(布尔值) 语句;
上面的结构表示,如果表达式的求值结果(即布尔值)为true
,就执行紧跟在后面的语句;否则,跳过紧跟在后面的语句。
if...else结构
if
代码块后面,可以跟一个else
代码块,表示不满足条件时,要执行的代码。
if(m === 3) {
// 满足条件时,执行的语句
} else {
// 不满足条件时,执行的语句
}
对一个变量进行多次判断时,多个if...else
语句可以写在一起。
if(m === 0) {
// ...
} else if(m === 1) {
// ...
} else if(m === 2) {
// ...
}
三元运算符
(条件) ? 表达式1 : 表达式2;
上面代码中,如果“条件”为true
,则返回“表达式1”的值,否则返回“表达式2”的值。
var even = (n % 2 === 0) ? true : false;
console.log(even);
上面代码中,表示如果变量n
可以被2整除,则even
等于true
,否则even
等于false
。
switch结构
上面多个if...else
连在一起的语句,可以换成更方便的switch
结构。
switch(m) {
case 0:
// ...
break;
case 1:
// ...
break;
default:
// ...
}
上面代码根据m
的代码,选择执行对应的case
。如果所有的case
都不符合,则会执行最后default
中的部分。
需要注意的是,每个case
中代码块内部的break
不能省略,否则会接下去执行下一个case
中的代码块,而不是跳出switch
结构。
// 缺少break进行代码终止,会一直执行到最后
var x = 1;
switch (x) {
case 1:
console.log('x 等于1');
case 2:
console.log('x 等于2');
default:
console.log('x 等于其他值');
}
// x 等于1
// x 等于2
// x 等于其他值
还有一个需要值得注意的是,switch
括号中的表达式,与case
中的表达式比较运行结果时,采用的是严格相等运算符(====
),而不是相等运算符(==
),所以在比较时不会发生类型转换。
var x = 1;
switch (x) {
case true:
console.log('x 发生类型转换');
break;
default:
console.log('x 没有发生类型转换');
break;
}
// x 没有发生类型转换
循环语句
循环语句用于重复执行某个操作。
for循环
for
语句可以指定循环的起点、终点和终止条件。
for(初始化表达式; 条件; 递增表达式;){
代码块;
}
for
语句后面的括号中,有三个表达式。
- 初始化表达式(initialize):确定循环变量的初始值,只在循环开始时执行一次。
- 条件表达式(test):每轮循环开始时,都要执行这个条件表达式,只有当表达式值为真,才会继续进行循环。
- 递增表达式(increment):每轮循环的最后一个操作,通常都是用来递增循环变量
var x = 3;
for (var i = 0; i < x; i++) {
console.log(i);
}
// 0
// 1
// 2
上面代码中,初始化表达式var i = 0
,即初始化一个变量i
;条件表达式是i < x
,即只要i
小于x
,就会执行循环;递增表达式是i++
,即每次循环结束后,i
增加1。
while循环
while
语句包含一个循环条件和一段代码块,只要条件为真,就不断循环执行代码块。
while(条件) {
代码块;
}
// 或者
// 当代码块只有一条语句时,可以省略大括号
while(条件) 代码块;
输出0-100
// 使用while输出0-100
var i = 0;
while (i <= 100) {
console.log('i 当前为' + i);
i++
}
使用while循环时,内部代码块必须要有让循环条件不满足的操作,否则会形成无限循环,代码一直执行。
do...while循环
do...while
循环与while
循环类似,唯一的区别就是先运行一次循环体,然后判断循环条件。
do {
循环体
} while (条件);
不管条件是否为真,都先运行一遍循环体。注意while
语句后面的分号;
不要省略。
var x = 3;
var i = 0;
do {
console.log(i);
i++
} while (i < 3);
// 0
// 1
// 2
循环语句的跳出
break
语句与continue
语句都具有跳转作用,可以让代码不按既有的顺序执行。
break语句
break
语句用于跳出代码块或循环。
var i = 0;
while (i <= 100) {
console.log('i 当前为' + i);
i++;
if (i === 10) break;
}
上面代码中,循环只执行了10次,一旦i
等于10,就会跳出循环。
continue语句
continue
语句用于立即终止本轮循环,返回循环结构的头部,开始下一轮循环。
var i = 0;
while (i <= 100) {
i++;
if (i === 10) continue;
console.log('i 当前为' + i);
}
上面代码中,只有当i
不等于10,才会输出i
的值。值得注意的是,不能将i++
放到continue
的下面,否则i
的值会一直满足条件,造成无限循环。
如果存在多重循环,不带参数的break
语句与continue
语句都只针对内存循环。
共有 0 条评论