详解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 31 Javascript
JS 分号引起的一段调试问题
Jun 18 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
Jun 05 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
js仿黑客帝国字母掉落效果代码分享
Nov 08 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
JS匿名函数类生成方式实例分析
Nov 26 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 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 中的str_replace 函数总结
2007/04/27 PHP
php图片验证码代码
2008/03/27 PHP
PHP UTF8编码内的繁简转换类
2009/07/20 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
jQuery中removeData()方法用法实例
2014/12/27 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
AngularJS表单和输入验证实例
2016/11/02 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
2017/03/02 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
详解使用vue-cli脚手架初始化Vue项目下的项目结构
2018/03/08 Javascript
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
jquery中attr、prop、data区别与用法分析
2019/09/25 jQuery
jQuery实现全选、反选和不选功能的方法详解
2019/12/04 jQuery
JavaScript对象属性操作实例解析
2020/02/04 Javascript
vue使用transition组件动画效果的实例代码
2021/01/28 Vue.js
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
详解Python开发中如何使用Hook技巧
2017/11/01 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
基于Pytorch SSD模型分析
2020/02/18 Python
Python实现分数序列求和
2020/02/25 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript
HTML5简单实现添加背景音乐的几种方法
2021/05/12 HTML / CSS
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers