纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

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

  2020-05-15 我要评论

前面的话

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轮播图的效果怎样完成的呢?下面小编给大家分享基于基于JavaScript完成轮播图代码 十分不错感兴味的朋友能够参考下..
  • 由浅入深剖析Angular表单验证

    这篇文章主要引见了由浅入深分析Angular表单考证 的相关材料,需求的朋友能够参考下..

网友评论

Copyright 2020 www.Shellfishsoft.com 【贝软下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式