JavaScript—运算符

2023-12-21

548

原创

JS运算符可根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符

赋值运算符

简化代码
对变量进行赋值的运算符
- 已学过的赋值运算符：= 把右边的值赋给左边，左边必须是个容器

其他赋值运算符：累加+= -= *= /= %=

// 采取赋值运算符
let num = 10
// num += 10就是num = num+10
//num += 5 //累加
num *= 5
console.log(num) // 15,50

一元运算符（重点）

只需一个表达式就能运算即作用于一个操作数

++ -- ！ 为一元运算符

补充：逻辑非运算!是布尔取反操作，直接放在操作数之前，把操作数的值转换为布尔值，然后取反并返回

console.log( ! {} ); //如果操作数是对象，则返回false
console.log( ! 0 ); //如果操作数是0，则返回true
console.log( ! (n = 5)); //如果操作数是非零的任何数字，则返回false
console.log( ! null ); //如果操作数是null，则返回true
console.log( ! NaN ); //如果操作数是NaN，则返回true

分别为自增运算符++和自减运算符--
目的：使用一元运算符做自增运算符
问题：
- 以前让一个变量+1，我们通常是以下做法：
```
let num = 1
//num = num + 1
num += 1
```

自增运算符（计数）

经常用于计数，计算多少次
++ 让变量的值+1（常用）
分为前置和后置自增， ++只能每次+1，作用等同于 num += 1

前置自增

++在前先自加（运算过程中）

//let i = 1
//++i 
//console.log(i) // 把num的值加1 变2

let i = 1
console.log(++i + 1) //3,先自加得到2,再2+1

后置自增（常用）

实际开发中，一般都是单独使用，后置++，语义化更好理解，常用
++在后后加，运算时属于难点

i++ 把i执行完后的值给表达式运算，最后再自加

//let i = 1
//i++ 
//console.log(i) // 2，i++单独使用，已经执行完，所以i++是2

let i = 1
console.log(i++ + 3) // 4，此时i是1，先和3相加，先运算输出完毕后，i再自加

前置自增与后置自增的区别

两者单独使用 没区别，作用等同于 num += 1
两者参与运算 有区别，（难点。了解即可）
前置先自加，++在前先自加
后置后再加，++在后后自加

自减运算符

自减运算符： -- 让变量的值-1
自增自减经常用于计数来使用。比如进行10次操作，用它计算多少次了
使用方法同自增

注：当变量是数字字符串，使用自增自减会隐式转换为数字

二元运算符（算数运算符）

需要两个数进行操作的都是二元运算符

例如：加减乘除余

//就是表达式的个数10和20，需要两个数才能相加运算 
let num = 10 + 20
let num = 10 * 10
let num = 40 / 20
let num = 10 % 10

比较运算符（关系运算符）

大小比较运算符：

大于符号>：左边是否大于右边
小于符号<: 左边是否小于右边
大于等于>=: 左边是否大于或等于右边
小于等于<=: 左边是否小于或等于右边

相等比较运算符：

==: 左右两边值是否相等
===: 左右两边是否类型和值都相等（强烈使用）
！==：左右两边是否不全等（强烈使用）
！=：左右两边是否不等
比较结果为boolean类型，即只会得到true/false
当变量是数字字符串，使用比较运算会隐式转换为数字

注：

如果是数字和“其他值”比较，则其他值会自动转换成数字去比较

涉及到“NaN”都是false

如果是“字符串”和“字符串“比较，则会比较每一个字符的ASII码

如果布尔值参与比较，布尔值会转成熟悉0和1

对比：

= 单等是赋值
==是判断（只判断值）

===是全等（判断值和数据类型）（用的多）

   console.log(3 > 5) //true
   console.log(3 >= 5) //false
   console.log(3 == 3) //true
   console.log(2 == '2') //true 
	console.log(2 === '2') //false
 	console.log(NaN === NaN) //false
 	console.log(2 ！==2) //true

注：

开发中判断是否相等，强烈推荐全等=== 或**！==** ,只要是判断就用全等

尽量不比较小数，小数有精度问题（但开发中离不开小数，如0.1+0.2=0.300000000004应该写成0.1*10+0.2 *10=3，3/10=0.3)

字符串比较，是比较字符对应的ASCII码（了解）
中文字根据拼音字母相比较，从左往右依次比较

//a的ASCII码是97，b的ASCII码是98
console.log('a' < 'b') //true
// 第一个相等再找第二个，a与b相比
console.log('aa' < 'ab') //true
// 第一个第二个相比都相等，第三个只有c，所以aac大
console.log('aa' < 'aac') //true

逻辑运算符

解决多重条件判断
例如：变量num是否大于5且小于10
- 正确写法： num>5 && num<10
符号：
- && 逻辑与并且符号两边都为true，结果才为true，一假则假
  - &&两边值同为真时取后值
```
console.log(99 && 33) //33
```
- || 逻辑或或者符号两边有一个true，就为true，一真则真
  - ||两边值同为真时取前值
```
console.log(44 || 33) //44
```
  - ||两边值同为假时取后值
```
console.log(0 || 33) //0
```
- ！逻辑非取反 true变false，false变true，真变假，假变真
```
//逻辑与 一假则假
console.log(true && true) //true
console.log(false && true) //false
console.log(3 < 5 && 3 > 2) //true
console.log(3 < 5 && 3 < 2) //false
```

知识点补充-逻辑中断（常用）

开发中，还会见到以下写法：

function getSum(x, y) {
  x = x || 0
  y = y || 0 
  // x,y未赋值为undefined，当假看，遇到||两边同为假 取后面值
  console.log(x + y)
}
getSum(1, 2)


function getSum(x = 0, y = 0) {
  console.log(x + y)
}
getSum()

若调用不传参，x,y为undefined得到结果为NaN，所以形参得用默认值，而逻辑中断不需要给形参设置默认值

逻辑运算符里的短路

短路：只存在于&&和||中，当满足一定条件会让右边代码不执行
原因：通过左边能得到整个式子的结果，因此没必要再判断右边
```
console.log(false && 3 + 5) // false

console.log(11 || age++) // 11
```
1. 逻辑中断 && 一假则假，代码执行时先看左边，若发现有false，直接略过右边
2. 逻辑中断 || 一真则真，代码执行时先看左边，若发现有true，直接略过右边
运算结果: 无论&&还是||，结果都是最后被执行的表达式，一般用在变量赋值