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)

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语句都只针对内存循环。

这些信息可能会帮助到你：外卖返钱 | 捐赠我们

原创文章，作者：宋小羽，如若转载，请注明出处：https://bysjb.cn/js-process.html

JS基础知识之流程控制

运算符

算数运算符

赋值运算符

一元运算符

一元运算符

自增自减运算符

逻辑运算符

逻辑与

逻辑或

逻辑非

比较运算符

运算符优先级

语句

表达式和语句

分支语句

if分支

三元运算符

switch结构

循环语句

for循环

while循环

do...while循环

循环语句的跳出

相关推荐

JS数据类型之对象

JS标准库之属性描述对象

JS标准库之Boolean对象

BOM操作浏览器和正则表达式

发表回复