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')
对于三元运算符后续会进行更加详细的说明
