详解JavaScript的表达式与运算符


Posted in Javascript onNovember 30, 2015

       JavaScript脚本语言描述了一组用于操作数据值的运算符,包括一元运算符,布尔运算符,算术运算符,关系运算符,三元运算符,位运算符和赋值运算符。
       表达式是JavaScript语言的一个“短语”,包含变量名(或字面量)和运算符。最简单的表达式时字面量或变量名。当然也有合并简单的表达式来创建复杂的表达式。
一、一元运算符
(1)递增++和递减--

var box1=100; 
++box1;//相当于box=box+1 
document.write("box1="+box1+"<br/>");//输出box1=101 
var box2=100; 
--box2;//相当于box=box2-1 
document.write("box2="+box2);//输出box2=99

前置和后置的区别

var box=100; 
var age=++box;//box先累加1为101,再赋值给age为101 
var height=box++;//box先赋值给height为101,box再累加为102 
document.write("age="+age+"<br/>");//输出age=101 
document.write("height="+height+"<br/>");//输出height=101 
document.write("box="+box);//输出box=102,原因是box经过了两次累加,所以是102

       在没有赋值操作,前置和后置是一样的。但在赋值操作时,如果递增或递减运算符前置,那么前置的运算符会先累加或累减再赋值,如果是后置运算符则先赋值再累加或累减。
(2)加和减运算符
用于取正或取负运算,也有把数字字符串转换为数值形式的功能。

var box = "20"; 
document.write(typeof box+"<br/>"); //输出string 
var age=-box; 
document.write(age+"<br/>");//输出-20 
document.write(typeof age); //输出number

二、算术运算符
       JavaScript语言中规定了五种算术运算符,即+,-,*,/和%(取余)。如果在算术运算符的值不是数值,那么它会先使用Number()转型函数将其转换为数值(隐式转换)。

var box=100+"100"; 
document.write("box="+box+"<br/>");//输出100100 
document.write(typeof box);//输出string

       这是为什么呢?JavaScript语言中的做算术运算时,只要其中一个是字符串,那么结果就会转换为字符串。相当于字符串连接符,不能再算作是加法算术运算符。

var box="100"-10; 
document.write("box="+box+"<br/>");//输出90 
var age=5/4; 
document.write("age="+age+"<br/>");//输出1.25 
var height=("你的年龄是:"+(10+10));//括号强制优先级 
document.write(height);//输出你的年龄是:20

       取余

var box=10%3; 
document.write("box="+box);//输出1

三、关系运算符
       用于进行比较的运算符称作为关系运算符:<(小于),>(大于),<=(小于等于),>=(大于等于),==(相对),!=(不等),===(恒等或全等),!==(不全等或不恒等)。关系运算符大多数返回的是一个布尔值。
       和其他运算符一样,当关系运算符操作非数值时要遵循以下规则:
       1两个操作符都是数值,则数值比较
       2两个操作数都是字符串,则比较两个字符串对应的字符编码值
       3两个操作数有一个是数值,则将另一个转换为数值,在进行数值比较
       4两个操作数有一个是对象,则先调用value()方法或toString()方法,再用结果比较。

var box1=3>2; 
document.write(box1+"<br/>");//输出true 
var box2="3">22; 
document.write(box2+"<br/>");//输出false 
var box3="3">"22"; 
document.write(box3+"<br/>");//输出true 
var box4="a">"B";//a为97,B为66 
document.write(box4+"<br/>");//输出true 
var box5= "Blue"<"alpha";//Blue的第一个字母是B,alpha的第一个字母是a,a为97,B为66 
document.write(box5) //输出true

       在相等和不等的比较上,如果操作数是非数值,则遵循以下规则:
       1一个操作数是布尔值,则比较之前将其转换为数值,false转成0,true转成1。
       2一个操作数是字符串,则比较之前将其转成为数值再比较。
       3一个操作数是对象,则先调用value()方法或toString()方法再比较。
       4不需要任何转换的情况下,null和undefined是相等的
       5一个操作数是NaN,则==返回false,!=返回true,并且NaN和自身不等
       6两个操作数都是对象,则比较它们是否是同一个对象,如果都指向同一个对象,则返回true,否则返回false
       7在全等和全不等的判断上,比如值和类型都相等,才返回true,否则返回fasle。

var box1='2'==2; 
document.write(box1+"<br/>");//输出true,比较的只是数值 
var box2={}=={}; 
document.write(box2+"<br/>");//输出false,因为比较的是它们的地址,每个新创建对象的引用地址都不同。 
var box3=null==undefined; 
document.write(box3+"<br/>");//输出true,因为均为空数值 
var box4='2'===2; 
document.write(box4+"<br/>");//输出false,两个操作数的数据类型不相等 
var box5=null===undefined; 
document.write(box5);//输出false,两个操作数的数据类型不相等

四逻辑运算符
       JavaScript语言中的逻辑运算符通常作用于布尔值的操作,一般和关系运算符配合使用,有三个逻辑运算符:&&(逻辑与),||(逻辑或)和!(逻辑非)。
       (1)&&表示两边都必须是true,才返回true。
       如果两边的操作数有一个操作数不是布尔值的情况下,与运算就不一定返回布尔值,此时遵循下面的规则:
       1第一个操作数是对象,则返回第二个操作数
       2第二操作数是对象,则第一个操作数返回true,才返回第二个操作数,否则返回false
       3一个操作数是null,则返回null
       4一个操作数是undefined,则返回undefined
       5如果一个运算数是对象,另一个是 Boolean 值,返回该对象
      逻辑与运算符属于短路操作,如果有第一个操作数返回的是false,第二个不管是true还是false都返回false。

var box1={}&&(5>4); 
document.write(box1+"<br/>");//输出true 
var box2=(5>4)&&{}; 
document.write(box2+"<br/>");//输出[object Object] 
var box3=(3>4)&&{}; 
document.write(box3);//输出false

      (2)||表示两边有一个是true,就返回true。
      如果两边的操作数有一个操作数不是布尔值的情况下,与运算就不一定返回布尔值,此时遵循下面的规则:
      1第一个操作数是对象,则返回第一个个操作数
      2第一个操作数的求值结果为fasle,则返回第二个操作数
      3两个操作数都是对象,则返回第一个操作数
      4两个操作数都是null,则返回null
      5两个操作数都是undefined,则返回undefined
      6两个操作数都是NaN,则返回NaN
      逻辑或运算符也属于短路操作,如果有第一个操作数返回的是true,第二个不管是true还是false都返回true。

var box1={}||(5>4); 
document.write(box1+"<br/>");//输出[object Object] 
var box2=(5>4)||{}; 
document.write(box2+"<br/>");//输出true 
var box3=(3>4)||{}; 
document.write(box3);//输出[object Object]

      (3)!逻辑非运算符可以作用与任何值,无论这个值是什么数据类型,这个运算符都会返回一个布尔值,它的流程是:先将这个值转换成布尔值,然后取反,规则如下:
      1操作数是一个对象,返回false
      2操作数是一个空字符串,返回true
      3操作数是一个非空字符串,返回false
      4操作数是数值0,返回true
      5操作数是任意非0数值,返回false
      6操作数是null,返回true
      7操作数是NaN,返回true
      8操作数是undefined,返回true

var box=!{}; 
document.write(box);//输出false

五、位运算符
      JavaScript语言中包括了七种位运算符:~(位非),&(位与),|(位或),^(位异或),<<(左移),>>(有符右移号),>>>(无符号右移)
       (1)位非(~)运算把运算数转换成32位数字,然后把二进制数转换成它的二进制反码,最后把二进制数转换成浮点数。实质上是对数字求负,然后减去1即为所得值。

var box=~25; 
document.write(box);//输出-26

       (2)位与(&)运算直接对数字的二进制形式进行运算,然后对上下同一位置的两个数位进行与运算,只有两个数位都为1时才得出1,其余的均为0.

var box=25&3; 
document.write(box);//输出1

       (3)位或(|)运算也是直接对数字的二进制形式进行计算,然后对上下同一位置的两个数位进行或运算,只右两个数位都为0时才得出0,其余的均为1.

var box=25|3; 
document.write(box);//输出27

       (4)位异或(^)也是直接对二进制形式进行运算。当只有一个数位存放的是1时,它才返回1。其余的返回0。也就是两个数位相同时返回0,不同时返回1.

var box=25^3; 
document.write(box);//输出26

       (5)左移运算也是对二进制数进行操作,相等于第一个操作数乘以(2的左移位数次幂)的积。

var box=25<<3; 
document.write(box);//25左移3位相当于25乘以(2的3次幂),因此输出200

        (6)有符号右移运算也是对二进制数进行操作,相等于第一个操作数除以(2的右移位数次幂)的商。

var box=24>>2; 
document.write(box);//输出6

       (7)无符号右移运算也是对二进制数进行操作,对于正数,与有符号右移是相同的结果,但是对于负数,就会所不同。
     

六、赋值运算符
      赋值运算符包括:=(),+=(),-=(),*=(),/=(),%=(),<<=(),>>=(),>>>=()。

var box=100; 
box+=100;//相当于box=box+100 
document.write("box="+box);//输出box=200

七、其他运算符
1)、字符串运算符:“+”,它的作用是将两个字符串想加。规则:只要有一个字符串即可。

var box=100+"10"'; 
document.write("box="+box);//输出100100

2)、逗号运算符,可以在一条语句中执行多个操作

var box=100,age=200,height=300; 
document.write("box="+box);//输出box=100

3)、三元操作符:

var box=(3>4)?"对":"错"; 
document.write(box);//输出错

      如果想更详细的了解ECMAScript运算符的知识,可以访问JavaScript高级教程中的ECMASscript一元运算符这个系列中有详细的运算符教程。对于JS的运算符来说,我们可以对比着C++,C#和Java来学,这个还是相当的容易的。

以上就是关于JavaScript的表达式与运算符的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
javascript 图片上一张下一张链接效果代码
Mar 12 Javascript
JQuery获取样式中的background-color颜色值的问题
Aug 20 Javascript
仿百度的关键词匹配搜索示例
Sep 25 Javascript
javascript中with()方法的语法格式及使用
Aug 04 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
12行javascript代码绘制一个八卦图
Apr 02 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
Mar 09 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
node.js中事件触发器events的使用方法实例分析
Nov 23 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 Javascript
Bootstrap每天必学之进度条
Nov 30 #Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 #Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 #Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
Nov 29 #Javascript
整理Javascript流程控制语句学习笔记
Nov 29 #Javascript
基于javascript代码实现通过点击图片显示原图片
Nov 29 #Javascript
整理Javascript数组学习笔记
Nov 29 #Javascript
You might like
php实现的漂亮分页方法
2014/04/17 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
php上传excel表格并获取数据
2017/04/27 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
Javascript 中 null、NaN和undefined的区别总结
2013/04/10 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
2014/04/12 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
2016/05/15 Javascript
jQuery tip提示插件(实例分享)
2017/04/28 jQuery
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
2019/12/11 Javascript
vue-router为激活的路由设置样式操作
2020/07/18 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
python模块restful使用方法实例
2013/12/10 Python
Python 字典与字符串的互转实例
2017/01/13 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python学生信息管理系统(初级版)
2018/10/17 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
python实现五子棋人机对战游戏
2020/03/25 Python
Django 重写用户模型的实现
2019/07/29 Python
简单了解python元组tuple相关原理
2019/12/02 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
会计岗位职责
2013/11/08 职场文书
北体毕业生求职信
2014/02/28 职场文书
党的群众路线教育实践活动动员会主持词
2014/03/20 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
银行党员批评与自我批评
2014/10/15 职场文书
goland 恢复已更改文件的操作
2021/04/28 Golang
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang