JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符


Posted in Javascript onOctober 11, 2012

在ECMAScript中,有非常丰富的运算符和操作符,在这篇文章中将按通常的分类来稍微整理一下,不过在整理之前,先说明一下:

1、虽然标题是运算符和操作符,然而在我看来并没有多少严格区分的必要,在英文中,貌似也是用一个Operator来表示,所以在下文中我可能会混用。甚至,一些不属于运算符和操作符范畴的,我也整理在这里,只要我觉得必要。

2、对于运算符的优先级,你无需一一牢记——我相信你知道最简单的”先乘除,后加减”,至于其它的,如果你不确定,加上括号好了。在ECMAScript中,优先级相同的从左向右运算。

3、对于一些编程语言通用的运算符,比如常用算术运算符(+-*/),我只会简单的列举一下,不会展开,但是请注意,并不是说这些不重要,相反,这些通用运算符甚至处于一个非常基础的地位,只是我觉得你应该早已经熟悉,没必要在这里花时间强调。

4、那么,这里重点关注什么呢?就是一些在ECMAScript中比较特殊的操作符,或者我认为值得花时间强调的一些地方。

运算符与操作符

类别 操作符  描述 说明
一元操作符 ++  自增1 1、自增(减)有前置和后置两种类型,前置先自增(减)再参与其它运算,后置先参与其它运算再自增(减)。 2、在ES中,自增(减)不仅适用于整数,它们可以作用于任意值,对于不是Number类型的值,会先按前一篇文章中的规则隐式转换为Number,然后再自增(减),此时变量类型也会变成Number类型。
--  自减1
+  一元加 一元加最主要的应用就是将操作数转变为Number类型,相当于调用Number()转换。 
-  一元减 一元减则是在一元加的基础之上再取其相反数。
算术操作符 +  加 1、除了加(+)之外,如果操作数不是Number类型,会自动调用Number()转换为Number类型再进行计算。 2、对于加减(+-),除了作为算术运算符。还可以作为一元操作符(见上)。当然,由于字符串操作中对加号(+)的重载,还可以用于将任意数值(的字符串)相连,这也是第1点中为什么要除了加(+),它在含有非Number类型值时,会将所有操作数转换为字符串相连接。 3、与一般类C语言不同,在ES中,除(/)和取模(%)并不会区分整数和浮点数,比如 5 / 2 = 2.5 而不是2,5.3 % 3 = 2.3 而不是2。 4、任意运算,只要操作数含NaN,结果就是NaN。但并不是结果为NaN就一定有一个操作数为NaN,比如0/0也返回NaN。 5、对于含无穷Infinity的运算,规定比较多,这里就不列举了,可以参考原书,或者自行测试。
-  减
*  乘
/  除
%  取模
逻辑操作符 (布尔操作符) !  逻辑非 首先将操作数转换为Boolean类型值,然后再取反。可以使用双重非!!将一个数值转换为相应的Boolean值。 
&&  逻辑与 1、当两个操作数相应的Boolean值均为true时,返回true 2、短路:当第一个操作数相应的Boolean值为false时,会直接返回false,不会再计算第二个操作数。这常常被应用在判断一个变量(属性)是否有定义,如:if(object && object.name && object.name = 'linjisong'){ } 这里会首先判断object存在,不存在的话就不会解析object.name从而阻止错误的发生,同样,也只有object.name存在,才会去比较这个值。
||  逻辑或 1、当两个操作数相应的Boolean值至少有一个为true时,返回true 2、短路:当第一个操作数相应的Boolean值为true时,会直接返回true,不会再计算第二个操作数。 3、逻辑或,除了用于一般的判断之外,还常常被应用在提供默认值的情况,如:function Fn(obj){ obj = obj || {};} 这里如果调用Fn未传入obj,则会自动给obj赋值为undefined,然后因为undefined的相应Boolean值为false,所以会将一个空对象{}赋值给obj,如果调用传入了obj,则因为任意对象的Boolean值为true,所以就不会取后面的{},从而达到给obj一个默认值{}的效果。 这种方式还被应用在大型JS库的多个相对独立的文件中://jsLibvar jsLib;//file1(function (jsLib){ jsLib = jsLib || {};})(jsLib); //file2(function (jsLib){ jsLib = jsLib || {}; })(jsLib); 使用这种方式,无论先加载哪个文件,都会判断jsLib是否已经定义,如果未定义就提供一个默认值,这样做可以使得相对独立模块可以不用考虑加载顺序。
关系操作符 (比较操作符)  小于 1、只要有一个操作数是Number类型或Boolean类型值,就将两个操作数转换成Number类型值(如果需要转换)执行数值比较。 2、字符串比较,会逐个比较字符编码值。 3、操作符是对象时,调用valueOf()(如果没有,就调用toString()),再将结果按上面规则比较。 4、任意数和NaN比较返回false。
 小于或等于
>  大于
>=  大于或等于
==  相等 1、相等和不等(==、!=)在比较时,只要有必要,就会隐式类型转换。 2、全等和不全等(===、!==)在比较时,不会转换类型,如果类型不一致,直接为!==。 3、结合1、2,可以知道,a===b则一定有a==b,而a!=b则一定有a!==b。
!=  不等
===  全等
!==  不全等
赋值操作符 =  赋值  
复合算术赋值操作符  算术运算符加= 对应算术运算符,有+=、-=、*=、/=、%= 
复合按位赋值操作符  按位运算符加= 对应按位运算符,有~=、&=、|=、^=、>=、>>>=
按位操作符 ~  按位非 按位取反,也即返回反码
&  按位与 按位对齐,逐位操作,只有两个操作位均为1才返回1,否则该位返回0,最后将所有位操作结果组合返回
|  按位或 按位对齐,逐位操作,只有两个操作位均为0才返回0,否则该位返回1,最后将所有位操作结果组合返回 
^  按位异或 按位对齐,逐位操作,两个操作位不相同时返回1,否则该位返回0,最后将所有位操作结果组合返回
 左移 二进制数向左移位,左移不会改变符号位 
>>  有符号右移 二进制数向右移位,高位以符合位填充 
>>>  无符号右移 二进制数向右移位,直接右移,对于正数,结果和>>相同,对于负数,会把负数的二进制补码当成正数的二进制码处理
字符串操作符 +  字符串连接 相当于concat()函数,会先将所有操作数转换为字符串,然后再连接。注意,字符串一旦创建就不会变更,执行字符串连接时,在后台会有一个中间的连接和销毁过程,这也是老旧浏览器在大量字符串连接操作时运行缓慢的原因。
+=  字符串连接复合 a+=b,相当于a=a+b。 
对象操作符 .  属性访问符 简单的对象属性访问符。
[]  属性或(类)数组访问 通过[],可以访问名称是一个变量或含有特殊字符的属性。
new  调用构造函数创建对象 返回一个新创建的对象,在构造函数内部的this被指向这个新创建的对象。
delete  变量、属性删除 删除属性(变量可以看成是全局对象或执行环境的一个属性)。
void   返回undefined。
in  判断属性 对象属性或原型链上的属性。
instanceof  原型判断 比较同一个上下文中的对象是否为另一个对象的原型。
其它操作符 ?:  条件操作符 语法;var value = exp ? trueExp : falseExp。 相当于var value; if(exp){ value = trueExp;}else{value = falseExp;}
,  逗号操作符 主要用于声明多个变量,这也是很多JS库的流行做法。例如:var num1=1,num2=2,num3=3;
()  分组操作符 主要用途: 1、结合逗号操作符用于赋值。例如:var num = (5,1,4,8,0);这里num最后的值为0。 2、转换为表达式。比如eval('('+jsStr+')');又比如:function fn(){}//函数声明,不能直接调用(function fn(){})();//使用()将函数括起来,便可以直接调用3、用于调用函数。比如fn();。
typeof  类型操作符 返回一个字符串值:Undefined类型—>'undefined'、Null类型—>'object'、Boolean类型—>'boolean'、Number类型—>‘number'、String—>'string'、内置Function对象的实例—>'function'、其它Object类型—>'object'。(有些浏览器实现略有不同)

说明几点:

1、这里的分类并不十分严格,比如按位非(~)、逻辑非(!)、delete、void、typeof,都可以算是一元操作符,而自增(++)在很多资料中也被归为算术操作符之中。我在整理时则主要参考原书分类,也兼顾自然性。

2、加号(+)的用法比较灵活,需注意,特别是用于计算时,忽略了其中的字符串,会很容易犯错误。

3、typeof一般用来判断简单数据类型,如果是对象类型,因为大部分返回的都是object,没有多大实际用处,而instanceof的判断也需要满足同一个上下文的条件,否则也会出错,对于对象类别的判断会在后面讲述对象时再详细说明另外一种更为稳妥的方法。

4、先看下面的代码:

var numVal = 10.00, 
strVal = '10', 
strObj = new String('10'); 
console.info(numVal == strVal);//true 
console.info(typeof (strVal+strObj));//string

第一个输出的竟然是true,是不是出乎你的意料?在这里,由于==比较符发生了隐式类型转换,会将Number类型转换为String类型,然后Number类型的10.00因为小数点后没有不是0的数值,会被解析成整数10,从而比较的时候会相等。第二个输出是string,这其实还是比较容易理解的,strVal是字符串,strObj是字符串对象,两者相加,会把对象转换成字符串,所以最终结果也是字符串类型。
5、关于符号,重复一下几个流行的用法(这里不涉及正则表达式中的用法):
(1)使用一元加号(+)转换为Number类型。
(2)使用双重逻辑非(!!)转换为Boolean类型。
(3)使用逻辑与(&&)来检测对象是否存在并进行后续操作。
(4)使用逻辑或(||)来给函数参数提供默认值。
(5)使用分组(())来明确指定为表达式。
(6)使用花括号({})来定义对象字面量,JSON数据格式,代码块。
(7)使用中括号([])来定义数组字面量,JSON数据格式,访问数组,访问名称是变量或特殊字符的属性。
6、关于按位运算,虽然结果不是很直观,但是运行效率高,也有很多有趣的应用,比如不使用中间变量直接交换两个数值、判断奇数和偶数、MD5加密等等,有兴趣的朋友可以找相关资料自行研究。
Javascript 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
javascript管中窥豹 形参与实参浅析
Dec 17 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
May 28 Javascript
jQuery 更改checkbox的状态,无效的解决方法
Jul 22 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
jQuery日程管理控件glDatePicker用法详解
Mar 29 jQuery
Angular 向组件传递模板的两种方法
Feb 23 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
JavaScript高级程序设计(第3版)学习笔记3 js简单数据类型
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 #Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 #Javascript
javascript测试题练习代码
Oct 10 #Javascript
jQuery插件开发全解析
Oct 10 #Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 #Javascript
关于jQuery UI 使用心得及技巧
Oct 10 #Javascript
You might like
php生成短网址示例
2014/05/05 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
PHP fastcgi模式上传大文件(大约有300多K)报错
2014/09/28 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
PHP附件下载中文名称乱码的解决方法
2015/12/17 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
图片完美缩放
2006/09/07 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
js实现统计字符串中特定字符出现个数的方法
2016/08/02 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
js css3实现图片拖拽效果
2017/03/04 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
2017/04/01 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
2018/04/23 jQuery
JavaScript门道之标准库
2018/05/26 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[29:59]完美世界DOTA2联赛PWL S3 Forest vs access 第二场 12.11
2020/12/13 DOTA
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
解决python3读取Python2存储的pickle文件问题
2018/10/25 Python
python使用插值法画出平滑曲线
2018/12/15 Python
不到40行代码用Python实现一个简单的推荐系统
2019/05/10 Python
python的faker库用法
2019/11/28 Python
在keras中model.fit_generator()和model.fit()的区别说明
2020/06/17 Python
如何基于Python爬虫爬取美团酒店信息
2020/11/03 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
携程英文网站:Trip.com
2017/02/07 全球购物
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
博士导师推荐信
2015/03/25 职场文书
Nginx实现会话保持的两种方式
2022/03/18 Servers
CSS 实现磨砂玻璃(毛玻璃)效果样式
2023/05/21 HTML / CSS