散人研Blog
不学无术的前端工程师

JavaScript | 深入理解JS条件、逗号、赋值、()、void运算符

条件运算符

条件运算符是JavaScript中惟一的的三元运算符(操作三个数的运算符),因此也被直接叫做三元运算符。

variable = boolean_expression ? true_value :false_value;

条件运算符就是基于对boolean_expression进行运算,当返回值是true时,将true_value赋值给variable,当返回值是false时,将false_value赋值给variable。

实际上,三元运算符可以看成 if 语句的一种简写形式,当判断条件为真时,将true_value赋值给variable,反之将false_value赋值给variable。下面是一个典型的三元运算符使用场景,当变量username有值时将username赋值给qreeting,当变量没有值时,将默认值’user’赋值给qreeting。

qreeting = username ? username : 'user';

逗号运算符

逗号运算符是二元运算符,它的操作数可以是任意类型的。他首先计算左操作数,然后计算右操作数,最后返回(最)右操作数的值,用逗号运算符可以在一条语句中执行多个运算(在一行声明多个变量,并为其赋值)。

var i=0,j=1,q=2;

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

for(var i=0,j=1,k=2;if i<1,j<1,k<3;i++,i++,k++){
  console.log(i+j+k);
}

逗号运算符的另一个使用场景是用于赋值,逗号运算符总是返回表达式中的最后一项。

var i = (1,2,3,4); //此处必须带括号,否则会报错
console.log(i); //4

赋值运算符

赋值运算符用’=’表示,用于将等号右边的值赋给等号左面的变量或属性。

var i = 5; //为变量赋值
Obj.name = 'sanrenyan'; //为对象属性赋值

赋值运算符看似简单,但偶尔会遇到让你意想不到的写法, 如下:

(a=b) == 0

要知道=的优先级非常低,因此需要用小括号包起来,此时==的左面的将b的值赋给a(赋值操作符的结合性是从右到左),然后再用a和0进行比较,返回Boolen值。

上面提到赋值运算符的结合性是从右到左,也就是说,如果一个表达式中出现了多个赋值运算符,运算顺序就是从右到左,因此,可以通过如下方法把多个变量同时(赋值)初始化为0:

i = j = k = 0;

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

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

运算符      示例        等价于
+=         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

圆括号运算符

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

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

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

注意:圆括号运算符不能为空,否则会报错

();//SyntaxError: Unexpected token )

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

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()来替代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://baidu.com" onclick="f();return false;">文字</a>

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

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

【作用四】阻止函数声明提升

在使用立即执行的函数表达式时,可以利用 void 运算符让 JavaScript 引擎把一个function关键字识别成函数表达式而不是函数声明(语句)。

void function iife() {
    var bar = function () {};
    var baz = function () {};
    var foo = function () {
        bar();
        baz();
     };
    var biz = function () {};

    foo();
    biz();
}();
赞(0) 打赏
未经允许不得转载:散人研Blog » JavaScript | 深入理解JS条件、逗号、赋值、()、void运算符
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

只要五角钱,我就可以买一包辣条!

支付宝扫一扫打赏

微信扫一扫打赏