浅谈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 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
JQuery与Ajax调用新浪API获取短网址的代码
Feb 07 Javascript
Jquery简单实现GridView行高亮的方法
Jun 15 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
vue.js 微信支付前端代码分享
Feb 10 Javascript
详解如何在Vue项目中导出Excel
Apr 19 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
Sep 26 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
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
php实现ping
2006/10/09 PHP
php下尝试使用GraphicsMagick的缩略图功能
2011/01/01 PHP
dedecms集成财付通支付接口
2014/12/28 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
php封装一个异常的处理类
2017/06/08 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
jquery实现一个简单好用的弹出框
2014/09/26 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[38:21]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS LGD-CDEC
2014/05/22 DOTA
python脚本实现分析dns日志并对受访域名排行
2014/09/18 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
docker-py 用Python调用Docker接口的方法
2019/08/30 Python
Python3获取cookie常用三种方案
2020/10/05 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
印度最大的酒店品牌网络:OYO Rooms
2016/07/24 全球购物
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
Shell如何接收变量输入
2012/09/24 面试题
英语自我评价范文
2014/01/24 职场文书
教师简历自我评价
2014/02/03 职场文书
同事吵架检讨书
2014/02/05 职场文书
初三学习决心书
2014/03/11 职场文书
家长会主持词
2014/03/26 职场文书
书香校园建设方案
2014/05/02 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript