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

这些信息可能会帮助到你: 关于我们 | 饿了么返钱 | 捐赠支持

文章名称:JS基础知识之流程控制
文章链接:https://www.bysjb.cn/js-process.html
THE END
分享
二维码
打赏
< <上一篇
下一篇>>