浅谈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中的some()方法使用详解
Jun 09 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
JavaScript知识点整理
Dec 09 Javascript
全面理解JavaScript中的闭包
May 12 Javascript
解决前端跨域问题方案汇总
Nov 20 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
vue上传图片组件编写代码
Jul 26 Javascript
React Native 环境搭建的教程
Aug 19 Javascript
vue写一个组件
Apr 09 Javascript
js 将多个对象合并成一个对象 assign方法的实现
Sep 24 Javascript
Vue如何实现组件间通信
May 15 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
构建简单的Webmail系统
2006/10/09 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
JavaScript中的prototype使用说明
2010/04/13 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
JavaScript定时器详解及实例
2013/08/01 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
2018/12/05 Javascript
详解Vue+ElementUI从零开始搭建自己的网站(一、环境搭建)
2019/04/30 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
Vue 3.x+axios跨域方案的踩坑指南
2019/07/04 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
Python实现的生成格雷码功能示例
2018/01/24 Python
对python 调用类属性的方法详解
2019/07/02 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
Python学习笔记之函数的参数和返回值的使用
2019/11/20 Python
Python数据可视化处理库PyEcharts柱状图,饼图,线性图,词云图常用实例详解
2020/02/10 Python
Python3操作YAML文件格式方法解析
2020/04/10 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
关于python tushare Tkinter构建的简单股票可视化查询系统(Beta v0.13)
2020/10/19 Python
Muziker英国:中欧最大的音乐家商店
2020/02/05 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
广州某公司软件工程师面试题
2014/12/22 面试题
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
给实习单位的感谢信
2014/02/01 职场文书
“四风”问题整改措施和努力方向
2014/09/20 职场文书