浅谈javascript运算符——条件,逗号,赋值,()和void运算符


Posted in Javascript onJuly 15, 2016

前面的话

javascript中运算符总共有46个,除了前面已经介绍过的算术运算符、关系运算符、位运算符、逻辑运算符之外,还有很多运算符。本文将介绍条件运算符、逗号运算符、赋值运算符、()和void运算符

条件运算符  

条件运算符是javascript中唯一的一个三元运算符(三个操作数),有时直接称做'三元运算符'。通常这个运算符写成'?:',当然在代码中往往不会这么简写,因为这个运算符拥有三个操作数,第一个操作数在'?'之前,第二个操作数在'?'和':'之间,第三个操作数在':'之后

variable = boolean_expression ? true_value : false_value;

本质上,这就是基于对boolean_expression求值的结果,决定给变量variable赋什么值。如果求值结果是true,则给变量variable赋值true_value;如果求值结果是false,则给变量variable赋值false_value

条件运算符的操作数可以是任意类型,第一个操作数当成布尔值,如果它是真值,那么将计算第二个操作数,并返回其计算结果。否则,如果第一个操作数是假值,那么将计算第三个操作数,并返回其计算结果。第二个和第三个操作数总是会计算其中之一,不可能两者同时执行

其实使用if语句也会带来同样的效果,'?:'运算符只是提供了一种简写形式。这里是一个'?:'的典型应用场景,判断一个变量是否有定义(并拥有一个有意义的真值),如果有定义则使用它,如果无定义则使用一个默认值:

greeting = 'hello ' + (username ? username : 'there');

这和下面使用if语句的代码是等价的,但显然上面的代码更加简洁:

greeting = 'hello ';
if(username)
  greeting += username;
else
  greeting += 'there';

三元条件表达式与if...else语句具有同样表达效果,但是两者具有一个重大差别,if...else是语句,没有返回值;三元条件表达式是表达式,具有返回值。所以,在需要返回值的场合,只能使用三元条件表达式,而不能使用if...else

console.log(true ? 'T' : 'F');

上面代码中,console.log方法的参数必须是一个表达式,这时就只能使用三元条件表达式

逗号运算符

逗号运算符是二元运算符,它的操作数可以是任意类型。它首先计算左操作数,然后计算右操作数,最后返回右操作数的值,用逗号运算符可以在一条语句中执行多个运算

i = 0,j = 1,k = 2;
//计算结果是2,它和下面的代码基本等价
i =0; j = 1; k = 2;

逗号运算符常用于声明多个变量

var iNum1 = 1, iNum = 2, iNum3 = 3;

逗号运算符最常用的场景是在for循环中,这个for循环通常具有多个循环变量:

//for循环中的第一个逗号是var语句的一部分
//第二个逗号是逗号运算符
//它将两个表达式(i++和j--)放在一条语句中
for(var i=0, j=10;i<j;i++,j--){console.log(i+j);}

逗号运算符还可以用于赋值,在用于赋值时,逗号运算符总是返回表达式中的最后一项

var num = (1,2,3,4,5);
console.log(num);//5

[注意]去掉括号会报错

赋值运算符  

简单的赋值操作符由等号'='表示,作用把等号右边的值赋予等号左边的变量或属性

i = o;
o.x = 1;

'='运算符希望它的左操作数是一个左值:一个变量或者对象属性(或数组元素)。它的右操作数可以是任意类型的任意值。赋值表达式的值就是右操作数的值

尽管赋值表达式通常非常简单,但有时仍会看到一些复杂表达式包含赋值表达式的情况。例如,可以将赋值和关系操作符放在一个表达式中,就像这样:

(a=b) == 0

如果这样做的话,应该清楚知道'='和'=='运算符之间的区别。'='具有非常低的优先级,通常在一个较长的表达式中用到了一条赋值语句的值时的时候,需要补充圆括号以保证正确的运算顺序

赋值操作符的结合性是从右到左,也就是说,如果一个表达式中出现了多个赋值运算符,运算顺序是从右到左。因此,可以通过如下方式来对多个变量赋值:

i = j = k = 0;//把三个变量初始化为0

JavaScript还提供11个复合的赋值运算符,这些复合的赋值运算符,都是先进行指定运算,然后将得到值返回给左边的变量

[注意]设计这些操作符的目的是简化赋值操作,使用它们并不会带来任何性能的提升

total += sales_tax;
//等价于
total = total + sales_tax;
运算符   示例    等价于
+=     a+=b    a=a+b
-=     a-=b    a=a-b
*=     a*=b    a=a*b
/=     a/=b    a=a/b
%=     a%=b    a=a%b
<<=    a<<=b   a=a<<b
>>=    a>>=b   a=a>>b
>>>=    a>>>=b   a=a>>>b
&=     a&=b    a=a&b
|=     a|=b    a=a|b
^=     a^=b    a=a^b

在大多数情况下,表达式为:

a op= b

这里op代表一个运算符,这个表达式和下面的表达式等价

a = a op b

在第一行中,表达式a计算了一次,在第二行中,表达式a计算了两次,只有在a包含具有副作用的表达式(比如函数调用和赋值操作)的时候,两者才不等价

data[i++]*=2;
data[i++] = data[i++]*2;

圆括号运算符  

圆括号运算符有两种用法:如果表达式放在圆括号中,作用是求值;如果跟在函数后面,作用是调用函数

把表达式放在圆括号之中,将返回表达式的值

console.log((1)); //1
console.log(('a')); //'a'
console.log((1+2)); // 3

把对象放在圆括号之中,则会返回对象的值,即对象本身

var o = {p:1};
console.log((o));// Object {p: 1}

将函数放在圆括号中,会返回函数本身。如果圆括号紧跟在函数的后面,就表示调用函数,即对函数求值

function f(){return 1;}
console.log((f));// function f(){return 1;}
console.log(f()); // 1

由于圆括号的作用是求值,如果将语句放在圆括号之中,就会报错,因为语句没有返回值

console.log(var a = 1);// SyntaxError: Unexpected token var
console.log((var a = 1));// SyntaxError: Unexpected token var

void运算符

void是一元运算符,它出现在操作数之前,操作数可以是任意类型,操作数会照常计算,但忽略计算结果并返回undefined。由于void会忽略操作数的值,因此在操作数具有副作用的时候使用void来让程序更具语义

console.log(void 0); // undefined
console.log(void(0)); // undefined

【作用一】替代undefined

由于undefined并不是一个关键字,其在IE8-浏览器中会被重写,在高版本函数作用域中也会被重写;所以可以用void 0 来替换undefined

var undefined = 10;
console.log(undefined);//IE8-浏览器下为10,高版本浏览器下为undefined

function t(){
  var undefined = 10;
  console.log(undefined);
}
console.log(t());//所有浏览器下都是10

【作用二】客户端URL

这个运算符最常用在客户端URL——javascript:URL中,在URL中可以写带有副作用的表达式,而void则让浏览器不必显示这个表达式的计算结果。例如,经常在HTML代码中的<a>标签里使用void运算符

<a href="javascript:void window.open();">打开一个新窗口</a>

【作用三】阻止默认事件 

阻止默认事件的方式是给事件置返回值false

//一般写法
<a href="http://example.com" onclick="f();return false;">文字</a>

使用void运算符可以取代上面写法

<a href="javascript:void(f())">文字</a>

以上这篇浅谈javascript运算符——条件,逗号,赋值,()和void运算符就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 支持链式调用的异步调用框架Async.Operation
Aug 04 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
mongodb初始化并使用node.js实现mongodb操作封装方法
Apr 02 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
JavaScript计算器网页版实现代码分享
Jul 15 #Javascript
js实现楼层效果的简单实例
Jul 15 #Javascript
基于JavaScript实现轮播图代码
Jul 14 #Javascript
js轮播图代码分享
Jul 14 #Javascript
jQuery中deferred对象使用方法详解
Jul 14 #Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 #Javascript
基于jQuery的ajax方法封装
Jul 14 #Javascript
You might like
编译问题
2006/10/09 PHP
PHP中的正则表达式函数介绍
2012/02/27 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
js 居中漂浮广告
2010/03/21 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
2016/11/20 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
Vue系列:通过vue-router如何传递参数示例
2017/01/16 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
2017/04/20 Javascript
Angular.js自动化测试之protractor详解
2017/07/07 Javascript
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
改进 JavaScript 和 Rust 的互操作性并深入认识 wasm-bindgen 组件
2019/07/13 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
[04:09]2018年度DOTA2社区贡献奖-完美盛典
2018/12/16 DOTA
python的常见命令注入威胁
2013/02/18 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python Matplotlib 基于networkx画关系网络图
2019/07/10 Python
Python 中@property的用法详解
2020/01/15 Python
python实现简单的tcp 文件下载
2020/09/16 Python
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
The North Face北面荷兰官网:美国著名户外品牌
2019/10/16 全球购物
湖南卫视在线视频媒体平台:芒果TV
2019/10/30 全球购物
毕业生找工作的自我评价
2013/10/18 职场文书
生物科学专业个人求职信范文
2013/12/05 职场文书
小学学校门卫岗位职责
2014/08/03 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书