JavaScript运算符详解

JavaScript运算符详解

JavaScript中的运算符大致可以分为以下几类：

1. 算术运算符
2. 比较运算符
3. 布尔值运算符
4. 二进制位运算符
5. 其它运算符
   
   

1. 算术运算符

javaScript提供了以下算术运算符:

• 加法运算符
• 减法运算符
• 乘法运算符
• 除法运算符
• 指数运算符
• 余数运算符
• 自增运算符
• 自减运算符
• 正负数值运算符

减法，乘法，除法运算就是正常的数学计算，这里不做详细讲解。

1.1 加法运算符

1.1.1 基本运算规则

加法运算符（+），用来求两个运算子的和。但是JavaScript中，允许非数值相加，而且涉及到字符串时，加法运算符会变成连接运算符。

// 正常的数值相加
1 + 1; // 2

// 非数值相加，布尔值会自动转换为数值，然后进行加法运算
true + true ; // 2
false + false; // 0
true + false; // 1
1 + true; // 2
1 + false; // 1 

// 运算子有字符串时，变为连接运算符
"hello " + "world!"; // "hello world!"
1 + "a"; // "1a"
true + "a"; // "truea"

加法运算符是在运行时决定，到底是执行相加，还是执行连接。这种现象称为“重载”。

// 加法运算的重载
1 + 1 + "a"; // "2a"
"a" + 1 + 1; // "a11"

1.1.2 对象的相加

如果运算子是对象，必须先转成原始类型的值，然后再相加。

var x = { name: "jidi" };
x + 2 // "[object Object]2"

对象转换为原始类型的值，规则如下：

1. 调用对象的valueOf方法（一般情况下，对象的valueOf方法总是返回对象自身）。
2. 调用对象的toString方法（对象的toString方法默认返回[Object,Object]）。

上面那个例子，实际上可以看成是：

var x = { name: "jidi" };

var y = x.valueOf(); // {name: "jidi"}

var z = y.toString(); // "[object Object]"

z + 2; // "[object Object]2"

我们可以自己定义valueOf和toString方法。以得到想要的结果。

// 自定义valueOf方法
var x = {
	name: "jidi",
	valueOf: function(){
		return 5;
	}
};
// 自定义toString方法
var y = {
	name: "jidi",
	toString: function(){
		return 10;
	}
}

5 + x; // 10
5 + y; // 15

注意：如果参与加法运算的两个运算子，其中有一个是Date对象实例，会先执行toStrnig方法。

var now = new Date();

now.valueOf = function(){
	return 5;
}
now.toString = function(){
	return 10;
}

5 + now; // 15

1.2 余数运算符

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

12 % 5; // 2

// 余数运算结果正负情况由第一个运算子正负情况决定
-12 % 5; // -2
-12 % -5; // -2

1.3 自增和自减运算符

自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1。它们会修改原始变量。

var x = 1;
++x // 2
x // 2

--x // 1
x // 1

自增和自减是仅有的两个具有运算副作用（参与运算后，变量的值发生改变）的运算符。

自增和自减运算符又分为前置和后置两种：前置自增（自减），会先进行自增（自减），然后返回变量操作后的值；后置自增（自减）会先返回变量操作之前的值，然后再进行自增（自减）操作。

var x = 1;
var y = 1;

x++ // 1
++y // 2

1.4 正负数值运算符

数值运算符（+）是一元运算符，可以将任何数值转为数值。
负数值运算符（-)也是一元运算符，可以将任何数值转为数值，只是结果值正负相反。

var x = 1;

// 正数值运算符
+x; // 1
+true; // 1
+[]; // 0

// 负数值运算符
-x; // -1
-true; // -1

1.5 指数运算符

指数运算符（**）是二元运算符，前一个运算子是底数，后一个运算子是指数。指数运算是右结合。

5 ** 2; // 25

// 指数运算的右结合
// 相当于5 ** (2 ** 2)
5 ** 2 ** 2; //  625

1.6 赋值运算符

赋值运算符用于给变量赋值。但是赋值运算符可以与其他运算符结合，形成变体。

// 普通赋值运算符

var x = 2; // 将数值2赋值给变量x
var y = x; // 将变量x赋值给变量y

// 与其他运算符结合使用
x += 2; // 等价于 x = x + 2;
x -= 2; // 等价于 x = x - 2;
x *= 2; // 等价于 x = x * 2;
x /= 2; // 等价于 x = x / 2;
x %= 2; // 等价于 x = x % 2;
x **= 2; // 等价于 x = x ** 2;

2. 比较运算符

比较运算符用来比较两个值的大小，返回一个布尔值。
JavaScript中提供了以下比较运算符：

• >，大于运算符
• <，小于运算符
• >=，大于等于运算符
• <=，小于等于运算符
• ==，等于运算符
• ===，严格相等运算符
• !=，不相等运算符
• !==，严格不相等运算符

上述运算符可以分为两类：相等比较运算符与非相等比较运算符，两者规则不一样。

2.1 非相等运算符：字符串的比较

对于非相等运算符，如果运算子都是字符串，则是按照字典顺序进行比较。JavaScript引擎会首先比较首字符的Unicode码点，如果相等，则比较第二个字符的Unicode码点，以此类推…

"this".charCodeAt(); // 首字符Unicode码点为116
"is".charCodeAt(); // 首字符Unicode码点为105
"this" > "is"; // 116>105，true

"This".charCodeAt(); // 首字符Unicode码点为84
"this">"This"; // true

2.2 非相等运算符：非字符串的比较

如果两个运算子中至少有一个不是字符串，则存在以下情况：

(1) 原始类型值

如果两个运算子都为原始类型值，则先转换成数值，然后再进行比较。但是任何值与NaN比较，返回值都为false。

4 > "3"; // true
2 > true; // true
1 < false; // false
1 > null; // true

2 > NaN // false
1 <= NaN // false
'1' > NaN // false
'1' <= NaN // false
NaN > NaN // false
NaN <= NaN // false

注意：underfined转换为数值会转换成为NaN，即任何值与underfined和NaN进行比较，结果都是false。

(2) 对象
如果运算子是对象，则会转换成为原始类型的值，然后再进行比较。
对象转换为原始类型的值按照以下步骤进行的：

1. 调用对象的valueOf方法（对象调用valueOf方法一般返回对象自身），如果返回原始类型的值，不再进行后续步骤。
2. 如果valueOf方法结果仍旧是对象，则调用toString方法（对象的toString方法默认返回[Object,Object]）。

var x = [2];
x.valueOf(); // [2]
x.valueOf().toString(); // "2"
x > "11" // true ,等同于 [2].valueOf().toString() > "11"，即"2">“11”

// 改写valueOf方法
x.valueOf = function () { return "1" };
x > "11" // false，等同于 [2].valueOf() > "11"，即 "1" > "11"

上述例子中，数组x调用valueOf方法返回x本身，然后调用toString方法，返回"2"，此时是"2"与"11"两个字符串之间进行比较，比较的是 Unicode码点位置。

2.3 严格相等运算符

严格相等运算符（===）是二元运算符，比较的是两个运算子是否为同一个值。参与运算的运算子情况不同，具有不同的结果：

• 如果两个运算子值类型不同，直接返回false。
• 如果两个运算子值类型相同，且都是原始数据类型，只要值相等就返回true，否则返回false。
• 如果两个运算子值为复合类型，比较的是两个运算子的值是否指向同一个地址，如果地址相同，返回true，否则返回false。
• 特殊值null与underfined与自身严格相等。

// 两个运算子值类型不同，直接返回false
1 === "1"; // false
true === "true"; // false
true === 1; // false
"1"===new String("1"); // false

// 两个运算子值类型相同，且为原始数据类型，值相等就返回true
true === true; // true
1 === 1; // true
"a" === "a"; // true

// 两个运算子为复合数据类型，比较的是地址是否一样
{} === {} // false
[] === [] // false

var x = new String("a");
y = x;
x === y // true

// 特殊值 nul,undefined与自身严格相等 
null === null;	
undefined === undefined ;

2.4 严格不相等运算符

严格不相等运算符（!==），它的算法就是先求严格相等运算符（===）的结果，然后返回相反值。

true !== "true"; // true，等价于 !(true === "true")

2.5 相等运算符

相等运算符（==）是二元运算符，用来比较时，会进行数据类型转换。 参与运算的运算子情况不同，也具有不同的结果：

• 如果运算子数据类型一致，与严格相等运算符完全一样`。
• 如果运算子数据类型不一致：
  • 都是原始类型，则会转换成数值进行比较。
  • 对象与原始类型，对象会转换为原始类型的值然后进行比较。
  • 特殊值null，NaN与undefined。

// 数据类型一致，与严格相等运算符一样
1 == 1; // true
true == true; // true
{} == {} // false
[] == [] // false


// 数据类型不一致
// 都是原始数据类型，先转换为数值再进行比较
1 == true; // true
0 == false; // true
1 == "1"; // true
'' == 0; // true
'' == false;  // true

// 对象与原始数据类型比较，对象会先转为原始数据类型然后再进行比较
var person = {
	name: "jidi",
	sex: "男",
	valueOf: function(){
		return 1;
	},
	toString: function(){
		return "jidi";
	}
}
//对象与数值比较，对象转换为数值然后进行比较
person == 1; // true

person.valueOf = function(){return {}};// 自定义valueOf方法返回一个空对象
// 对象与字符串比较，对象转换为字符串然后进行比较
person == "jidi"; // true

// 对象与布尔值比较，对象与布尔值都转换为数值然后进行比较
[1] == true; // true
[] == false; // true


// 特殊值null,NaN,undefined
// NaN与任何值（包括本身），都为false
NaN == true; // false
NaN == 1; // false
NaN == null; //false
NaN == undefined; // false
NaN == NaN; // false
NaN == ""; // false

//null与undefined与其他值进行比较时，都会false，只有相互比较或者自身比较时返回true
null == 0;
null == false;
null == "null";
null == "";
null == null;

undefined == 0;
undefined == "0";
undefined == ""; 
undefined == "undefined";
undefined == false;
undefined == undefined;

null == undefined;

注意：由于相等运算符（==）会进行数据类型转换，可能会出现一些违反常理的结果：

"" == 0; // true
false == "0"; // true
5 == true;    // false
5 == false;   // false

2.6 不相等运算符

相等运算符（==）有一个对应的“不相等运算符”（!=），它的算法就是先求相等运算符的结果，然后返回相反值。

3. 布尔值运算符

布尔值运算符用于将表达式转为布尔值，一共有四个运算符。

• !，取反运算符
• &&，且运算符
• ||，或运算符
• ？：，三元运算符

3.1 取反运算符

取反运算符用于将布尔值变成相反值，即原来为true取反后变为false，原来为false取反后为true。
对于非布尔值，取反运算符会将其转换为布尔值。

!true; // false
!false; // true

// 非布尔值取反
!undefined // true
!null // true
!0 // true
!NaN // true
!"" // true

![] // false
!{} // false

数据类型转换的时候，以下几个值对它们进行取反为true，其它的值取反都为false。

• undefined
• null
• ’ ’
• NaN
• 0
• false

3.2 且运算符

且运算符（&&）是二元运算符。且运算符（&&）的运算规则：如果第一个运算子布尔值为true，返回第二个运算子的值；如果第一个运算子布尔值为false，直接返回第一个运算子的值，且不再对第二个运算子进行求值，即会出现短路现象。

true && false; // false
5 > 3 && 200; // 200
var x = 1;
23>12 && x++; //2, x=2

false && true; // false
3>5 && 200; // false

var y = 20;
// 发生短路现象
0 && y--; // 0，y=20

且运算符（&&）可以多个连用，此时返回第一个布尔值为false的表达式的值；如果表达式的布尔值都为true，则返回最后一个表达式的值。

// 返回第一个布尔值为false的表达式的值
1 && true && null && "example"; // null
1 && 0 && null && "example"; // 0

//表达式布尔值全为true，返回最后一个表达式的值
1 && true && 23 && "example"; // "example"

3.3 或运算符

或运算符（||） 也是二元运算符。或运算符（||）的运算规则：第一个运算子的布尔值为true，则返回第一个运算子的值，且不会对第二个运算子进行计算，即发生短路现象；如果第一个运算子的布尔值为false，则返回第二个运算子的值。

1 || 2; // 1

//发生短路
var x = 3;
3 > 2 || x++; // true，x=3

3 < 2 || x++; // 4，x=4

利用或运算符（||） 的短路现象，可以给函数参数设置默认值。

function f(x){
	x = x || 5; // 如果x没有传值，则默认x=5
	return x;
}

//  调用函数
f(); // 此时返回默认值5

或运算符（||） 可以多个连用，这时返回第一个布尔值为true的表达式的值。如果所有表达式都为false，则返回最后一个表达式的值。

// 返回第一个布尔值为true的表达式的值
false || 0 || '' || 4 || 'foo' || true; // 4

// 所有表达式的布尔值为false，返回最后一个表达式的值
false || 0 || '' || null; // null

3.4 三元运算符

三元运算符是JavaScript唯一一个需要三个运算子的运算符。三元运算符的规则是：如果第一个运算子的布尔值为true，返回第二个运算子的值，否则返回第三个运算子的值。

true ? 1 : 2; // 1
false ? 1 : 2; // 2

4. 二进制位运算符

JavaScript中提供了以下位运算符：

• |，二进制或运算符
• &，二进制与运算符
• ~，二进制否运算符
• ^，异或运算符
• <<，左移运算符
• >>，右移运算符
• >>>，头部补零的右移运算符

位运算符只对整数起作用，如果一个运算子不是整数，会自动转为整数后再执行。另外，在 JavaScript 内部，数值是以64位浮点数的形式储存的，但是在参与位运算的时候，是以32位带符号的整数进行运算的，并且返回值也是一个32位带符号的整数。

4.1 二进制或运算符

二进制或运算符（|），逐位比较运算子，两个二进制位中只要有一个为1，就返回1，否则返回0。

0 | 4; // 4

上面例子中，0和4的的二进制形式分别为：000和100（只截取了部分，完整的是一个32位的二进制数字），二进制或运算结果为：100，即4。

小数参与位运算时，小数部分会舍去，只保留整数部分参与位运算。所以二进制或运算的一个常用场景是小数取整。

// 定义一个函数，获得整数部分的值
function getIntNumber(x){
	return x | 0;
}

// 调用该函数
getIntNumber(2.3); // 2
getIntNumber(-2.9); // 2

4.2 二进制与运算符

二进制与运算符（&），逐位比较两个运算子，两个二进制位之中只要有一个位为0，就返回0，否则返回1。

2 & 3; // 1

4.3 二进制否运算符

二进制否运算符（~）将每个二进制位都变为相反值（0变为1，1变为0）。

~ 2; // -3

从上面例子看到，一个整数进行二进制否运算，结果并不是简单的改变值正负情况，这是因为计算机内部是使用补码来存储负数的。负数按位取反然后加1就得到补码。
简单的记法就是，一个数与自身的取反值相加等于-1。

4.4 异或运算符

异或运算符（^）在两个二进制位不同时返回1，相同时返回0。

0 ^ 3; // 3

上述代码中，0和3的二进制表示为00和11，异或的结果为11，即为3。

我曾经碰到过一个面试题，在不引入新变量的前提下，交换变量a，b的值。在这里就可以用异或解决。

var a = 3;
var b = 4;
a ^= b;
b ^= a;
a ^= b;
a; // 4
b; // 3

4.5 左移运算符

左移运算符（<<）表示将一个数的二进制值向左移动指定的位数，尾部以0填充，向左移动的时候，最高位的符号位是一起移动的。左移n位，相当于乘以2的n次方。
如果左移0位，就相当于将数值转为32位整数，也可以取的一个数的整数部分。

4.6 右移运算符

右移运算符（>>）表示将一个数的二进制值向右移动指定的位数。如果是正数，头部全部补0；如果是负数，头部全部补1。

4.7 头部补零的右移运算符

头部补零的右移运算符（>>>）与右移运算符（>>）只有一个差别，就是一个数的二进制形式向右移动时，头部一律补零，而不考虑符号位。

5. 其它运算符

5.1 void运算符

void运算符的作用是执行一个表达式，返回undefined。

void(7 +7 ); // undefined

void运算符可以在超链接中插入代码但是不会发生网页跳转。

<a href="javascript: void(document.form.submit())">
  提交
</a>

5.2 逗号运算符

逗号运算符（，）用于对两个表达式求值，并返回后一个表达式的值。

"x", "y"; // "y"

var x = 0;
var y = (x++, 10);
x // 1
y // 10

6. 参考链接

本博客是自己学习笔记，原文请参考JavaScript教程。
如有问题，请及时指出！
欢迎沟通交流，邮箱：jidi_jidi@163.com。