YanTianFeng的知识库

Want Coding

Want Reading

文章 89

访问 18940

评论 2

头像

YanTianFeng

发私信

文章 89
访问 18940
评论 2
JAVASCRIPT
返回顶部

Knowledge  JavaScript 运算符&表达式

标签   运算符  

  ( 661 )       ( 0 )


前言

JavaScript 运算符&表达式。所有的数学运算都离不开运算符,表达式。

表达式

表达式可以由变量、字面量、运算符组成。但 运算符无法单独构成表达式。

每一个合法的表达式都有一个值(运算的结果)。

每个表达式(不论简单与否)都有一个唯一的值与之对应,这个值和运算符本身的功能直接相关 .

var a = 10 ,b = 20 ;          
                              
//以下四个表达式都是合法的
a       // 值:10     
10      // 值:10     
a+10    // 值:20
a+b     // 值:30

运算符

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

分类 需要操作数数目 运算符
单目运算符 1 ++ -- !
双目运算符 2 + - * / %
三目运算符 3 ?:

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

算术运算符

假设 x = 10

运算符 描述 表达式 值(运算结果)
+ 加法 x+10 20
- 减法 x-10 0
* 乘法 x*10 100
/ 除法 x/10 1
% 取模(余数) x%10 0

自增运算符

自增运算符的功能:让变量自身的值加 1 .

自增表达式有两种形式:变量++ 或者 ++变量

假设 x = 10

表达式 功能描述 表达式的值 x 的值
x++ 先取值,后自增(先取的值作为整个表达式的值) 10 11
++x 先自增,后取值(后取的值作为整个表达式的值) 11 11

自减运算符

自减运算符的功能:让变量自身的值减 1 .

自减表达式有两种形式:变量-- 或者 --变量

表达式 功能描述 表达式的值 x 的值
x-- 先取值,后自减(先取的值作为整个表达式的值) 10 9
--x 先自减,后取值(后取的值作为整个表达式的值) 9 9

赋值运算符

赋值运算符用于给 JavaScript 变量赋值。

赋值运算符构成的表达式称为 赋值表达式,表达式的值:赋值号 ( = ) 左边变量被赋值之后的值 .

假设, x = 10

运算符 表达式 等同于 表达式的值
= x=10 10
+= x+=10 x=x+10 20
-= x-=10 x=x-10 0
*= x*=10 x=x*10 100
/= x/=10 x=x/10 1
%= x%=10 x=x%10 0

赋值运算符的左边(左操作数)必须是变量!

+ 运算符邂逅非数字值

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

+运算符是双目运算符,当左右两个操作数中至少有一个是字符串时,+号起到的作用是字符串连接(原理: js 会将非字符串数据转为字符串,然后连接成一个新字符串)。

数字+非字符串值,+号起到的作用依然是加法运算(原理:非字符串值会被转为数字,然后执行相加运算)。

关系运算符

关系运算符组成的表达式称为 关系表达式,如:表达式 1 < 表达式 2 . 其值只有两种情况: true 、 false 。

运算符 描述 表达式 表达式的值
< 小于 1<2 true
<= 小于等于 1<=2 true
> 大于 1>2 false
>= 大于等于 1>=2 false
== 等于 1==2 false
!= 不等于 1!=2 true
=== 全等 1===2 false
!== 不全等 1!==2 true

== 与 === 的区别:== 只比较左右两个操作数的值,===会比较左右两个操作数的值和类型(值和类型必须都相等)

关系表达式经常用在逻辑判断场合(比如和 if 配合使用),所以其值只会是布尔值(逻辑值)。

在实际使用中,注意 == 表示相等关系 = 表示赋值,千万注意清,别写错。

逻辑运算符

逻辑运算符组成的表达式称为 逻辑表达式,其值有以下区别。

逻辑与 && 表达式: 子表达式 1 && 子表达式 2

逻辑表达式 表达式的逻辑值
假 && 假
假 && 真
真 && 假
真 && 真

由上表可以得出结论,当至少有一个子表达式为假 结果就为假;当两个子表达式都为真 结果才为真 .

举个实际的栗子:

逻辑表达式 表达式的值
0 && null 0
0 && 1 0
1 && 0 0
1 && 2 2

这里需要提示一点,在 JavaScript 中 false 、 0 、 null 、 '' 、 undefined 、 NaN 都代表逻辑假,其他情况都是逻辑真。

从上表可以得出一个结论:从左往右第一个让整个表达式为假的子表达式的值作为整个表达式的值 ; 从左往右第一个让整个表达式为真的子表达式的值作为整个表达式的值;

逻辑与表达式有短路特性!!!(当第一个子表达式为假时,整个表达式的值一定为假,第二个子表达式就不会再执行(相当于被短路))。

逻辑或 || 表达式: 子表达式 1 || 子表达式 2

逻辑表达式 表达式的逻辑值
假 || 假
假 || 真
真 || 假
真 || 真

由上表可以得出结论,当至少有一个子表达式为真 结果就为真;当两个子表达式都为假 结果才为假 .

举个实际的栗子:

逻辑表达式 表达式的值
0 || null null
0 || 1 1
1 || 0 1
1 || 2 1

从上表可以得出一个结论:从左往右第一个让整个表达式为假的子表达式的值作为整个表达式的值 ; 从左往右第一个让整个表达式为真的子表达式的值作为整个表达式的值;

逻辑或表达式有短路特性!!!(当第一个子表达式为真时,整个表达式的值一定为真,第二个子表达式就不会再执行(相当于被短路))。

逻辑非 ! 表达式: !子表达式

逻辑表达式 表达式的逻辑值
!假
!真

由上表可以得出结论,整个表达式的逻辑值总是与子表达式的值相反 .

举个实际的栗子:

逻辑表达式 表达式的值
!0 true
!null true
!1 flase
!100 false

从上表可以得出一个结论:整个表达式的逻辑值总是与子表达式的值相反,并且结果只会是 true 或 false .

条件运算符(三目运算符)

?:是所有运算符中唯一的一个三目运算符,组成的表达式为:子表达式 1 ?子表达式 2 :子表达式 3

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

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

逗号运算符

,是所有运算符中优先级最低的运算符,组成的表达式为:子表达式 1 ,子表达式 2 ,子表达式 3 ,。。。

逗号表达式理论上可以由无数个子表达式构成,任两个子表达式之间用逗号分隔 .

运算逻辑:从左到右 依次计算每个子表达式,最后一个子表达式的值作为整个表达式的值。

var a = (1, 2, 3, 4, 5);  
var b = (1, 2, 3, 4, a++);
console.log(a);//6        
console.log(b);//5