JS基础知识之流程控制

宋小羽 • 2022年6月20日 pm1:41 • JavaScript • 350 阅读

运算符

算数运算符

包含加减乘除、取模（%）运算等

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)

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);

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(布尔值) 语句;

// if结构的两种写法

// 当需要执行的代码有多个语句时，必须使用代码块的写法

if(布尔值) {

代码块;

}

// 或者

if(布尔值) 语句;

上面的结构表示，如果表达式的求值结果（即布尔值）为true，就执行紧跟在后面的语句；否则，跳过紧跟在后面的语句。

if...else结构

if代码块后面，可以跟一个else代码块，表示不满足条件时，要执行的代码。

if(m === 3) {
  // 满足条件时，执行的语句
} else {
  // 不满足条件时，执行的语句
}

if(m === 3) {

// 满足条件时，执行的语句

} else {

// 不满足条件时，执行的语句

}

对一个变量进行多次判断时，多个if...else语句可以写在一起。

if(m === 0) {
    // ...
} else if(m === 1) {
    // ...
} else if(m === 2) {
    // ...
}

if(m === 0) {

// ...

} else if(m === 1) {

// ...

} else if(m === 2) {

// ...

}

三元运算符

(条件) ? 表达式1 : 表达式2;

1	(条件) ? 表达式1 : 表达式2;

上面代码中，如果“条件”为true，则返回“表达式1”的值，否则返回“表达式2”的值。

var even = (n % 2 === 0) ? true : false;
console.log(even);

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:
    // ...
}

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 等于其他值

// 缺少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 没有发生类型转换

var x = 1;

switch (x) {

case true:

console.log('x 发生类型转换');

break;

default:

console.log('x 没有发生类型转换');

break;

}

// x 没有发生类型转换

循环语句

循环语句用于重复执行某个操作。

for循环

for语句可以指定循环的起点、终点和终止条件。

for(初始化表达式; 条件; 递增表达式;){
    代码块;
}

for(初始化表达式; 条件; 递增表达式;){

代码块;

}

for语句后面的括号中，有三个表达式。

初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有当表达式值为真，才会继续进行循环。
递增表达式（increment）：每轮循环的最后一个操作，通常都是用来递增循环变量

var x = 3;
for (var i = 0; i < x; i++) {
    console.log(i);
}
// 0
// 1
// 2

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(条件) 代码块;

while(条件) {

代码块；

}

// 或者

// 当代码块只有一条语句时，可以省略大括号

while(条件) 代码块;

输出0-100

// 使用while输出0-100
var i = 0;
while (i <= 100) {
    console.log('i 当前为' + i);
    i++
}

// 使用while输出0-100

var i = 0;

while (i <= 100) {

console.log('i 当前为' + i);

i++

}

使用while循环时，内部代码块必须要有让循环条件不满足的操作，否则会形成无限循环，代码一直执行。

do...while循环

do...while循环与while循环类似，唯一的区别就是先运行一次循环体，然后判断循环条件。

do {
    循环体
} while (条件);

do {

循环体

} while (条件);

不管条件是否为真，都先运行一遍循环体。注意while语句后面的分号;不要省略。

var x = 3;
var i = 0;
do {
    console.log(i);
    i++
} while (i < 3);
// 0
// 1
// 2

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;
}

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);
}

var i = 0;

while (i <= 100) {

i++;

if (i === 10) continue;

console.log('i 当前为' + i);

}

上面代码中，只有当i不等于10，才会输出i的值。值得注意的是，不能将i++放到continue的下面，否则i的值会一直满足条件，造成无限循环。

如果存在多重循环，不带参数的break语句与continue语句都只针对内存循环。

这些信息可能会帮助到你：外卖红包 | 侵权删除 | 进站必看

文章名称：JS基础知识之流程控制
文章链接：https://www.bysjb.cn/js-process.html

THE END

二维码

打赏

JS基础知识之基础语法

< <上一篇

ajax技术知识总结

下一篇>>

搜索内容

JS基础知识之流程控制

运算符

算数运算符

赋值运算符

一元运算符

一元运算符

自增自减运算符

逻辑运算符

逻辑与

逻辑或

逻辑非

比较运算符

运算符优先级

语句

表达式和语句

分支语句

if分支

三元运算符

switch结构

循环语句

for循环

while循环

do...while循环

循环语句的跳出

取消回复

共有 0 条评论

搜索

目录