前端充电站:重温JS常用运算符

316 阅读4分钟

加法运算符

规则一:如果加号两侧的操作数有其中任何一个是字符串(String)类型的,这时候 + 起到的是字符串拼接作用

alert('1' + String(10));   //110

规则二:如果左右两侧的操作数都是数值,那么作为正常的加法进行运算

alert(1+2);  //3

规则三:如果其中一个操作数是NaN,那么结果就是NaN;
alert(NaN + 2); //NaN
alert(1 + Number(undefined)) //1+NaN=NaN
alert(1 + Number(null)); // 1 + 0 = 1
alert(1 + Number(true)); // 1 + 1 = 2
alert(1 + Number(false)); // 1 + 0 = 1

实例:
var result = '1' + 2 + 3; // 15 是错误的答案
alert(result);  //123


  • 个人的记忆方法:
  • 先判断加号两侧是否存在字符串类型,如果其中一个是字符串类型,那么肯定会发生字符串拼接。
  • 再判断加号两侧是否都是数值,如果都是数值类型,那么肯定是正常的加法运算。
  • 最后判断加号两侧是否有出现null/undefined/true/false,如果有,会先发生Number类型转换。

减法运算符

规则一:如果左右两侧的操作数,都是数值的话,正常进行减法计算

alert(10 - 5);    //5
alert(10 - (-6)); //16


规则二:如果任何一个操作数,是NaN,那么结果就是NaN;
alert(10 -NaN) //NaN

规则三:左右任何一侧不为Number类型的情况,会调用Number进行转换,将其转为Number类型之后,再进行计算。

alert(typeof(null - '10'));  //number
alert(Number(null) - Number('10')); // 0 - 10 = -10

乘法操作符

规则一:左右为数值,进行正常的乘法运算
alert(2 * 3); //6

规则二:任何一侧为NaN,则结果返回NaN;
alert(NaN * 3); //NaN
alert(undefined * 3) //NaN

规则二:如果有一侧不是Number类型的,则(根据对应规则)转为数字类型后,再进行计算。
alert(Number(undefined)) // NaN
alert(Number(null))  //0

除法操作符

规则一:左右两侧均为数值,正常进行除法计算
alert(6 / 3 );

alert(10 / 0); // infinity    !!!特殊

规则二:如果任何一侧为NaN,则结果返回NaN
alert(NaN / 3);

alert(0 / 0); // NaN    !!!特殊

规则三:有任何一侧不是Number类型,则(根据对应的规则)转成数字类型后,再进行计算。
 alert(true / 2); //  0.5

取模操作符

规则一:如果左右两侧均是数值,则进行除法计算,结果返回余数
alert(367 % 15); // 7

规则二:只要除数是0,则结果返回NaN
alert(10 % 0); //NaN
alert(0 % 0);  //NaN

仔细对比!!!
alert(10 / 0) //infinity

规则三: 如果有一侧不为Number类型,则(根据对应的规则)转为数字类型后,再进行计算
 alert(true % 15);  //1

一元运算符

规则一:如果操作数是Number类型,并且是个数值,那么这个运算符对我们并不会产生任何的影响。
alert(5)  //5
alert(+5) //5
alert(typeof(5))  /number
alert(typeof(+5)) //number

规则二:不论是正号还是负号,对NaN都是不会产生任何影响的
alert(+undefined)  //NaN
alert(-undefined); //NaN
alert(-NaN); //NaN

规则三: 如果是其他类型,会经过Number发生隐式类型转换,
然后变成一个  !!!数字类型!!!
alert(typeof -'1');  //number
alert( -'1');  //-1
alert(typeof -true);   //number

实例:
var a=10
var b=10
var c='10'

var result = a + b
var result1 = a + '' +b
var result2 = c + b
var result3=  (+c) +a

console.log(result)  //20
console.log(result1) //1010
console.log(result2) //1010
console.log(result3) //20

递增/递减运算符

实例一:
var num1 = 0;
var num2 = 0;

++num1;
num2++;

alert(num1); //1
alert(num2); //1

--------------------------

实例二:
var result1 = ++num1 + 2; //   3
var result2 = num2++ + 2; //   2

console.log(num2);
console.log(result1,result2);

赋值运算符

var num1 = 0;

num1 = num1 + 10;
num1 += 10;

num1 = num1 - 10;
num1 -= 10;
---------------------------

var num = 10;
num = num % 5;
num %= 5;
-------------------------
       
var num = 10;
num = num / 5;
num /= 5;

---------------------

var num = 10;
num = num * 5;
num *= 5;

比较运算符

! 取反

相等 ==
不等 !=

注意:全等首先必须类型一致,其次值必须一致,才会返回true,否则返回false
全等 ===
全不等 !==

实例一:
alert(!!1)  //true
alert(!!0)  //false

实例二:
var a = {x:10};
var b = a;  //引用类型
alert(a == b)  // true 内存地址一样

实例三:
alert(NaN !== NaN);  //true

大于/小于

规则一:左右两侧如果都是数值,就比较数值的大小。返回布尔值

alert(5>1)  //true


规则二:**字符串的比较是逐位比较的,并且比较的是字符编码大小**  !!!

alert('a' > 'A')  //true
alert('23' > '3') //false


规则三:如果比较中出现了NaN,那么结果就是false
alert(1 > NaN)  //false

运算符优先级

规则一:乘法运算符优先级高于加法运算的
var result2 = 2 + 3 * 2;  //8

规则二:从左往右
var r = 2 + 3
alert(r) //5

逻辑运算符


& 与

会看左侧操作数,如果左侧操作数 进行 隐式类型转换 为 false ,直接返回左侧的操作数;如果是 true,直接返回右侧的操作数。

alert(1 && 2);  //2

alert(0 && 2);   //0
--------------------------------------

 || 或

会看左侧的操作数,对左侧操作数进行隐式类型的转换,转为boolean。如果是true,直接返回左侧的操作数;如果是false, 直接返回右侧的操作数。

alert(0 || 2)  //2
---------------------------------------

! 非 

取反只作用于一个操作数,得到的结果一定是个boolean
alert(!true)   //false

alert(Boolean(NaN)) //false
alert(!NaN)  //true