JavaScript学习笔记（三）--操作运算符

JavaScript中的运算符有很多，主要分为算术运算符，比较运算符，逻辑运算符，三目运算符、一元运算符、位运算符等。这些运算符都有一些属于自己的运算规则，下面就为大家介绍一下JavaScript中的运算符。

算术运算符

Number类型之间都可以进行常规的算数运算，非Number类型在强类型语言中是不允许参与运算的。但在JS中可以，JS会把其他数据类型优先转换成数字类型继续运算，转换规则详见–>JavaScript学习笔记（一）–JS基础，这里就不多赘述啦~~

算数运算符主要有加（+），减（-），乘（*）、除（/）、取余（%）这五种，下面为大家一一介绍。

加（+）

var a = 1 + 1; // 2
var a = 1 + true; // 2
var a = 1 + null; // 1
var a = 1 + undefined; // NaN

在加运算中有一个特殊的设定：当操作数中出现了字符串，加运算就不再执行算术运算了，而是字符串拼接运算。

var a = '1' + 12; // '112'
var a = true + '1'; // 'true1'
var a = '1' + 2 + 3;  // '123'
var a = 1 + 2 + '3';  // '33'

加运算到底是执行数字相加运算，还是执行字符串拼接运算，取决于操作数的类型。也就是说，操作数的类型不同，导致了不同的语法行为，这种现象称为重载（overload）。

除了加运算，其他算术运算符（比如减法、除法和乘法）都不会发生重载。它们的算法是：所有操作数一律转为数值，再进行相应的数学运算。

减（-）

var a = 1 - 1; // 0
var a = 1 - true; // 0
var a = 1 - '1'; // 0
var a = 1 - 'a'; // NaN

乘（*）、除（/）

var a = 2 * 3; // 6
var a = 2 * false; // 0
var a = 5 / 2; // 2.5
var a = 5 / true; // 5

取余（%）

var a = 5 % 2; // 1
var a = -5 % 2; // -1
var a = 5 % -2; // 1

注意：当操作数中存在负数时，结果的正负取决于第一个操作数的正负。

比较运算符

比较运算符主要有小于（<）、大于（>）、小于等于（<=）、大于等于（>=）、等于（= =）、全等（===）这六种。

<、<=、>、>=

3 > 2  // true
'3' > 2  // true
true < 2  // true
true < false  // false
'2' <= null  // fasle
'21' > '119'  // true
'helloworld' > 'helloWorld'  // true

当操作数都为字符串类型时，会按照字典顺序（Unicode码）进行比较。先比较首字符的 Unicode 码点，如果相等，再比较第二个字符的 Unicode 码点，以此类推。常见字符的Unicode 码点顺序为：数字（0 ~ 9） < 大写字母（A ~ Z） < 小写字母（a ~ z）。

等于（==）

• 基本数据类型：将操作数转换成同一类型再进行比较。

1 == true  // true
'' == '1'  // false
'' == 0  // true

• 引用数据类型：比较两者的引用地址。

var a = {name:"terry",age:"12"};
var b = {name:"terry",age:"12"};
var c = a;
a == b  // false
a == c  // true

如何比较两个对象的属性值是否相同？

1. 先将对象序列化为json字符串。
2. 对json字符串进行对比。

JSON.stringify(a) == JSON.stringify(b)  // true

全等（===）

先比较两个操作数的类型，若不一致，直接返回false；只有当两个操作数类型一致时才会继续比较两者的值。

1 == '1'  // true
1 === '1' // false
1 === 0x1 // true
NaN === NaN // false
+0 === -0  // true

逻辑运算符

逻辑运算符主要有与（&&）、或（||）、非（！）这三种。

与（&&）

示例	第一个表达式	第二个表达式	结果
3 > 2 && 5 > 3	true	true	true
3 > 2 && 5< 3	true	false	false
3 > 2 && “hello”	true	“hello”	“hello”
“hello” && 3 > 2	true	true	true
"hello” && 3	true	3	3
3 < 2 && 5 > 3	false	——	false
a && 5 > 3	false	——	undefined

当第一个表达式的结果为true，或者可以转化为true（比如“hello”，3）时，整个表达式的结果取决于第二个表达式；如果第二个表达式不能直接判断，返回第二个表达式的值，如果可以直接判断，那就同真则真，有假则假。

当第一个表达式的结果为false时，不需要判断第二个表达式，直接返回false；如果第一个表示式可以转化为false（比如null，undefined），返回第一个表达式的值。

var gender = 'female';
var age = 13;
if（gender === 'male' && age > 12）{ 
	console.log('你好！');
}	//false

对于以上代码，由于gender === 'male’运算结果为false，整个&&表达式的结果就为false，不需要再判断第二个表达式。那第二个表达式到底有没有被执行呢？我们来简单测试一下：

var gender = 'female';
var age = 13;
function foo(gender){
      console.log('比较性别');
      return gender == 'male';
};
function bar(age){
      console.log('比较年龄');
      return age > 12;
};
if(foo(gender)&& bar(age)){
      console.log('你好！');
};
//输出：比较性别

从输出结果来看，函数bar并没有调用，所以就证明了第二个表达式bar(age)没有执行。

或（||）

||与&&的用法相似，但是||的运算法则是有真则真，同假才假。

var result = 1>2 || 'hello';	// hello

对于以上代码，1>2为false，但是无法确定整个表达式的结果，整个表达式的结果取决于第二个表达式，而第二个表达式中’hello’可以转化为true，所以将其返回即可。

var result = 1<2 || 'hello' 	// true

对于以上代码，1<2为true，能确定整个表达式的结果，无需进行接下来的运算。

非（ ! ）

非（!）运算的结果一定是boolean类型。表达式中也可以将其他数据类型转换成boolean类型。

!true // false
!false // true
!!true // true
!!false // false
!"hello" // false
!!"hello" // true

三目运算符

表达式1 ? 表达式2 : 表达式3

如果表达式1的值为true，则返回表达式2；如果表达式1的值为false，则返回表达式3。效果类似于if-else语句。区别是if-else语句不存在返回值，三目运算符属于表达式，会有返回值，所以在需要返回值的场景就只能使用三目运算符。

var age = 19;
var result = age > 16 ?"成年人":"小孩子";      //成年人

一元运算符

一元运算符主要有正（ + ）、负（ - ）、自增（ ++ ）、自减（- -）、非（ ! ）这五种，是只需要一个操作数的运算符。非（ ! ）运算符在前面的逻辑运算符里解释过，这里就不做说明了。

正（ + ）、负（ - ）

一元正（+）/（-）负运算符之后的操作数如果是其他数据类型，则转换为数字类型（作用等同于Number函数）。

+3  // 3
-true  // -1
+'2'  // 2
+'a'  // NaN
+null  // 0
-[] // -0
+{} // NaN
-(-true)  // 1

连用两个负（ - ）值运算符，等同于正（ + ）值运算符，要注意小括号不可少，否则会变成自减（ - - ）运算符。

自增（ ++ ）、自减（- -）

自增（ ++ ）和自减（- -）作为前缀和后缀执行顺序是不同的，作为前缀优先级是最高的，自增自减完毕以后才进行表达式的计算；作为后缀时，是进行完表达式的计算之后再进行自增自减的。

var a = 3;
var result = a++ + ++a;
console.log(result);	    //8
console.log(a);				//5

对于以上代码，++a优先级最高，先进行运算，此时a=4；然后进行 a++ + ++a操作（即4+4）得出8；最后进行a++运算，a的值变为5。

位运算符

二进制位运算符是非常底层的运算，好处是速度极快，缺点是很不直观，许多场合都不能使用，否则会使代码难以理解和查错。有一点需要特别注意，位运算符只针对于数字类型的值进行运算，在运算之前先转换为二进制，如果一个操作数不是整数，会自动舍弃小数部分转为整数后再执行。

位运算仅供了解，实用性不高，本文只介绍与（ & ）、或（ | ）、异或（ ^ ）这三种运算符。

与（ & ）

逐位比较两个操作数的二进制数，两个二进制位都为1，则结果为1，否则结果为0。

5 & 6  // 4
101 & 110  // 100

或（ | ）

逐位比较两个操作数的二进制数，两个二进制位之中只要有一个位为1，就返回1，否则返回0。

5 | 6  // 7
101 | 110  // 111

异或（ ^ ）

逐位比较两个操作数的二进制数，两个二进制位不同时返回1，相同时返回0。

5 ^ 6  // 3
101 ^ 110  // 011

使用异或运算可以在不引入临时变量的前提下，互换两个变量的值，具体操作如下。

var a = 1;
var b = 2;
a ^= b, b ^= a, a ^= b;
a // 2
b // 1