5、表达式与运算符
2026/9/10 23:57:13 网站建设 项目流程

目录

  • 1. 运算符
    • 1.1 赋值运算符
      • 1.1.1 解构
    • 1.2 比较运算符
    • 1.3 算术运算符
    • 1.4 位运算符
      • 1.4.1 位逻辑运算符
      • 1.4.2 移位运算符
      • 1.4.3 逻辑运算符
        • 1.4.3.1 短路求值
    • 1.5 字符串运算符
    • 1.6 条件运算符
    • 1.7 逗号操作符
    • 1.8 一元操作符
      • 1.8.1 delete
        • 1.8.1.1 删除数组元素
      • 1.8.2 typeof
      • 1.8.3 void
    • 1.9 关系运算符
      • 1.9.1 in
      • 1.9.2 instanceof
    • 1.10 运算符优先级
  • 2. 表达式
    • 2.1 基本表达式
      • 2.1.1 this
      • 2.1.2 分组操作符
    • 2.2 左值表达式
      • 2.2.1 new
      • 2.2.2 super
  • 参考
  • 待了解

1. 运算符

JavaScript拥有如下类型的运算符。
赋值运算符
比较运算符
算术运算符
位运算符
逻辑运算符
字符串运算符
条件运算符
逗号运算符
一元运算符
关系运算符

1.1 赋值运算符

赋值运算符将它右边操作数的值赋给它左边的操作数。最简单的赋值运算符是=,它将右边的操作数值赋给左边的操作数。x = y就是将y的值赋给x。

名字简写的运算符含义
赋值x = yx = y
加法赋值x += yx = x + y
减法赋值x -= yx = x - y
乘法赋值x *= yx = x * y
除法赋值x /= yx = x / y
求余赋值x %= yx = x % y
求幂赋值x **= yx = x ** y
左移位赋值x <<= yx = x << y
右移位赋值x >>=yx = x >> y
无符号右移位赋值x >>>= yx = x >>> y
按位与赋值x &= yx = x & y
按位异或赋值x ^= yx = x ^ y
按位或赋值x |= yx = x | y
逻辑与赋值(x为真时赋值)x &&= f()x && (x = f())
逻辑或赋值(x为假时赋值)x ||= f()x || (x = f())
逻辑空赋值(x为空值时赋值)x ??= f()x ?? (x = f())

1.1.1 解构

对于更复杂的赋值,解构语法时一个能从数组或对象对应的数组结构或对象字面量里提取数据的JavaScript表达式。

letfoo=["1","2","3"];let[one,two,three]=foo;console.log(one,two,three);

1.2 比较运算符

比较运算符比较它的操作数并返回一个基于表达式是否为真的逻辑值。操作数可以是数字,字符串,逻辑,对象值。字符串比较是基于标准的字典顺序,使用Unicode值。在多数情况下,如果两个操作数不是相同的类型,JavaScript会尝试转换它们为恰当的类型来比较。这种行为通常发生在数字作为操作数的比较。类型转换的例外是===和!==操作,它们会执行严格的相等和不相等比较。这些运算符不会在检查相等之前转换操作数的类型。

letvar1=3;letvar2=4;
运算符描述返回true的示例
等于==如果两边操作数相等时返回true3 == var1
“3” == var1
3 == ‘3’
不等于!=如果两边操作数不相等时返回truevar1 != 4
var2 != “3”
全等===两边操作数相等且类型相同时返回true3 === var1
不全等!==两边操作数不相等或类型不同时返回truevar1 !== “3”
3 !== ‘3’
大于>左边的操作数大于右边的操作数返回truevar2 > var1
“12” > 2
大于等于>=左边的操作数大于或等于右边的操作数返回truevar2 >= var1
var1 >= 3
小于<左边的操作数小于右边的操作数返回truevar1 < var2
“2” < 12
小于等于<=左边的操作数小于或等于右边的操作数返回truevar1 <= var2
var2 <= 5

1.3 算术运算符

算术运算符使用数值(字面量或者变量)作为操作数并返回一个数值。标准的算术运算符就是加减乘除。当操作数是浮点数时,这些运算符表现得跟它们在大多数编程语言中一样(特殊要注意的是,除零会产生Infinity)。

1/2;// 0.51/2==1.0/2.0;// true

除了加减乘除之外,JavaScript还提供了下表中的算术运算符。

运算符描述示例
求余%二元运算符。返回相除之后的余数12 % 5返回2
自增++一元运算符。将操作数的值加一。如果放在操作数前面++x,则返回加一后的值;如果放在操作数后面x++,则返回操作数原值,然后再将操作数加一var x = 3;
console.log(++x); // 4
console.log(x); // 4
var y = 3;
console.log(y++); // 3
console.log(y); // 4
自减–一元运算符。将操作数的值减一。前后缀两种用法的返回值类似自增运算符var x = 3;
console.log(–x); // 2, x = 2
var y = 3;
console.log(y–); // 3, y = 2
一元负值符-一元运算符,返回操作数的负值var x = 3;
console.log(-x); // -3
一元正值符+一元运算符,如果操作数在之前不是数值,试图将其转换为数值console.log( +‘3’ ); // 3
console.log( ‘3’ ); // ‘3’
console.log( +true ); // 1
指数运算符**计算底数base的指数exponent次方,表示为base^exponent2 ** 3返回8.10 ** -1返回0.1

1.4 位运算符

位运算符将它的操作数视为32位元的二进制串而非十进制八进制或十六进制。例如:十进制数字9用二进制表示为1001,位运算符就是在这个二进制表示上执行运算,但是返回结果是标准的JavaScript数值。
下表总结了JavaScript的位运算符。

操作符用法描述
按位与ANDa & b在a,b的位表示中,每一个对应的位都为1则返回1,否则返回0
按位或ORa | b在a,b的位表示中,每一个对应的位,只要有一个为1则返回1,否则返回0
按位异或XORa ^ b在a,b的位表示中,每一个对应的位,两个不相同则返回1,否则返回0
按位非NOT~ a反转被操作数的位
左移shifta << b将a的二进制串向左移动b位,右边移入0
算术右移a >> b把a的二进制表示向右移动b位,丢弃被移出的所有位(算术右移左边空出的位是根据最高位是0和1进行填充的)
无符号右移(左边空出位用0填充)a >>> b把a的二进制表示向右移动b位,丢弃被移出的所有位,并把左边空出的位都填充为0

1.4.1 位逻辑运算符

概念上来讲,位逻辑运算符工作流程如下:
操作数被转换为32bit整数,以位序列(0和1组成)表示。若超过32bits,则取低位32bit,如下所示:

Before: 11100110111110100000000000000110000000000001 After: 10100000000000000110000000000001

第一个操作数的每一位都与第二位操作数的对应位组对:第一位对应第一位,第二位对应第二位,以此类推。
运算符被应用到每一对"位"上,最终的运算结果由每一对"位"的运算结果组合起来。
例如,十进制9的二进制表示是1001,十进制数15的二进制表示是1111。因此,当位运算符应用到这两个值时,结果如下:

表达式结果二进制描述
15 & 991111 & 1001 = 1001
15 | 9151111 | 1001 = 1111
15 ^ 961111 ^ 1001 = 0110
~15-16~0000 0000 … 0000 1111 = 1111 1111 … 1111 0000
~9-10~0000 0000 … 0000 1001 = 1111 1111 … 1111 0110

注意位运算符非将所有的32位取反,而至的最高位位1则表示负数(2-补码表示法:对补码表示取反后最低位加1)。

1.4.2 移位运算符

移位运算符带两个操作数:第一个是待移位的数,第二个是指定第一个数要被移多少位的数。移位的方向由运算符来控制。
移位运算符把操作数转为32bit整数,然后得出一个与待移位数相同种类的值。

运算符描述示例
<<将第一个操作数向左移动指定数量的位。左边移出位被抛弃。左边多出的空位由0补齐9 << 2产生36,1001移位2比特变为100100=36
>>将第一个操作数向右移动指定数量的位。右边移出位被抛弃。左边多出的空位由原值的最左边数字补齐9 >> 2产生2,1001移位2位向右变为10=2。-9 >> 2,1111 1111 … 0111移位两位向右变为1111 1111 … 1101=-3
>>>将一个操作数向右移动指定数量的位。右边移出位被抛弃。左边多出的空位由0补齐19>>>2产生4,10011移位2位向右变为00100=4。对非负数值,补零右移和带符号右移产生相同结果。

1.4.3 逻辑运算符

逻辑运算符常用于布尔逻辑值之间;当操作数都是布尔值时,返回值也是布尔值。不过实际上&&和||返回的是一个特定的操作数的值,所以当它用于非布尔值的时候,返回值就可能是非布尔值。逻辑运算符的描述如下。

运算符范例描述
逻辑与&&expr1 && expr2如果expr1能被转换为false,那么返回expr1,否则返回expr2。因此,&&用于布尔值时,当操作数都为true返回true,否则返回false
逻辑或||expr1 || expr2如果expr1能被转换为true,那么返回expr1,否则返回expr2。因此,||用于布尔值时,当任何一个操作数为true则返回true,如果操作数都是false则返回false
逻辑非!!expr如果操作数能够转换为true则返回false,否则返回true

能被转换为false的值有null,0,NaN,空字符串""和undefined。

leta1=true&&true;// t && t returns trueleta2=true&&false;// t && f returns falseleta3=false&&true;// f && t returns falseleta4=false&&3==4;// f && f returns falseleta5="Cat"&&"Dog";// t && t returns Dogleta6=false&&"Cat";// f && t returns falseleta7="Cat"&&false;// t && f returns false
leto1=true||true;// t || t returns trueleto2=false||true;// f || t returns trueleto3=true||false;// t || f returns trueleto4=false||3==4;// f || f returns falseleto5="Cat"||"Dog";// t || t returns Catleto6=false||"Cat";// f || t returns Catleto7="Cat"||false;// t || f returns Cat
letn1=!true;// !t returns falseletn2=!false;// !f returns trueletn3=!"Cat";// !t returns false
1.4.3.1 短路求值

作为逻辑表达式进行求值是从左到右,它们是为可能的短路的出现而使用以下规则进行测试:
false && anything // 被短路求值为false
true || anything // 被短路求值为true
逻辑的规则,保证这些评估总是正确的。上述表达式的anything部分不会被求值,所以这样做不会产生任何副作用。

1.5 字符串运算符

除了比较运算符,它可以在字符串值中使用,连接操作符+连接两个字符串值相连接,返回另一个字符串,它是两个操作数串的结合。

console.log("my "+"string");


简写操作符+=也可以用来拼接字符串。

letmyString="alpha";myString+="bet";console.log(myString);

1.6 条件运算符

条件运算符是JavaScript中唯一需要三个操作数的运算符。运算的结果根据跟定条件在两个值中取其一。

条件?1:2

如果条件为真,则结果取值1,否则取值2。你能够在任何允许使用标准运算符的地方使用条件运算符。

letage=19;letstatus=age>=18?"adult":"minor";console.log(status);

1.7 逗号操作符

逗号操作符,对两个操作数进行求值并返回最终操作数的值。它常常用在for循环中,在每次循环时对多个变量进行更行。

逗号操作符(,)对两个操作数进行求值并返回最终操作数的值。它常常用在for循环中,在每次循环时对多个变量进行更新。 例如,假如 a 是一个二维数组,每个维度各有10个元素,以下代码利用逗号操作符来同时改变两个变量的值。这段代码的功能是打印出该二维数组的对角线元素的值: js 复制varx=[0,1,2,3,4,5,6,7,8,9];vara=[x,x,x,x,x];// i++, j++这个逗号才是逗号操作符for(vari=0,j=9;i<=j;i++,j--)console.log("a["+i+"]["+j+"]= "+a[i][j]);

1.8 一元操作符

一元操作符仅对应一个操作数。

1.8.1 delete

delete操作符,删除一个对象的属性或者一个数组中某一个键值。

deleteobjectName.property;deleteobjectName[index];deleteproperty;

objectName是一个对象名,property是一个已经存在的属性,index是数组中的一个已经存在的键值的索引值。
第三行的形式只在with声明的状态下是合法的,从对象中删除一个属性。
你能使用delete删除各种各样的隐式声明,但是被var声明的除外。
如果delete操作成功,属性或者元素会变成undefined。如果delete可行会返回true,否则返回false。

x=42;vary=43;myobj=newNumber();myobj.h=4;deletex;// truedeletey;// falsedeleteMath.PI;// falsedeletemyobj.h;// truedeletemyobj;// true
1.8.1.1 删除数组元素

删除数组中的元素时,数组的长度是不变的,例如删除a[3],a[4],a[4]和a[3]仍然存在变成了undefined。
delete删除数组中的一个元素,这个元素就不在数组中了。

lettrees=newArray("redwood","bay","cedar","oak","maple");deletetrees[3];if(3intrees){// 不会被执行}

如果想让数组中存在一个元素但是是undefined值,使用undefined关键字而不是delete操作。

lettrees=newArray("redwood","bay","cedar","oak","maple");tree[3]=undefined;if(3intrees){// 会被执行}

1.8.2 typeof

typeof操作符可通过下面2种方式使用。

typeofoperandtypeof(operand);

typeof操作符返回一个表示operand类型的字符串值。operand可为字符串、变量、关键词或对象,其类型将被返回。operand两侧的括号为可选。

letmyFun=newFunction("5 + 2");letshape="round";letsize=1;lettoday=newDate();typeofmyFunc;// functiontypeofshape;// stringtypeofsize;// numbertypeoftoday;// objecttypeofdontExist;// undefinedtypeoftrue;// booleantypeofnull;// objecttypeofdocument.lastModified;// stringtypeofwindow.length;// numbertypeofMath.LN2;// number

1.8.3 void

void运算符运用方法如下。

voidexpression;void(expression);

void运算符,表明一个运算没有返回值。expression是JavaScript表达式,括号中的表达式是一个可选项,当然使用该方式是一种好的形式。
你可以使用void运算符指明一个超文本链接。该表达式是有效的,但是并不会在当前文档中进行加载。

<a href="javascript:void(0)">Click here todonothing</a>
<a href="javascript:void(document.form.submit())">Click here to submit</a>

1.9 关系运算符

关系运算符对操作数进行比较,根据比较结果真或假,返回相应的布尔值。

1.9.1 in

in操作符,如果所指定的属性确实存在于所指定的对象中,则会返回true。

propNameOrNumberinobjectName;

propNameOrNumber可以是一个代表着属性名的字符串或者一个代表着数组索引的数值表达式,objectName是一个对象名。

lettrees=newArray("redwood","bay","cedar","oak","maple");0intrees;// true3intrees;// true6intrees;// false"bay"intrees;// false"length"intrees;// true 属性"PI"inMath;// trueletmyString=newString("coral");"length"inmyString;// trueletmycar={make:"Honda",model:"Accord",year:1998};"make"inmycar;// true"model"inmycar;// true

1.9.2 instanceof

如果所判别的对象确实是所指定的类型,则返回true。

objectNameinstanceofobjectType;

objectName是需要做判别的对象的名称,而objectType是假定的对象的类型。
当你需要确认一个对象在运行时的类型时,可使用instanceof。例如,需要catch异常时,你可以针对抛出异常的类型,来做不同的异常处理。

lettheDay=newDate(1995,12,17);if(theDayinstanceofDate){//}

1.10 运算符优先级

运算符的优先级,用于确定一个表达式的计算顺序。在你不能确定优先级时,可以通过使用括号显示声明运算符的优先级。
下表列出了操作符的优先级,从高到低。
. []
() new
! ~ - + ++ – typeof void delete
* / %
+ -
<< >> >>>
< <= > >= in instanceof
== != === !==
&
^
|
&&
||
?:
= += --= *= /= %= <<= >>= >>>= &= ^= |=
,

2. 表达式

表达式是一组代码的集合,它返回一个值。
每一个合法的表达式都能计算成某个值,但从概念上讲,有两种类型的表达式:有副作用的和单纯计算求值的。
表达式x=7是第一类型的一个例子。该表达式使用=运算符将值7赋予变量x。这个表达式自己的值等于7。
表达式3 + 4是第二个表达式类型的一个例子。该表达式使用+运算符把3和4加到一起但并没有把结果7赋值给一个变量。
JavaScript有以下表达式类型:
算术:得出一个数字。
字符串:得出一个字符串。
逻辑值:得出true或者false。
基本表达式:javascript中基本的关键字和一般表达式。
左值表达式:分配给左值。

2.1 基本表达式

2.1.1 this

this关键字被用于指代当前的对象,通常,this指代的是方法中正在被调用的对象。

this["propertyName"];this.propertyName;

假设一个用于验证对象value属性的validate函数,传参有对象,最高值和最低值。

functionvalidate(obj,lowval,hival){if(obj.value<lowval||obj.value>hival)console.log("Invalid Value!");}

你可以在任何表单元素的onchange事件处理中调用validate函数,用this来指代当前的表单元素。

<p>Enter a number between 18 and 99;</p><inputtype="text"name="age"size="3"onChange="validate(this,18,99);"/>

2.1.2 分组操作符

分组操作符()控制了表达式中计算的优先级。

leta=1;letb=2;letc=3;// 默认优先级a+b*c;// 7// 现在使加法优先于乘法(a+b)*c;// 9

2.2 左值表达式

左值可以作为赋值的目标。

2.2.1 new

你可以使用new运算符创建一个自定义类型或者预设类型的对象实例。

// []表示可选letobjectName=newobjectType([param1,param2,...,paramN]);

2.2.2 super

super关键字可以用来调用一个对象父类的函数,它在用来调用一个类的父类的构造函数时非常有用。

super([arguments]);super.functionOnParent([arguments]);

参考

1、表达式与运算符

待了解

1、赋值
2、加法赋值
3、减法赋值
4、乘法赋值
5、除法赋值
6、求余赋值
7、求幂赋值
8、左移位赋值
9、右移位赋值
10、无符号右移位赋值
11、按位与赋值
12、按位异或赋值
13、按位或赋值
14、逻辑与赋值
15、逻辑或赋值
16、逻辑空赋值
17、解构
18、delete
19、typeof
20、in
21、this

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询