JavaScript运算符概述

课后整理 2020-12-9

JavaScript定义了47个运算符,列表比较说明可以点击了解

另有4个存在争议的运算符,本书没有收入JavaScript运算符列表之中。简单说明如下,它们具有多重功能,在不同环境中可能会执行不同的操作。而且它们拥有更高的优先级(15级)。

操作个数

一般情况下,运算符与操作数配合才能使用。其中运算符指定执行运算的方式,操作数提供运算的内容。例如,1加1等于2,用表达式表示就是“n=1+1”,其中1是被操作的数,符号“+”表示两个值相加的运算,符号“=”表示赋值运算,n表示接受赋值的变量。

不同运算符需要配合的操作数的个数不同,可以分为三类。

操作类型

运算符操作的值不是随意的,大部分都有类型限制。例如,加减乘除四则运算要求参与的操作数必须是数值,逻辑运算要求参与的操作数必须是布尔值。另外,每个运算符执行运算之后,都会有明确的返回类型。

提示,JavaScript能够根据运算环境自动转换操作数的类型,以便完成运算任务。

【示例1】在下面代码中,两个操作数都是字符串,于是JavaScript自动把它们转换为数字,并执行减法运算,返回数字结果。

console.log("10"-"20");                             //返回-10

在下面代码中,数字0本是数值类型,JavaScript会把它转换为布尔值false,然后再执行条件运算。

console.log(0?1:2);                                    //返回2

在下面代码中,字符串5被转换为数字,然后参与大小比较运算,并返回布尔值。

console.log(3>"5");                                   //返回false

在下面代码中,数字5被转换为字符编码,参与字符串的顺序比较运算。

console.log("a">5);                                   //返回false

在下面代码中,加号运算符能够根据数据类型执行相加或者相连运算。

console.log(10+20);                                   //返回30

console.log("10"+"20");                             //返回"1020"

在下面代码中,布尔值true被转换为数字1参与乘法运算,并返回值为5。

console.log(true*"5");                                //返回5

3  运算符的优先级

运算符的优先级决定执行运算的顺序。例如,1+2*3结果是7,而不是9,因为乘法优先级高,虽然加号位于左侧。

注意,使用小括号可以改变运算符的优先顺序。例如,(1+2)*3结果是9,而不再是7。

【示例2】在下面代码中,第2行与第3行返回结果相同,但是它们运算顺序是不同的。第2行先计算5减2,再乘以2,最后赋值给变量n,并显示变量n的值;而第3行先计算5减2,再把结果赋值给变量n,最后变量n乘以2,并显示两者所乘结果。

console.log(n=5-2*2);                                //返回1
console.log(n=(5-2)*2);                             //返回6
console.log((n=5-2)*2);                             //返回6

注意,不正确使用也会引发异常。

console.log((1+n=5-2)*2);                         //返回异常 

在上面代码中,加号运算符优先级高,先执行运算,但是此时的变量n还是一个未知数,所以就抛出异常。

4  运算符的结合性

一元运算符、三元运算符和赋值运算符都遵循先右后左的顺序进行结合并运算。

【示例3】在下面代码中,右侧的typeof 运算符先与数字5结合,运算结果是字符串“number”,然后左侧的typeof 运算符再与返回的字符串“number”结合,运算结果是字符串“string”。

console.log(typeof typeof 5);                      //返回"string "

其运算顺序使用小括号来表示如下。

console.log(typeof (typeof 5));                   //返回"string "

对于下面表达式,左侧加号先结合,1+2等于3,然后3再与右侧加号结合,3+3等于6,继续6与右侧加号结合,6+4等于10,,最后返回结果。

1+2+3+4                                                  //返回10

其运算顺序使用小括号来表示如下。

((1+2)+3)+4                                             //返回10

左值、赋值及其副作用

左值就是只能够出现在赋值运算符左侧的值,在JavaScript中主要指变量、对象的属性、数组的元素。

运算符一般不会对操作数本身产生影响。例如,a = b + c,其中的操作数b和c不会因为加法运算而导致自身的值发生变化。但是具有赋值功能的运算符能够改变操作数的值,进而潜在干扰程序的运行状态,并可能对后面的运算带来影响,因此具有一定的副作用,使用时应该保持警惕。具体说明如下:

【示例4】在下面代码中,变量a经过赋值运算和递加运算后,其值发生了两次变化。

var a = 0;
a++;
console.log(a);                                          //返回1

【示例5】在下面代码中,变量a在参与运算的过程中,其值不断被改写,很显然这个过程干扰了程序的正常运行结果。

var a = 1;
a = (a++)+(++a)-(a++)-(++a);
console.log(a);                         //返回-4  
 

拆解(a++)+(++a)-(a++)-(++a)表达式如下。

b = a++;                                                   // a先赋1给b,再递加变为2
c = ++a;                                                   // a先递加变为3,再赋3给c
d = a++;                                                   // a赋3给d,再递加变为4
e = ++a;                                                   // a先递加变为5,再赋5给e
console.log(b+c-d-e);                                 //返回-4

注意,从可读性考虑,在一个表达式中最好不要对同一个操作数执行两次或多次赋值运算。

【示例6】下面代码由于每个操作数仅执行了一次赋值运算,所以不会引发歧义,也不会干扰后续运算。

a = (b++)+(++c)-(d++)-(++e);
console.log(a);                                          //返回-4