浅谈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 相关文章推荐
js表数据排序 sort table data
Feb 18 Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
js如何判断用户是否是用微信浏览器
Jun 05 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
May 04 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
老生常谈 js中this的指向
Jun 30 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
node实现mock-plugin中间件的方法
Dec 25 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
Apr 13 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
phpfans留言版用到的install.php
2007/01/04 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
[原创]php正则删除html代码中class样式属性的方法
2017/05/24 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
jQuery JSON的解析方式分享
2011/04/05 Javascript
Js如何判断客户端是PC还是手持设备简单分析
2012/11/22 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
2013/11/13 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
JQuery实现Ajax加载图片的方法
2015/12/24 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
js实现各浏览器全屏代码实例
2018/07/03 Javascript
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
分享Python文本生成二维码实例
2016/01/06 Python
python实现微信自动回复功能
2018/04/11 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
NumPy 数组使用大全
2019/04/25 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
python 实现图片上传接口开发 并生成可以访问的图片url
2019/12/18 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
毕业证丢失证明
2014/01/15 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
小学运动会入场式解说词
2014/02/18 职场文书