了解JavaScript中的操作符（一）

前言

? ? ? ? 想要学好一门语言，了解其操作符是十分关键的，与数学一样，JavaScript中也包括加、减、乘、除等基本操作符，除此之外，JavaScript还包括了一些其他操作符，如自增、自减、关系、条件、位移等操作符。由于JavaScript中的操作符使用起来灵活多变，为了使读者能够循序渐进的学习，不要一口吃个胖子，本部分将分为三篇文章来讲述。

一、一元操作符?

? ? ? ? 所谓一元操作符，是指只能操作一个值的操作符，一元操作符在很多语言中都存在，比如C、java等。?

? ? ? ? 递增和递减操作符?

? ? ? ? ?递增（++）（自增1）和递减（--）（自减1）操作符分为前置型和后置型。顾名思义，前置型是指操作符在被操作的值的前面，而后置型是指操作符在被操作的值的后面，而前置型操作符又分为前置递增和前置递减，后置型操作符又分为后置递增和后置递减，比如下面的代码：

var a=2;
var b=++a;  //前置递增
var c=a++;  //后置递增
var d=--a;  //前置递减
var e=a--;  //后置递减

? ? ? ? 那么上述代码b、c、d、e的结果分别又是什么呢，我们将它们打印出来看一下

? ? ? ? 我们可以看到，?b、c、d、e的结果都是3，虽然结果相同，但在这个过程中变量a却经历了四次变化，在赋值给b的时候，++a使a发生了第一次自增，变为了3，b此时获取的是a第一次自增后的值3。在赋值给c的时候，c此时获取的也是a第一次自增后的值3，然后a++使a发生第二次自增，a的值此时变为了4。在赋值给d的时候，--a使a发生了第一次自减，变为了3，d此时获取的是a第一次自减后的值3。在赋值给e的时候，e获取的也是a第一次自减后的值3，然后a--又使a发生了第二次自减，变为了2。

? ? ? ? 由此可以看出，前置操作符的生效的时间，在被操作值参与运算的前面。 而后置操作符的生效的时间，在被操作值参与运算的后面。 又比如下面的代码

var a=2;
var b=++a+1;  //前置操作符在参与运算之前产生作用，b的值为4
var c=2;
var d=1+c++;  //后置操作符在参与运算之后产生作用，d的值为3

?????????递增和递减操作符可以适用于任何值，不仅适用于数值，还可以用于字符串、布尔值、浮点数和对象。在用于非数值类型的值时，遵循下列规则：

? ? ? ? 1、如果字符串可以转为有效数字，先将其转为数值型，再执行递增和递减操作。

? ? ? ? 2、如果字符串不能转为有效数字，则只将其转为NaN。不执行递增和递减操作。

? ? ? ? 3、应用于布尔类型的值时，会将true转为1，false转为0，再执行递增和递减操作。

? ? ? ? 4、应用于对象时就比较复杂了，会先调用对象的valueOf()方法（后续文章里会详细讲述）以取得一个可供操作的值，如果这个值为NaN，则在调用toString()方法后再应用前面的规则。

? ? ? ? 加减操作符?

? ? ? ? ?加减操作符开发人员都不会陌生，除了应用于数值类型变量表示正负数外，还可以应用到其他任何类型的值。

var a='10';
var b='1.2';
var c='ddd';
var d=true;
var e=false;
var f=function (){}
var g={}
var h={
  valueOf:function (){
    return 1;
  }
}
console.log(+a)   //输出10
console.log(+b)   //输出1.2
console.log(+c)   //输出NaN
console.log(+d)   //输出1
console.log(+e)   //输出0
console.log(+f)   //输出NaN
console.log(+g)   //输出NaN
console.log(+h)   //输出1
console.log(-a)   //输出-10
console.log(-b)   //输出-1.2
console.log(-c)   //输出NaN
console.log(-d)   //输出-1
console.log(-e)   //输出-0
console.log(-f)   //输出NaN
console.log(-g)   //输出NaN
console.log(-h)   //输出-1

? ? ? ? 通过以上代码可以看出，在用于非数值类型的时候，字符串会转为正负数，如果字符串不能转为有效数字，则转为NaN。布尔型会转为正负1或0（-0也是0）。函数会直接转为NaN。对象型如果有valueOf函数，则调用valueOf函数的返回值，没有则直接转为NaN。

二、布尔操作符?

? ? ? ? 布尔操作符是一门语言中使用最频繁的操作符，任何逻辑判断都离不开布尔操作符，布尔操作符包括非（NOT）与（AND）或（OR）三种。?

? ? ? ? 逻辑非?

?????????逻辑非操作符用一个英文叹号（!）表示，可以用于任何类型的值。逻辑非操作符遵循以下规则：

var a=10;
var b=0;
var c='ddd';
var d='';
var e;
var f=null;
var g=function (){}
var h={}
var i={
  valueOf:function (){
    return 1;
  }
}
console.log(!a)   //非零数值型返回false
console.log(!b)   //0返回true
console.log(!c)   //非空字符串返回false
console.log(!d)   //空字符串返回true
console.log(!e)   //undefined返回true
console.log(!f)   //null返回true
console.log(!g)   //函数返回false
console.log(!h)   //空对象返回false
console.log(!i)   //非对象返回false

? ? ? ? 对一个值使用两个逻辑非操作符，可以达到Boolean()函数的效果，比如

var a=10;
var b=0;
var c='ddd';
var d='';
var e;
var f=null;
var g=function (){}
var h={}
var i={
  valueOf:function (){
    return 1;
  }
}
console.log(!!a)   //非零数值型返回true
console.log(!!b)   //0返回false
console.log(!!c)   //非空字符串返回true
console.log(!!d)   //空字符串返回false
console.log(!!e)   //undefined返回false
console.log(!!f)   //null返回false
console.log(!!g)   //函数返回true
console.log(!!h)   //空对象返回true
console.log(!!i)   //非对象返回true

? ? ? ? 逻辑与

? ? ? ? 逻辑与操作符由两个和号（&&）组成，操作符两边各有一个操作数，如下面所示

var a=true;
var b=false;
var c=a&&b;

????????逻辑与操作符的返回结果只有在两个操作数都为真值的情况下，才返回true。所谓真值是只除了false、0、空字符串、undefined、null和NaN之外的所有值。逻辑与操作符可以用于任何类型的操作数，遵循如下规则：

? ? ? ? 1、如果第一个操作数是对象，则返回第二个操作数。

? ? ? ? 2、如果第二个操作数是对象，则只有在第一个操作数的求值结果为true的情况下才会返回该对象

? ? ? ? 3、如果两个操作数都是对象，则返回第二个操作数

? ? ? ? 4、如果其中一个操作数是null，则返回null

? ? ? ? 5、如果其中一个操作数是NaN，则返回NaN

? ? ? ? 6、如果其中一个操作数是undefined，则返回undefined

? ? ? ? 逻辑与操作属于短路操作，即如果第一个操作数的结果为非真，那么就直接返回false，不会再判断第二个操作数的值。比如下面的代码

var a=true;
console.log(a&&b)   //这里会发生错误
var c=false;
console.log(c&&b)   //这里正常输出结果false

? ? ? ? 逻辑或

?????????逻辑或操作符由两个竖线（||）组成，操作符两边各有一个操作数，如下面所示

var a=true;
var b=false;
var c=a||b;

????????逻辑或操作符的返回结果在其中一个操作数为真的情况下，就返回true。逻辑或操作符可以用于任何类型的操作数，遵循如下规则：?

????????1、如果第一个操作数是对象，则返回第一个操作数

? ? ? ? 2、如果第一个操作数求值结果为false，则返回第二个操作数

? ? ? ? 3、如果两个操作数都是对象，则返回第一个操作数

? ? ? ? 4、如果两个操作数都是null，则返回null

? ? ? ? 5、如果两个操作数都是NaN，则返回NaN

? ? ? ? 6、如果两个操作数都是undefined，则返回undefined

????????逻辑或操作也属于短路操作，即如果第一个操作数的结果为真，那么就直接返回true，不会再判断第二个操作数的值。比如下面的代码

var a=false;
console.log(a||b)   //这里会发生错误
var c=true;
console.log(c||b)   //这里正常输出结果true

? ? ? ? 在实际开发中，逻辑或操作符除了用于逻辑判断之外，还可以用来避免变量被赋值null或undefined。比如下面的代码

function count(val){
    var a=val || 100;
}

? ? ? ? 如果count函数的参数val传过来的值为null或undefined，a则被赋值100。当然，除了null或undefined之外，val为任何非真值，a都会被赋值100。实际开发中会有更合理的判断，这里只作为简单的举例说明。

三、乘性操作符?

? ? ? ? JavaScript中定义了三个乘性操作符：乘法（*）、除法（/）和求模（%）。乘法和除法和数学中的应用类似，只不过在用于非数值的情况下，会执行相应的转换操作。

? ? ? ? 乘法

? ? ? ? 乘法操作符用于计算两个数值的乘积，如果其中一个操作数为非数值型，则遵循如下规则：

console.log(10*10)                  //输出100。两个操作数都是数值型，则返回乘积
console.log('10'*10)                //输出100。如果其中一个操作数为非数值型，但经过Number()可以转为有效数值，则返回乘积
console.log('10'*'10')              //输出100。如果两个操作数都为非数值型，但经过Number()可以转为有效数值，则返回乘积
console.log('abc'*10)               //输出NaN。如果其中一个操作数为非数值型，但经过Number()不可以转为有效数值，则返回NaN
console.log(null*10)                //输出0。如果其中一个操作数为null，则返回0
console.log(NaN*10)                 //输出NaN。如果其中一个操作数为NaN，则返回NaN
console.log(undefined*10)           //输出NaN。如果其中一个操作数为undefined，则返回NaN
console.log({}*10)                  //输出NaN。如果其中一个操作数为对象，则返回NaN
console.log(Number.MAX_VALUE*10)    //输出Infinity。如果两个数的乘积超过最大范围，则返回Infinity

? ? ? ? ?除法

?????????乘法操作符用于计算两个数值的商，如果其中一个操作数为非数值型，则遵循如下规则：

console.log(10/10)                  //输出1。两个操作数都是数值型，则返回商
console.log('10'/10)                //输出1。如果其中一个操作数为非数值型，但经过Number()可以转为有效数值，则返回商
console.log('10'/'10')              //输出1。如果两个操作数都为非数值型，但经过Number()可以转为有效数值，则返回商
console.log('abc'/10)               //输出NaN。如果其中一个操作数为非数值型，但经过Number()不可以转为有效数值，则返回NaN
console.log(10/'abc')               //输出NaN。如果其中一个操作数为非数值型，但经过Number()不可以转为有效数值，则返回NaN
console.log(null/10)                //输出0。如果其中一个操作数为null，则返回0，null做为0来处理
console.log(10/null)                //输出Infinity。如果第二个操作数为null，则返回Infinity，null做为0来处理
console.log(NaN/10)                 //输出NaN。如果其中一个操作数为NaN，则返回NaN
console.log(undefined/10)           //输出NaN。如果其中一个操作数为undefined，则返回NaN
console.log(10/undefined)           //输出NaN。如果其中一个操作数为undefined，则返回NaN
console.log(10/{})                  //输出NaN。如果其中一个操作数为对象，则返回NaN

? ? ? ? 求模

? ? ? ? ?求模操作符也叫取余操作符，用来计算两个数相除的余数，如果其中一个操作数为非数值型，则遵循如下规则：

console.log(10%8)                   //输出2。两个操作数都是数值型，则返回商
console.log('10'%8)                 //输出2。如果其中一个操作数为非数值型，但经过Number()可以转为有效数值，则返回商
console.log('10'%'8')               //输出2。如果两个操作数都为非数值型，但经过Number()可以转为有效数值，则返回商
console.log('abc'%8)                //输出NaN。如果其中一个操作数为非数值型，但经过Number()不可以转为有效数值，则返回NaN
console.log(10%'abc')               //输出NaN。如果其中一个操作数为非数值型，但经过Number()不可以转为有效数值，则返回NaN
console.log(null%10)                //输出0。如果其中一个操作数为null，则返回0，null做为0来处理
console.log(10%null)                //输出NaN。如果第二个操作数为null，则返回NaN
console.log(NaN%10)                 //输出NaN。如果其中一个操作数为NaN，则返回NaN
console.log(undefined%10)           //输出NaN。如果其中一个操作数为undefined，则返回NaN
console.log(10%undefined)           //输出NaN。如果其中一个操作数为undefined，则返回NaN
console.log(10%{})                  //输出NaN。如果其中一个操作数为对象，则返回NaN

小结

? ? ? ? 本文讲述了JavaScript中的操作符，包括一元操作符、布尔操作符、乘性操作符。以及各类操作符用在不同类型数值时候的规则。?下一篇文章将讲述加性操作符、条件操作符、相等操作符、赋值操作符。