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 与任何值都不相等(包括自身)

如果两个变量都指向同一个复合类型的数据,则它们相等。
undefinednull 与自身严格相等,而它们与其他类型的值比较时,结果都为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篇的基本用法章节的运算符小节。

posted @ 2016-05-13 00:06  西河  阅读(187)  评论(0编辑  收藏  举报