js:运算符+流程控制

146 阅读6分钟

运算符

运算符:也被称为操作符,是用于实现赋值,比较和执行算数运算等功能的符号。

JavaScript中常用的运算符有:

  1. 算术运算符
  2. 赋值运算符
  3. 递增和递减运算符(一元运算符)
  4. 比较运算符
  5. 逻辑运算符

算术运算符

概念:算术运算符运用的符号,用于执行两个变量或值的算术运算。

运算符描述案例
+10+20=30
-10-20=-10
*10*20=200
/10/20=0.5
%取余数(取模)返回除法的余数9%2=1

一个数的余数是0就说明这个数能被整除,这就是%取余运算符的主要用途

注意算术运算符优先级,先乘除,后加减,有小括号先算小括号里面的

表达式和返回值

表达式:是由数字,运算符,变量等以能求得数值的有意义排列方式所得的组合

简单理解:是由数字,运算符,变量等组成的式子。

表达式最终都会有一个结果,返回给我们,我们称为返回值。

代码:

		let num = 30,
            num1 = 5;
        /* 加法运算符 */
        num2 = num + num1;
        /* 减法运算符 */
        num3 = num - num1;
        /* 乘法运算符 */
        num4 = num * num1;
        /* 除法运算符 */
        num5 = num / num1;
        /* 取模 */
        num6 = num % num1;
        /* 遵循先乘除在加减 */
        num7 = num1 + num * num1;
        /* 有括号先算括号里的 */
        num8 = (num + num1) / num1


        console.log(num2); //35
        console.log(num3); //15
        console.log(num4); //150
        console.log(num5); //6
        console.log(num6); //0
        console.log(num7); //155
        console.log(num8); //7

圆面积的计算(π用 Math.PI)

  let r = prompt('请输入圆的半径'),
            area;
        area = Math.PI * r * r;
        console.log(area);

赋值运算符

已经学过的赋值运算符:= 将等号右边的值赋予给左边, 要求左边必须是一个容器

其他的赋值运算符:

  1. +=

  2. -=

  3. *=

  4. /=

  5. %=

 		let num = 30;

        num += 3;
        // num = num + 3
        console.log(num); //33

        num -= 3;
        // num = num - 3
        console.log(num); //30

        num *= 3;
        // num = num * 3
        console.log(num); //90

        num /= 3;
        // num = num / 3
        console.log(num); //30

        num %= 4
         // num = num % 4
        console.log(num); //2

一元运算符

前置递增运算符

++num前置递增,就是自加1,类似于num = num + 1 。但是++num写起来更简单

使用口诀:先自加,后返回值。

后置递增运算符

num++后置递增,就是自加1,类似于num = num+1,但是num++写起来更简单。

使用口诀:先返回原值后自加。

 		let i = 10,
            a;
        /* 前置增加 */
        a = ++i + 3;
        /* 
        拆解:
        ++i为结果  ++1=11
        i为变量     i=11
        a=14
        
         */
        console.log('a的值为:' + a); //14

        let num = 10
            /* 后置增加 */
        num1 = num++ + 6;
        /* 
        拆解:
            结果:num++ =10
            变量:num=11
            num1=16
         */
        console.log('num1的值为:' + num1); //16



        let b = 3,
            c;
        c = --b + 2

        /*
        拆解 :
        结果:--b=2
        变量:b=2
        c=4
         */
        console.log('c的值为:' + c);


        let x = 3,
            y;
        y = x-- + 2
            /* 
            拆解:
            结果:x--=3
            变量:x=2
            y=5
            */
        console.log('y的值为:' + y);

比较运算符

概念:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。

运算符名称说明案例
<小于号1<2true
大于号1>2false
>=大于等于号(大于或等于)2>=2true
<=小于等于号3<=2false
==等于号37==‘37’true
===全等于 要求值和数据类型都一致37===37true
!=不等号37 != 37true
!==不全等 要求值和数据类型都不一致37===’37’false

区别:

符号作用用法
=赋值把右边给左边
==判断判断两边值是否相等(注意此时有隐式转换)
===全等判断两边的值和数据类型是否完全相同。
  //比较后的结果,是一个Boolean 类型 true false
        console.log(4 > 5); //false
        console.log(4 > 3); //true
        console.log(3 < 6); //true
        console.log(3 < 8); //false
        //判断是否相等 要用两个 "=" 号
        console.log(3 == 2); //false
        //let num = 4
        //num=5;//只写一个等于号 赋值
        //console.log(num == 5); //两个等于号才是判断

        // != 不等于
        //console.log(3 != 5); //true

        //数字和字符串比较
        console.log(3 == '3'); //true "=="只要值相等,不在乎类型是否相等
        console.log(3 === '3'); //false "==="值和数据类型都要相等
        console.log(3 === 3); //true
        console.log(3 != 3); //false
        console.log(3 != '3'); //false
        console.log(3 !== '3'); //true

        //比较一般都是对数字作比较
        //对于字符串数比较,跟多是判断两者是否相等
        //console.log('A' === 'B');

        // 字符串比较,是比较的字符对应的ASCII码 
        console.log('A' > 'B'); //65 > 66 false

		console.log('2'>'19');//比较的是 ‘2’>'1' true

        //  NaN不等于任何值,包括它本身
        console.log(NaN === NaN); //fasle 不能认为  两者代码一样就相等(不是一个数字)

        // 尽量不要比较小数,因为小数有精度问题
		let resault = 0.1+0.2;   结果不是0.3,而是0.3000000000000004
		Console.log(0.07*100);   结果不是7,而是7.000000000000001

        // 不同类型之间比较会发生隐式转换
        console.log(4 > '3');
        // console.log(4 > Number('3'));

逻辑运算符

概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值,后面,开发中经常用于多个条件的判断。

逻辑运算符说明案例
&&“逻辑与”,简称“与”andtrue&&false
||“逻辑或”,简称“或”ortrue||false
!“逻辑非”,简称“非”not!true

逻辑与 &&

两边都是true才返回true,否则返回false

        //逻辑与&&(两个判断条件为真,结果为true)
        let a = 33 > 22 && 44 > 20;
        console.log(a);//true

逻辑或 ||

两边都为false才返回false,否则都为true

  //逻辑或 ||(两个判断条件为假,结果为false)
        let b = 33 > 44 || 22 < 11
        console.log(b);//false

逻辑非!

逻辑非(!)也叫作取反符,用来取一个布尔值相反的值,如true的相反值是false

let c = false
        console.log(!c);//true

短路运算

短路运算的原理:当有多个表达式(值)时,左边的表达式值可以通过确定结果时,就不在继续运算右边的表达式的值;

逻辑与
  1. 语法:表达式1&&表达式2

  2. 如果第一个表达式的值为真,则返回表达式2

  3. 如果第一个表达式的值为假,则返回表达式1

 //短路(逻辑与:第一个判断条件为真,继续向后面执行)
       let num = 33 > 22 && console.log(true);
       let num = 33 > 22 && console.log(true);
逻辑或
  1. 语法:表达式1 || 表达式2

  2. 如果第一个表达式的值为真,则返回表达式1

  3. 如果第一个表达式的值为假,则返回表达式2

//逻辑或短路运算 如果 表达式1 结果为真 则返回的是 表达式1 如果 表达式1 结果为假 则返回 表达式2

console.log(123 || 456); //123

console.log(123 || 456 || 456 + 123); //123

console.log(0 || 456 || 456 + 123); //456

运算符优先级

优先级运算符顺序
1小括号()
2一元运算符++ -- !
3算数运算符先 * / % 后 + -
4关系运算符> >= < <=
5相等运算符!== == != ===
6逻辑运算符先&& 后 ||
7赋值运算符=
8逗号运算符

流程控制

在一个程序执行的过程中,各条代码的执行顺序结果都是有影响的,很多时候我们要控制代码的执行顺序来实现我们要完成功能。

简单理解:流程控制就是来控制我们的代码按照什么顺序来执行。

流程控制主要有三种结构,分别是顺序结构,分支结构和循环结构,这三种结构代表三种代码执行顺序。

wps61D1.tmp.jpg

顺序流程控制

顺序结构程序中最简单,最基本的流程结构,他没有特定的语法结构,程序按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。

wps61D2.tmp.jpg

分支结构

由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码,(执行代码多选一的过程),从而得到不同的结果。

wps61D3.tmp.jpg

JS语言提供了两种分支结构语句

  1. if语句

  2. Switch语句

语句

语句可以理解为一个行为,循环语句和分支语句就是典型的语句,一个程序由很多个语句组成,一般情况下,会分隔成一个一个的语句。

单分支语句

//1.if的语法结构  

// if (条件表达式) {

//   执行语句

// }

//2.执行私立 如果 if 里面的条件表达式结果为真true 则执行大括号里面的执行语句

//如果if条件表达式结果为假 则不执行大括号里面的语句 则执行if语句后面的代码

//3.代码体验

 	/* 隐式转换:将字符串类型转换为数字类型 */
        let score = +prompt('请输入分数');
        /* 判断条件 分数大于80 正确  否则 错误 */
        if (score > 80) {
            alert('恭喜你,成为上忍了')
        }

执行流程

wps6653.tmp.jpg

双分支语句

//1.语法结构 if 如果  else否则

// if (条件表达式) {

//   执行语句1

// } else {

//   执行语句2

// }

//2. 执行思路 如果表达式结果为真 那么执行语句1 否则 执行语句2

//3. 代码验证

let age = prompt('请输入您的年龄');

if (age >= 18) {

  console.log('可以进入网吧');

} else {

  console.log('不可以进入网吧');

}

//5.if里面的语句1 和 else 里面的语句2 最终只能有一个语句执行 2选1

//6.else后面直接跟大括号

执行流程:

wps719C.tmp.jpg

多分支语句

  1. 语法结构:
//1.多分支语句 就是利用多个条件来选择不同的语句执行 得到不同的结果 多选1 的过程

//2.if else if 语句是多分支语句

//3.语法规范

// if (条件表达式1) {

//   语句1

// } else if (条件表达式2) {

//   语句2

// } else if (条件表达式3) {

//   语句3

// } else {

//   最后的语句

// }

//4.执行思路

//如果条件表达式 1 满足就执行语句1 执行完毕后,退出整个if分支语句

//如果条件表达式 1 不满足,则判断条件表达式2 满足的话,执行语句2 以此类推

//如果上面的所有条件表达式都不成立,则执行else里面的语句

//5.注意点

//(1) 多分支语句还是多选 1 最后只能有一个语句执行

//(2) else if 里面的条件理论上是可以任意多个的。


   let day = +prompt("请输入今天星期几")
        if (day === 1) {
            alert('今天看火影忍者');
        } else if (day === 2) {
            alert('今天看海贼王');
        } else if (day === 3) {
            alert('今天看死神');
        } else if (day === 4) {
            alert('今天看银魂');
        } else if (day === 5) {
            alert('今天看城市猎人');
        } else if (day === 6) {
            alert('今天看七龙珠')
        } else {
            alert('今天看名侦探柯南')
        }
  1. 执行流程:

wps9865.tmp.jpg

三元表达式

三元表达式也能做一些简单的条件选择,有三元运算符组成的式子称为三元表达式。

//1.有三元运算符组成的式子我们称为三元表达式

//2. 语法结构:条件表达式 ? 表达式1:表达式2

//3.执行思路:如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回 表达式2 的值

//4.代码体验

		let num1 = +prompt('请输入数字'),
           	num2 = +prompt('请输入数字');
        num = num1 > num2 ? num1 : num2
        console.log('最大数为:' + num);