JS之运算符

JS之运算符

类型	运算符
算术运算符	+	-	/	%	++	--
赋值运算符	=
比较运算符	>	<	>=	<=	==	!=
逻辑运算符	&&	||	!

1.算术运算符：

1.加运算（+）

在进行加运算的时候，数字和非数字的字符进行相加惊喜拼接，并且转换成string类型；

      let a = 2;
      let b = '1';
      let c = a + b;
      console.log('加运算+', typeof c, c) // => string 21

可以看出打印出来的类型转换成了string类型；

2.减运算 (-)

减运算在数字和非数字进行运算的时候如果是文字那么就会返回NaN,如果是纯数字的字符串的时候那么他就会进行隐性类型转换；

      let a = 2;
      let b = '哈哈哈';
      let c = a - b;
      console.log('减运算+', typeof c, c) // => number NaN

类型没有转换，但结果变成NaN

      let a = 12;
      let b = '6';
      let c = a - b;
      console.log(typeof c, c) // => number 6

减运算/加运算/与布尔值进行运算：

      let a = 12;
      let b = false;
      let c = a - b;
      console.log(typeof c, c) // => number 12

      let a = 12;
      let b = true;
      let c = a - b;
      console.log(typeof c, c) // => number 11

      let a = 12;
      let b = true;
      let c = a + b;
      console.log(typeof c, c) // => number 12

      let a = 12;
      let b = false;
      let c = a + b;
      console.log(typeof c, c) // => number 12

      let a = 12;
      let b = false;
      let c = a / b;
      console.log(typeof c, c) // => number Infinity

      let a = 12;
      let b = true;
      let c = a / b;
      console.log(typeof c, c) // => number 12

      let a = 12;
      let b = false;
      let c = a * b;
      console.log(typeof c, c) // => number 0

      let a = 12;
      let b = true;
      let c = a * b;
      console.log(typeof c, c) // => number 12

可以看出 在进行运算的时候 布尔值 true 与 fasle 转换成了1与0 ，因为在布尔值 1代表true 0代表 false；

同时再除的时候0不能做除数；

3.取余(%)

取余又叫取模；顾名思义就是去数值的余数；

      let a = 12;
      let b = 5;
      let c = a % b;
      console.log(typeof c, c) // => number 2

在开发过程中：给标签动态赋类名等

<div v-for="(item,index) in 5" :class="{'item':(index%2 == 1)}">{{item}}</div>

4.自增/自减 (++ --)

自增分为前自增和后自增

a++ 的值等于原值 即a  （先运算后自增）

++a 的值等于新值 即a+1 （先自增后运算）

      let a = 6;
      let b = 1 + a++;
      console.log(b);// => 7

      let a = 6;
      let b = 1 + ++a;
      console.log(b);// => 8

      let a = 6;
      a+=1;
      console.log(a);// => 7

在代码中 a+=1 可以看成 a = a+1;

5.赋值(=)

在前端代码中 = 不再是等于；而是赋值  把 = 符号右边的值赋给左边；

      let a = 6;
      let b;
      b = a;
      console.log(b);// => 6

 

6. 等于 ( ==  ===)

== 只做值的判断，不做类型判断

=== 全等于 值和类型必须完全一样

      let a = 5;
      let b = '';
      if (a == '5') {
        b = 1;
      } else {
        b = 0;
      }
      console.log(b) // => 1

      let a = 5;
      let b = '';
      if (a === '5') {
        b = 1;
      } else {
        b = 0;
      }
      console.log(b) // => 0

==的比较看似比较方便，比如1==‘1’，但是会埋下隐患，列：

      let a = '10';
      if (a == 10) {
        a += 10;
        console.log(a) // => 1010
      }

如上图所示 当我们需要用这个值用来运算的时候字符串与数字相加就会出现拼接

7. 不等于(!=，！==)

此运算符主要

注意:  

== 和 != 比较若类型不同，先偿试转换类型，再作值比较，最后返回值比较结果 

而 === 和 !== 只有在相同类型下,才会比较其值

      let a = 1;
      let b = '1';
      let c = 1;
      console.log(a !== c); // => false 相同类型　相同值,　非运算肯定是false
      console.log(a != b); // => false 相同类型　相同值,　非运算肯定是false
      console.log(a !== b); // => true 不同类型　相同值,　非运算肯定是true

从上方代码可以看出 ：

a与c 都是相同的类型而且值也相同 那么判断a与c不相等吗？

8. 且 或 非 （&& || ！）

&& 且 当我们用&& 来判断的时候必须都要满足条件

      let a = 1;
      let b = 2;
      let c = 1;
      if (a == 1 && b == 3) {
        c = 10;
      }
      console.log(c) // => 1

      let a = 1;
      let b = 2;
      let c = 1;
      if (a == 1 && b == 2) {
        c = 10;
      }
      console.log(c) // => 10

从上方代码中可以看出 打印出来的为1 并没有进入判断；

即&&的特性为 必须 a与b都要满足条件才可；

|| 或 只需满足一个条件即可

      let a = 1;
      let b = 2;
      let c = 1;
      if (a == 1 || b == 5) {
        c = 10;
      }
      console.log(c) // => 10

通常我们用或运算来判断执行那个条件

 

！非  取反 

      let a = !true;
      console.log(a) // => false


      let a = !false;
      console.log(a) // => true