Javascript运算符进阶指南

概述

运算符是处理数据的基本方法，用来加工原始数据以得到期望的数据，Javascript与其他编程语言一样，提供了多种运算符。它们在Javascirpt中的用法基本与其他语言中的用法相同。

算数运算符

加法运算符

加法运算符+ 需要注意的是，它除了用于字面上的数值相加功能，还能用于字符串的连接

1 + 1//2
'1' + '10' //'110'
'12.1' + '2.12' //'12.12.12'

如果两个运算子之中，一个是字符串，另一个是数值，加法运算符也是执行字符串连接运算。

1 + '12' //  "112\",只能这样表示，才能出现注释。
'12' + 1 // '121',

只要其中一个运算子是字符串，不管在哪个位置，另外一个运算子就会被自动转为字符串，所以返回的都是String类型,可以利用这个特性，将一个数值转换为字符串。

123 + '' // "123\"
//这便是一个的数据类型自动转换

而减法不会发生运算符重载，所有的运算子先转为数值类型，再进行相应的数学运算，这样会出现一些有趣的代码结果：

var now = new Date();
typeof(now + 1)//String
typeof(now - 1)//Number

余数运算符

余数运算符% 返回前一个运算子被后一个运算子除后，得到的余数，但运算结果的正负号由第一个运算子的正负号决定。

-1 % 2 //-1
1 % -2 //1

所以判断奇偶数的正确方法是：

function isOdd(x){
    return Math.abs(x % 2)==1
}
isOdd(-5)//true
isOdd(-4)//false

自增/自减运算符

它们都是一元运算符，自增/自减运算符放在变量后边（常见于for语句中）会先返回变量操作前的值，在进行自增/自减运算，放在变量之前，则反之。

var now = 12;
console.log(now++,now); // 12 13
var ago = 30;
console.log(--ago,ago)// 29 29

比较运算符

（严格）相等运算符：===/==

相等运算符== 比较两个值是否相等，严格相等运算符=== 比较它们是否为“同一个值”，换言之，相等运算符在比较之前会对两个不同类型的值进行自动的数据转换。

注意：NaN 与任何值都不相等（包括自身）

如果两个变量都指向同一个复合类型的数据，则它们相等。
undefined 和null 与自身严格相等，而它们与其他类型的值比较时，结果都为false。它们相互比较时结果为true。

undefined === undefined //true
null === null //true
undefined === null //false
undefined == null //true

布尔运算符

取反运算符（！）

取反运算符用于将布尔值变为相反值。对于非布尔值的数据，取反运算符会自动将其转为布尔值，以下六个值取反后为true，其他值取反后都为false

• undefined
• null
• false
• 0(包括+0和-0)
• NaN
• 空字符串（“”）

对一个值连续做两次取反操作，等于将其转为对应的布尔值，与Boolean() 的用法相同

且运算符（&&）

且运算符的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，而非对于的布尔值）；如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。这种跳过第二个运算子的机制，被称为“短路”，它可以改写某些if语句

if(i !== 0){
    dosomething();
}
//简单地来说，(i !== 0) 和 (i)是等价的，
//等价于
i && dosomething()

且运算符可以多个连用，这时返回第一个布尔值为false的表达式的值。

或运算符（||）

或运算符的运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值（看清楚，也是运算子的值哟，不是运算子的布尔值），且不再对第二个运算子求值，如果第一个运算子的布尔值为false，则返回第二个运算子的值。所以，或运算符常用于为一个变量设置默认值。

function setValue(text){
    text = text || '';
}

三元条件运算符

三元条件运算符用? 和： ，分割三个表达式，如果第一个表达式的布尔值为true，则返回第二个表达式的值，否则返回第三个表达式的值。通常来说，三元条件表达式和if...else... 效果是相同的，唯一的差别是：前者是表达式，具有返回值。所以在需要返回值的上下文中，只能使用三元表达式，而要用if...else... 语句，就要改变整个代码的写法了。

var years = true?2015:1970;
//使用if...else语句
var years;
if(true){
    years = 2015;
}else{
    years = 2016
}

位运算符

位运算符用于直接对二进制位进行计算，一共有7个。

• 否运算（not）:符号为～，表示将一个二进制位变成相反值。
• 异或运算（XOR）：符号为^,表示两个二进制位中有且仅有一个为1时，结果为1，否则为0.
• 左移运算（left shift）:符号为<<.
• 右移运算（right shift）:符号为>>.
• 带符号位的右移运算（zero filled right shift）:符号为>>>.

否运算

“否运算将每个二进制位都变成相反值（0<=>1）”
所有的位运算都只对整数有效，否运算遇到小数位时，会将小数位舍去，所以，对一个小数连续进行两次否运算，能达到取整效果

~~3.14159265358//3

使用否运算取整，是所有取整方法中最快的一种。

异或运算

”异或运算“在两个二进制位不同时返回1，相同时返回0.“异或运算”有一个特殊运用，连续对两个数a和b进行三次异或运算：a^=b,b^=a,a^=b 可以互换它们的值（详见维基百科）。这样做的好处是免去了引入额外临时变量的操作。

var x = 10; //二进制为1010
var y = 3;//二进制为0011
x ^= y //x =>1001
y ^= x //y =>1010
x ^= y //x =>0011

使用异或运算是互换两个变量值的最快办法

左移运算符（＜＜）

左移运算符表示将一个数的二进制形式向前（左）移动，尾部补０.用于二进制数值非常方便,下面的代码将颜色的RGB值转为HEX值。

var color = {r: 186, g: 218, b: 85}; // RGB to HEX 
var rgb2hex = function(r, g, b) {
    return '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).substr(1); 
} 
rgb2hex(color.r,color.g,color.b) // "#bada55"

右移运算符（>>）和带符号位的右移运算符（>>>）

右移运算符表示将一个数的二进制形式向右移动，头部补上最左位的值，即整数补0，负数补1.右移运算符可以模拟2的整除运算。
和带符号位的右移运算符表示将一个数的二进制形式向右移动，不论正负数，头部都补0，所以得到的总是一个正整数

声明：本文参考自APP编程助手中的Javascript篇的基本用法章节的运算符小节。