js中的运算符

认识运算符

什么是运算符？

运算符是用于执行程序代码运算，会针对一个以上操作数项目来进行运算。

运算符的应用:

购物车：计算总价，数量；

Js中有哪些运算符？

算术运算符、赋值运算符、关系运算符、逻辑运算符、三元运算符

如何理解运算符

算数的个数：一元、二元、三元
1.如果操作数只有一个，称之为一元运算符，或者单目运算符。
2.如果操作数有两个，称之为二元运算符，或者双目运算符，这是最多的
3.如果操作数有三个，称之为三元运算符，或者三目运算符，在js中，只有一个?:

例子：
var a = 10;
var b = 10;
a++; //一元
a + b; //二元
a ? 1 : 0 ; //三元

算术运算符：

二元运算符：+、-、*、/ ：加减乘除 %：取模，取余。

---

一元运算符：++、–：自增，自减

1. +两个功能：1.拼接 2.相加

规律：
1）如果 + 有一端是字符串，那么一定是字符串的拼接；
2)如果两端都没有字符串，那么将两端内容转为数字进行相加；

console.log(1+2); //5 相加
console.log('2'+2); // '23' 拼接
console.log('1' + '2'); //'12' 拼接
console.log(null + true); //1 相加  number(null) = 0    number(true) = 1    0+1 
console.log(false + undefined);// NaN 相加 number(false) =0  number(undefined) = NaN   0+NaN

2. - * / % 先对操作数进行隐式转换，转换为number，再进行运

console.log(null - true); // 0-1 = -1
console.log(true - 2);// 1- 2 = -1
console.log('23' - 2);//number('23') = 23-2 =21
console.log( "2"  * 2);//2 *3 =6
console.log(3/ 2);//1.5
console.log(3 % 2);//1
console.log(2 % 3);//2 小数 % 大数 = 小数  大数 % 小数 = 余数

**

3.一元运算符 ++ –

**

1.‘++’，表示自增
1.首先，看一个需求，需要将某一个数加1，然后赋值给其它的地方使用：
需要将a的值加一，然后赋值给b

> var a =10;
var b;
b = a +1;
console.log(b)//11

在js编程中，有太多类似的需求，所以js提供了一个++的运算符，专门用来实现+1的操作。如下：
var a = 5;
var c ;
c = ++a; //变量a进行加1；  把值赋给c
console.log(c);//6
console.log(a);//6

我们发现：
对于++而言，它只需要一个操作数，所以它是一元（单目）运算符。
实际上，++并没有这么简单：
1.var a=5;
var b;
b=a+1;
console.log(b);//6
console. log(a);//5

2.var a = 5;
var c;
c = ++a; //变量a进行加1;  把值赋给c
console.1og(c); //6
console.log(a) ;//6
自增，它的本意是将当前变量的值增加1，但是，它又额外的做了一件事情，它将加1之后的结果，又重复赋值给当前变量。所以说，++它是有副作用的，副作用就是重新赋值。

对于++，它又分为两种用法：
1.前加，比如++a
2.后加，比如a++
var a = 5;
var c;
c = ++a;//变量a进行加1，把值赋给c
console.log(c);//6
console.log(a)//6

var b = 5；
var d；
d = b++;//先b的原值拿到赋给d，然后对b进行 ++；
console.log(d)//5
console.log(b)//6
前加和后加的区别：
共同点：作用都生效了，当前变量的值已经发生变化
不同点：
	++a先返回递增之后的a的值
	a++先返回a的原值，再返回递增之后的值
可以这么记：前加，类似于先斩后奏，也就是将自增之后的值立马用上。
而后加有点神经大条，反应迟钝，整个表达式的值还是自增之前的那个值。

2.'--', 表示自减
与++类似，--有相同的用法：
前减：--a
后减：a--
var m = 10;
var n;
var l
n = --m;
console.log(m)// 9
console.log(n)//9
            
l = m --;
console.log(m) //8
console.log(l) //9

在实际开发中，++和--，使用非常普遍。尤其是在循环操作的时候。
说明：
++  -- 都会将值先隐式转为number，再进行自增自减

赋值运算符

首先，在js中，=表示赋值。
大家在读代码，尽量读成赋值操作，不要读成等于操作。
//声明一个变量a，将10赋值给a
var a = 10;
注意：=不是等于，而是赋值，真正的等于是==。
赋值运算符是一个二元运算符，需要两个操作数参与。
赋值运算符的优先级，非常低，基本上就是最低的。只比 ‘,’ 高

注意点：
=的优先级比较低
=和==的区别
//=是赋值。==是进行比较
+=可以用于数字或字符串，视情况而定
一个等号表示赋值，
两个等号才表示相对，
将赋值运算符=和算术运算符+、-、*、/、%结合到一起，可以形成复合的赋值运算符。如下：
//让a的值增加20，然后在赋值给在自己

//原来的写法
a = a+20;
console.log(a); //30

//将上面的写法进行简化
a += 20 //50
console.log(a);

// -=
a -= 20;//相当于 a = a -20;
console.log(a);
特点：在赋值运算符的左边和右边，出现了同一个变量，然后进行的是+、-、*、/、%的操作，那么就可以使用复合赋值运算符。

关系运算符

关系运算符 用来进行比较的。比较的结果通常是布尔值真和假。
==：相等，只比较值是否相等
=：全等，比较值的同时比较数据类型是否相等
！=：不相等，比较值是否不相等
！：不全等，比较值的同时比较数据类型是否不相等
返回值：boolean型

相等运算符，使用两个=表示。
要判断的是两个变量的值，是否相等，如果相等，返回真，否则返回假。
var a = 10;
var b = 10;
var c = 15;
console.log(a === b);true
console.log(a === c);false

在使用==的时候，是不要考虑类型的，只要两个变量的值是相等，结果就相等。
var a = 10;
var b = 10;
var c = 15;
var d = '10';
console.log(typeof(a));//number
console.log(typeof(d));//string
console.log(a === b); //true
//console.log(a === b);true
//console.log(a === c);false
如果我的需求是，既要保证值相等，还要保证变量的类型也是相等的，js为我们提供了一个绝对等于的运算符 ===
var a = 10;
var b = 10;
var c = 15;
var d = '10';
console.log(typeof(a));//numnber
console.log(typeof(d));//string
console.log(a == d);//true
console.log(a === d);//false

'注意：'
=、==和===之间的区别。
=表示赋值，==表示判断值是否相等，===表示判断绝对相等（值和类型）。
var x = 100;

!= 和 !==区别

!= 是 == 的反操作， ！== 是 === 的反操作
//!= 和 !==
var m = 10;
var n = 20;
var l = '10';
console.log(m != n);//true
console.log(m !== l); //true

在实际开发的时候，==、===和！=使用比较多。!==使用比较少。

比较的符号
>， >=， <， <=
和数学中的比较是一样的。
var m = 10;
var n = 20;
var l = '10';
console.log(m > n)//false
console.log(m <= n)//true

## 关系运算符的转换规则：

1）全等运算符的规则：比较值同时比较类型
console.log(3 === 3);//true
console.log('3' === 3)//false 值是3 但是类型不同
console.log(NaN === NaN) //false

2）> < >=  <=   ==   !=
	2-1、；一般情况下，进行比较时，都隐式转为number,然后进行比较;
	console.1og("4">3): //true Mumber ("4")->4 >3
	console. log ( true < nu1l) ://false Number(true)= ==>1 Number (null)===>0  1<0
	console. log (mu11<= 0) ://true Number (nu1l)===>0 0<=0
	console. log("3" == 3) ://true Number ("3")===>3
	console. log (true==1) ://true 1==1
	console. log (true == "true") ://false Number (true)===>1 Number ("true")===>MaN  1==NaN

	2-2、在相等运算符里，如果一端是null和undefined，不转换，直接比较。
    即 null只有和undfined进行相等比较时为true,和其他任意内容进行比较都为false;
	console.log(false == null)//false
	console.log(null == undefined)//true
	console.log(null ==0) //false
	console.log(null >= 0) //true number(null) ===>0 0>=0

	2-3、比较运算符两端都是字符串时；按照字符串的方式进行比较
    console.log('23' > '5');//false  
	console.log('10' > '1'); //true
	console.log('23' < '25');//true
	注意：如果两端都是字符串的时候，在长度一致的时候比较数值大小，长度不一致先比较一位的大小,然后在依次比较。

逻辑运算符

在js中， 有如下三个逻辑运算符：
&& 与 || 或 ！ 非，取反
⚠️注意：假值：0 ，NaN，“”，null，undefined

&& 与号符

逻辑与操作，表示"并且"的意思，AND，表示只有当两个或多个条件都同时满足的情况下，结果才为真。以两个变量的操作为例，进行说明
var a = true;
var b = true;
console.log(a && b);

注意："逻辑与"找假值;

运算规则如下：

表达式1	表达式2	结果
true	true	true
true	false	false
false	true	false
false	false	false

逻辑与总结：

逻辑与找假值；遇到假值就停下来，返回这个假的值；如果没有假值，则返回最后一个值；
console.log(3 && null); //null
console.log(0 && 5);//0
console.log(true && 5);//5

console.log(!0 && undefined && 5);//undefined
console.log(!3 && null && true);//false

---

|| 或号符

逻辑或，"或者"的意思，“or”。
注意： "逻辑或"找真值;
对于多个条件，只要有一个满足条件，结果就为真，只有所有的条件都为假的时候，结果才为假。以两个操作数为例进行说明

表达式1	表达式2	结果
true	true	true
true	false	true
false	true	true
false	false	false

逻辑非总结

// ||的操作符
var m = false;
var n = false;
console.log(m || n);
总结：
逻辑或找真值，如果遇到第一个真值，就将这个值返回，如果没有找到真值，返回最后一个；
console.log(true || false) //true
console.log(3 || 0)//3 
console.log(null || 5) //5
console.log(true || 0)//true

---

!非号符

逻辑非，取反操作，not ！
是一个一元运算符（单目）， 只有一个操作数。

规则如下：

表达式	结果
true	false
false	true

逻辑非总结：

var p = true
var q = false
console.log(!p);//false
console.log(!q);//true
一元运算符的优先级要比二元和三元的都要高。

说明：
运算符规则：先将值隐式转为布尔类型，再取反；
返回值：返回值一定是布尔类型
console.log(!true)//false
console.log(!3)//false Boolean(3) ==>true
console.log(!null) //true Boolean(null) ==>false
console.log(!!3); //true  表示取反在取反 先对3转成true，取反为false在取反为true

关于短路运算的说明：
在&&和||运算时，如果第一个表达式的值就已经能够确定整个运算的结果，那么第二个表达式将不会执行。（类比于日常生活中的比赛，5局三胜，已经胜了三局，后面的比赛将不再进行）。

注意：可以需要先算&&在算||

三元运算符

在js中，有且仅有一个三元运算符，就是?:
格式：表达式1 ？表达式2：表达式3
运算规则：如果表达式1的值为真，那么结果就是表达式2，否则结果就是表达式3。

var a = false;
var b = a ? 'yes' : ' no';
console.log(b);//no

var arr = 59;
var str = arr >= 60 ? "万岁" : "受罪"；
console.log(str);

三元运算符，能够简化我们的代码，实际上相当于if...else语句。
？：的优先级比较低。 

## 本个文章总结：
1.=== 、!== 再进行比较时，不转换直接比较
2.> 、<、>=、<= 、== 、!= 一般情况下转number再比较，注意特殊情况null在相等比较时， null==undefined 为true;与其他任意值相等比较都为false
3. && 与找假 ； || 或找真， ! 非先转布尔再取返；
4.条件 ？ 表达式1 ： 表达式2；  条件为真时执行表达式1，为假执行表达式2

附加：
优先级：