Javascript运算符进阶指南

àì夳堔傛蜴生んèń 2022-07-24 04:17 209阅读 0赞

## 概述 ##

**运算符是处理数据的基本方法**，用来加工原始数据以得到期望的数据，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` 可以互换它们的值（详见[维基百科][Link 1]）。这样做的好处是免去了引入额外临时变量的操作。

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篇的基本用法章节的运算符小节。

[Link 1]: http://en.wikipedia.org/wiki/XOR_swap_algorithm