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
使用异或运算是互换两个变量值的最快办法
左移运算符(<<)
左移运算符表示将一个数的二进制形式向前(左)移动,尾部补0.用于二进制数值非常方便,下面的代码将颜色的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篇的基本用法章节的运算符小节。