三、JavaScript运算符

三 运算符

JavaScript运算的符号就是运算符。

3.1 算数运算符

3.1.1 算数运算符

+：加法运算符

-：减法运算符

*：乘法运算符

/：除法运算符（是真的除法，就是精度一言难尽）

% ：模运算 （相除取余数）

**：幂运算

let a = 1+1 
console.log("1+1=",a);
a = 10/5
console.log("10/5=",a);
a = 10/3
console.log("10/3=",a);
a = 10 / 0
console.log("10 / 0=",a);
a = 10 ** 4
console.log("10 ** 4=",a);
a = 9 ** .5
console.log("9 ** .5=",a);
a = 10 % 2
console.log("10 % 2=",a);
a = 10 % 3
console.log("10 % 3=",a);
a = 10 % 4
console.log("10 % 4=",a);
/**
运行结果：
1+1= 2
10/5= 2
10/3= 3.3333333333333335
10 / 0= Infinity
10 ** 4= 10000  --- 10的四次方
9 ** .5= 3  --- 9开根号
10 % 2= 0 --- 取余数
10 % 3= 1
10 % 4= 2
*/

3.1.2 自动类型转换

两种不同的数据类型进行算术运算时会自动进行类型转换来完成运算

let a;
a = 10 - '5'
console.log("10 - '5'=",a); // 10 - '5'= 5
a = 10 + true
console.log("10 + true=",a); // 10 + true= 11
a = 5 + null
console.log("5 + null=",a); // 5 + null= 5
a = 6 - undefined
console.log("6 - undefined=",a); // 6 - undefined= NaN
console.log(true + true + true); // 3

当任意一个值和字符串做加法运算时，它会先将其他值转换为字符串，然后再做拼串的操作

可以利用这一特点来完成类型转换

可以通过为任意类型 + 一个空串的形式来将其转换为字符串

其原理和String()函数相同，但使用起来更加简洁

let a = 100+''
console.log(a,typeof a); // 100 string
console.log('Hello'+','+'world'); // Hello,world

3.2 赋值运算符

赋值运算符用来将一个值赋值给一个变量

=：将符号右侧的值赋值给左侧的变量

??=：空赋值，只有当变量的值为null或undefined时才会生效

+=：a += n 等价于 a = a + n

-=：a -= n 等价于 a = a - n

*=：a *= n 等价于 a = a * n

/=：a /= n 等价于 a = a / n

%=：a %= n 等价于 a = a % n

**=：a **= n 等价于 a = a ** n

3.3 一元±运算符

+正号，不会改变数值的符号

-负号，可以对数值进行符号位取反

当我们对非数值类型进行正负运算时，会先将其转换为数值然后再运算

+“1” 可以转换成 1

let a = -10
console.log(a); // -10 
a = -a
console.log(a); // 10
let b = "123"
b = +b
console.log(b,typeof b); // 123 number

3.4 自增和自减

自增运算符++，使用后会使得原来的变量立刻增加1

自增分为前自增（++a）和后自增（a++）

无论是++a还是a++都会是原变量立刻增加1

不同的是返回值不同

a++的返回值是自增前的值 旧值

++a是自增后的值 新值

---

自减运算符--，使用后会使得原来的变量立刻减小1

自减分为前自减（–a）和后自减（a–）

无论是–a还是a–都会是原变量立刻减小1

不同的是返回值不同

a–的返回值是自减前的值 旧值

–a是自减后的值 新值

3.5 逻辑运算符

3.5.1 逻辑非

! 可以用来对一个值进行非运算。它可以对一个布尔值进行取反操作。

​ true 变 false

​ false 变 true

如果对一个非布尔值进行取反，它会先将其转换为布尔值然后再取反可以利用这个特点将其他类型转换为布尔值

console.log(!!"1"); // true

总个结

1. 转换为字符串

   • 显式转换 String()

   • 隐式转换 + “”

a = 100+"" // 隐式转换
console.log(a,typeof a); // 100 string  

2. 转换为数值
   • 显示转换Number()
   • 隐式转换

let a = +"100" // 隐式转换
console.log(a,typeof a); // 100 number  

3. 转换为布尔值

   • 显式转换 Boolean()

   • 隐式转换!!

a = !!100+"" // 隐式转换
console.log(a,typeof a); // true string

3.5.2 逻辑与

&& 逻辑与

可以对两个值进行与运算

与运算的规则如下：

1. 当&&左右都为true时，则返回true，否则返回false

2. 短路与：如果第一个值为false，则不看第二个值；

3. 与运算是找false的，如果找到false则直接返回，没有false才会返回true

console.log(false && false); // false
console.log(true && false); // false
console.log(true && true); // true

4. 对于非布尔值进行与运算，它会转换为布尔值然后运算，但是最终会返回原值；

let a = 1&&100
console.log(a);

上述代码你以为是返回true？No，他返回100

5. 如果第一个值为false，则直接返回第一个值；如果第一个值为true，则返回第二个值；

let a = null&&100
console.log(a); // null不是false

3.5.3 逻辑或

可以对两个值进行或运算；

1. 当||左右有true时，则返回true，否则返回false；

2. 或运算也是短路的或，如果第一个值为true，则不看第二个值；

3. 或运算是找true，如果找到true则直接返回，没有true才会返回false；

4. 对于非布尔值或运算，它会转换为布尔值然后运算，但是最终会返回原值；

5. 如果第一个值为true，则返回第一个，如果第一个值为false，则返回第二个；

let a = 20||30
console.log(a); // 20

3.6 关系运算符

关系运算符用来检查两个值之间的关系是否成立，成立返回true，不成立返回false

>用来检查左值是否大于右值

>=用来检查左值是否大于或者等于右值

<用来检查左值是否小于右值

<=用来检查左值是否小于或者等于右值

注意：

当对非数值进行关系运算时，他会先将前转换为数值然后再比较

当关系运算符的两端是两个字符串时，他会逐位比较字符的unicode编码，利用此特性可以对字符串按照字母排序；同时注意比较两个字符串格式的数字时一定要进行类型转换

3.7 相等运算符

== 用来比较两个值是否相等

使用相等运算符比较两个不同类型的值时，它会将其转换为相同的类型（通常转换为数值）然后再比较，类型转换后值相同也会返回true（这一点与===不同）

null和undefined进行相等比较时会返回true

console.log(null == undefined); // true

NaN不和任何值相等，包括它自身

!= 不等，用来检查两个值是否不相等，会自动地进行类型转换

console.log(1!='2'); // true
console.log(1!='1'); // false

3.8 全等运算符

用来比较两个值是否全等

它不会进行自动的类型转换，如果两个值的类型不同直接返回false

null和undefined进行全等比较时会返回false

console.log(null === undefined); // false

NaN不和任何值相等，包括它自身

!== 不全等,比较两个值是否不全等，不会自动进行类型转换

3.8 条件运算符(唯一的三元运算符？)

条件运算符

条件表达式 ? 表达式1 : 表达式2

执行顺序：

条件运算符在执行时，会先对条件表达式进行求值判断，

如果结果为true，则执行表达式1

如果结果为false，则执行表达式2

let a = 10
console.log(a>5?"a大于五":"a小于等于5"); // a大于5

3.9 运算符的优先级

和数学一样，JS中的运算符也有优先级，比如先乘除和加减。

可以通过优先级的表格来查询运算符的优先级

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

在表格中位置越靠上的优先级越高，优先级越高越先执行，优先级一样自左向右执行

优先级我们不需要记忆，甚至表格都不需要看因为()拥有最高的优先级，使用运算符时，如果遇到拿不准的，可以直接通过()来改变优先级即可