网页设计实战之JavaScript(3) -- 运算符与表达式

一、运算符

表达式可以由变量、字面量、运算符组成。但 运算符无法单独构成表达式。
每一个合法的表达式都有一个值（运算的结果）。

所有运算符可分为单目运算符、双目运算符、三目运算符三类。

分类	需要操作数数目	运算符
单目运算符	一	++ 、-- 、！
双目运算符	二	+ 、- 、*、 / 、%
三目运算符	三	?:

运算符的分类根据运算符形成表达式所需操作数个数而定。

1、算术运算符

运算符	描述	表达式	值（运算结果）
+	加法	1+2	3
-	减法	5-1	4
*	乘法	5*2	10
/	除法	15/3	5
%	取模（余数）	9%2	1

2、自增减运算符

自增运算符的功能：让变量自身的值加 1 .变量名++ 或者 ++变量名
自减运算符的功能：让变量自身的值减 1 .变量名-- 或者 --变量名

运算符	描述	表达式	值（运算结果）
++	自增	1++、3++	2、4
–	自减	3–、--4	2、3

3、赋值运算符

赋值运算符用于给 JavaScript 变量赋值。
赋值运算符构成的表达式称为 赋值表达式，表达式的值：赋值号 ( = ) 左边变量被赋值之后的值 .
下式中，如果a为10：

运算符	表达式	等同于	表达式的值
=	a=10		10
+=	a+=2	a=a+2	12
-=	a-=2	a=a-2	8
*=	a*=5	a=a*5	50
/=	a/=5	a=a/5	2
%=	a%=3	a=a%3	1

赋值运算符的左边（左操作数）必须是变量!,不能是常量，如：
2=a*10;// 不可以。

4、+算符与非常数字常量

var a = 10;                                   
                                              
//字符串+字符串                                     
console.log('a的值为:'+'10');      //"a的值为:10"   
                                              
//字符串+非字符串                                    
console.log('a的值为:'+a);         //"a的值为:10"   
console.log('a的值为:'+true);      //"a的值为:true" 
console.log('a的值为:'+null);      //"a的值为:null" 
console.log('a的值为:'+a+a+'.');   //"a的值为:1010."
                                              
//数字+非数字                                      
console.log(10+true);   //11                  
console.log(10+false);  //10                  
console.log(10+null);   //10

+运算符是双目运算符:

• 当左右两个操作数中至少有一个是字符串时，+号起到的作用是字符串连接（原理： js 会将非字符串数据转为字符串，然后连接成一个新字符串）。
• 数字+非字符串值，+号起到的作用依然是加法运算（原理：非字符串值会被转为数字，然后执行相加运算）。

5、关系运算符

关系运算符组成的表达式称为 关系表达式，如：表达式 1 < 表达式 2 . 其值只有： true 、 false

运算符	描述	表达式	值（运算结果）
<	小于	1<2	true
<=	小于等于	3<=4	true
>	大于	3>4	false
>=	大于等于	3>=4	false
==	等于	3==4	false
!=	不等于	3!=4	true
===	全等	3===4	false
!==	不全等	3!==4	true

== 与 === 的区别：== 只比较左右两个操作数的值，===会比较左右两个操作数的值和类型（值和类型必须都相等）。

关系表达式经常用在逻辑判断场合（如和 if 配合使用），所以其值是布尔值（逻辑值）。

5、逻辑运算符

逻辑运算符组成的表达式称为 逻辑表达式。

运算符	描述	表达式	值（运算结果）
&&	逻辑与	false && false、true&& true、false&&true、true&&false	false、true 、false、 false
｜｜	逻辑 或	false ｜｜false、true｜｜true、false｜｜true、true｜｜false	false、true、true、true
!	逻辑非	!false 、!true	true 、false

在 JavaScript 中 false 、 0 、 null 、 ‘’ 、 undefined 、 NaN 都代表逻辑假，其他情况都是逻辑真。

6、条件运算符（三目运算符）

？：是所有运算符中唯一的一个三目运算符，组成的表达式为：子表达式 1 ？子表达式 2 ：子表达式 3.

运算逻辑：先计算子表达式 1 ，如果子表达式 1 为真，子表达式 2 的值作为整个表达式的值；如果子表达式 1 为假，子表达式 3 的值作为整个表达式的值。

表达式	表达式的值
1>2 ? 1+2 : 1*2	2
3>2 ? 3+2 : 1*2	5

7、逗号运算符

所有运算符中优先级最低的运算符，组成的表达式为：子表达式 1 ，子表达式 2 ，子表达式 3 ,…
运算逻辑：从左到右 依次计算每个子表达式，最后一个子表达式的值作为整个表达式的值。

var a = (5, 6, 3, 4, 7);  
var b = (1, 2, 3, 4, a++);

8、位运算符

• 位运算符要求它的操作数是整数
• 位运算符会将NaN、Infinity和-Infinity都转换为0

运算符	描述	表达式	值（运算结果）
&	与	0& 1、1& 1	0、1
｜	或	0｜0、0｜1、1｜1	0、1、1
^	异或	2^ 3	1
~	按位非	~2	1
<<	左移	2<<1	4
>>	带符号右移	8>>2	2
>>>	无符号右移	8>>2	2

9、其它算符

运算符	描述	表达式	值（运算结果）
typeof	取操作数类型	typeof “test”	string
void	操作数可以是任意类型		void window.open()
delete	删除对象属性或者数组元素	var a = [1,2,3];delete a[2];
instanceof	判断是否是某类的实例	d instanceof Date;	true
eval	解释运行由JavaScript源代码组成的字符串，并产生一个值	eval(“3+2”);	5

二、表达式中的算符优先级

在计算表达式时控制运算符执行的顺序。具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。
具有相同优先级的运算符按从左至右的顺序求值。

运算符	描述
.、 [ ]、 ()	字段访问、数组下标、函数调用以及表达式分组
++、 – 、-、 ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
*、 / 、%	乘法、除法、取模
+、 - 、+	加法、减法、字符串连接
<< 、>>、 >>>	移位
<、 <=、 >、 >= 、instanceof	小于、小于等于、大于、大于等于、实例判断
＝＝、 != 、=== 、!==	等于、小于、小于等于、大于、大于等于、instanceof
&	按位与
^	按位异或
｜	按位或
&&	逻辑与
｜｜	逻辑或
?:	条件
= 、-=、+=	赋值、运算赋值
,	多重求值

圆括号可用来改变运算符优先级所决定的求值顺序。这意味着圆括号中的表达式应在其用于表达式的其余部分之前全部被求值。
xx = 12 * (6 + 3 + 5)