day02:js基础——运算符详解

1.JS运算符分类

运算符类型	表示符号
数学运算符	+ , - , * , / , %
比较运算符	>, >=, <, <=, == , !=, === , !==
赋值运算符	=, += , -=, *=, /= , %=
逻辑运算符	&& ， || ， ！
一元运算符	++ ， --，
三元运算符	? :

2. 运算符的使用说明

  在上文我们列举了js中的运算符类型以及表示符号，下面配合代码进行学习。

2.1 数学运算符

js为弱类型语言,对类型的声明不做强制要求,所以我们正在进行运算的时候需要自己格外注意数据的类型

	    // 顾名思义，数学运算符用于进行数学运算
        // 先定义一些变量, 回想一下上一天的数据类型
        var num1 = 1,num2 = 2  
        var str1 = '1' , num3
        var num4 = NaN , str2 = ''
        var num5 = null, str3 = 'undefined'
        var bo1 = true, bo2 = false
        // 1. + 运算,用于进行加法运算
        console.log(num1+num2) // 3
        console.log(num1+str1) // 11
        console.log(num1+num4) // NaN
        console.log(num1+num3) // NaN
        console.log(num1+bo1)  // 2
        console.log(num1+bo2)  // 1  
        console.log(num1+num5)  // 1

        console.log(str1+str2) // 1 
        console.log(str1+str3) // 1undefined
        console.log(str1+bo1)  // 1true
        console.log(str1+bo2)  // 1false
        console.log(str1+num3) // 1undefined
        console.log(str1+num5) // 1null

        console.log(bo1+bo2) // 1
        console.log(bo1+num5) // 1

        // 2. - 运算,用于进行减法运算
        console.log(num1-num2) // -1
        console.log(num1-bo1)  // 0
        console.log(str1-str3) // NaN
        console.log(str1-bo1)  // 0

        // 3. * 运算,用于进行乘法运算
        console.log(num1*num2) // 2
        console.log(str1*str3) // NaN
        console.log(str1*bo1)  // 1

        // 4. / 运算,用于进行除法运算
        console.log(num2/num1) // 2
        console.log(str1/str3) // NaN
        console.log(str1/bo1)  // 1

        // 5. % 运算,用于进行取余数运算
        var num6 = 7
        console.log(num2%num1) // 0
        console.log(str1%str3) // NaN
        console.log(num6%num2)  // 1

• 为什么会出现以上情况
  • 当加法遇到字符串，只要一侧有字符串，另一侧会自动转换成字符串，然后进行拼接；
  • 其他的运算都会先将左右的数据转换成数值(这里的转换是js自动使用Number方法进行转换，不再进行赘述)然后进行数学运算。

熟练掌握数据类型转换，记住'+'运算只有在遇到字符串才会转string，其余均通过Number()方法转换之后在进行数学运算

2.2 比较运算符

该运算符主要用于条件判断，其表达式返回一个布尔值

        var num1 = 10, num2 = 20, num3 = 10
        var str1 = '10', str2 = '20'
        console.log(num1 > num2)  //false 
        console.log(num1 < num2)  //true
        
        console.log(num1 >= num2)  //false 
        console.log(num1 <= num3)  //true

        console.log(num1 == str1)  //true 
        console.log(num1 === str1)  //false

        console.log(num1 != str1)  //false 
        console.log(num1 !== str1)  //true

• 注意以下两点即可
  • <=, >= 表示的是大于 或者 等于
  • == ， === 区别在于前一个只对于值进行比较，后一个对于值和类型都进行比较
  • != , !== 区别同上

2.3 赋值运算符

用于对变量赋值

        // = , 赋值
        var num1 = 1, num2 = 2 , num3 = 9
        // += -= /=  %=  均先进行数学运算在进行赋值
        console.log(num1+=num2)  // 等同于 num1 = num1+num2
        console.log(num1-=num2)  // 等同于 num1 = num1-num2
        console.log(num3%=num2)  // 等同于 num3 = num3%num2
        console.log(num3/=num2)  // 等同于 num3 = num1/num2

思考一下这里的输出结果是多少？

2.4 逻辑运算符

用于判断时进行多条件的连接

符号	效果
&&	条件均为真才返回true
||	条件有一个为真返回true
！	对条件取反

根据上表以及2.2小节思考多条件连接的打印结果

	    var a = 11>10    
        // 取反   
        console.log(!a) 
        // 多条件连接
        console.log(14>10 && 20>5 && 2=='2')
        console.log(14>10 && 20>5 && 2==='2')
        console.log(14>10 && 20>5 || 2=='2')
        console.log(14>10 && 20>5 || 2=='2')
        // 逻辑短路问题
        14>11 && alert('我执行了吗？')
        10>11 && alert('我执行了吗？')
        14>11 || alert('我执行了吗？')
        10>11 || alert('我执行了吗？')

逻辑短路问题

	在js中，存在逻辑短路问题。
	代码从左向右执行
	- 当遇到&&连接的左侧条件为假，js会判断此语句后面写啥都改变不了判断的结果，此时产生短路&&右侧的代码均不执行
	- 当遇到||连接的左侧条件为真，js会判断此语句后面写啥都改变不了判断的结果，此时产生短路||右侧的代码均不执行

2.5 一元运算符

        var num1 = 1, num2 = 2
        console.log(num1++)  //1
        console.log(num1)    //2
        console.log(++num2)  //3

一元运算符分为前置、后置。

• 当运算符在前面，为前置运算符，作用为不管此变量进行运算，输出等操作先执行前置运算。
• 当运算符在后面，为后置运算符，作用为不管此变量进行运算，输出等操作先使用原来值，然后进行后置运算。

2.6 三元运算符

用法：条件？ 结果1：结果2

	    //  当条件满足执行结果1, 不满足执行结果2
        console.log(10>5?'结果1':'结果2')
        console.log(10<5?'结果1':'结果2')

对于三元运算符后续会进行更加详细的说明