JavaScript核心运算符详解：条件、逗号、赋值、圆括号与void

JavaScript运算符概述

前言

JavaScript语言中定义了46种运算符。在已介绍的算术、关系、位运算及逻辑运算之外，还存在多种重要运算符。本文将重点阐述条件运算符、逗号运算符、赋值运算符、圆括号运算符以及void运算符的具体用法与特性。

条件运算符（?:）详解

条件运算符

条件运算符是JavaScript中唯一的三元运算符（即包含三个操作数），常被称为“三元运算符”。其标准书写形式为“?:”。在实际代码中，该运算符由三个部分组成：第一个操作数位于“?”之前，第二个操作数位于“?”与“:”之间，第三个操作数位于“:”之后。

variable = boolean_expression ? true_value : false_value;

从本质上看，该运算符根据布尔表达式（boolean_expression）的求值结果，决定变量（variable）所赋的值。若布尔表达式求值为true，则变量被赋予true_value；若求值为false，则变量被赋予false_value。

条件运算符的三个操作数可以是任意数据类型。运算时，第一个操作数会被转换为布尔值进行判断：若为真值（truthy），则计算并返回第二个操作数的结果；若为假值（falsy），则计算并返回第三个操作数的结果。无论何种情况，第二个和第三个操作数中仅有一个会被执行计算，绝不会同时执行。

虽然使用if语句也能实现相同逻辑，但“?:”运算符提供了一种更为简洁的写法。一个典型的应用场景是判断变量是否已定义且具有有效真值：若变量存在则使用其值，否则使用默认值。

greeting = 'hello ' + (username ? username : 'there');

上述逻辑等价于使用if语句的代码，但显然三元表达式的写法更加简洁紧凑。

greeting = 'hello ';
if(username)
  greeting += username;
else
  greeting += 'there';

三元条件表达式与if...else语句在表达效果上是一致的，但二者存在一个关键区别：if...else属于语句（statement），没有返回值；而三元条件表达式属于表达式（expression），具有明确的返回值。因此，在需要返回值的上下文中，必须使用三元条件表达式，而不能使用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循环中利用逗号运算符同时初始化并更新两个变量i和j。

//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;

“=”运算符要求左操作数必须是一个左值（lvalue），即一个变量、对象属性或数组元素。右操作数可以是任意类型的任意值。整个赋值表达式的返回值即为右操作数的值。

尽管赋值表达式通常较为简单，但在复杂表达式中偶尔也会看到赋值操作与其他关系运算符混合使用的情况。

(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

由于圆括号的作用是求值，若将声明语句（如var语句）直接放在圆括号中，会引发语法错误，因为语句本身没有返回值。

console.log(var a = 1);// SyntaxError: Unexpected token var
console.log((var a = 1));// SyntaxError: Unexpected token var

void运算符的实际用途

void运算符

void是一个一元运算符，位于操作数之前。其操作数可以是任意类型，操作数会照常计算，但计算结果会被忽略，最终返回undefined。由于void会丢弃操作数的值，因此在操作数具有副作用时，使用void可以让代码语义更清晰。

console.log(void 0); // undefined
console.log(void(0)); // undefined

【作用一】替代undefined

由于undefined并非JavaScript的关键字，在IE8及更早版本的浏览器中它可能被重新赋值，在高版本浏览器的函数作用域中也可能被覆盖。因此，可以使用void 0来安全地替代undefined，确保获取到真正的undefined值。

var undefined = 10;
console.log(undefined);//IE8-浏览器下为10，高版本浏览器下为undefined

function t(){
  var undefined = 10;
  console.log(undefined);
}
console.log(t());//所有浏览器下都是10

【作用二】客户端URL处理

该运算符最常用于客户端JavaScript 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运算符的详细介绍，希望能为读者提供参考。