5、表达式与运算符

目录

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

1. 运算符

  JavaScript拥有如下类型的运算符。

  赋值运算符

  比较运算符

  算术运算符

  位运算符

  逻辑运算符

  字符串运算符

  条件运算符

  逗号运算符

  一元运算符

  关系运算符

1.1 赋值运算符

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

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

1.1.1 解构

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

javascript 复制代码
let foo = ["1", "2", "3"];

let [one, two, three] = foo;
console.log(one, two, three);

1.2 比较运算符

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

javascript 复制代码
let var1 = 3;
let var2 = 4;
运算符 描述 返回true的示例
等于== 如果两边操作数相等时返回true 3 == var1 "3" == var1 3 == '3'
不等于!= 如果两边操作数不相等时返回true var1 != 4 var2 != "3"
全等=== 两边操作数相等且类型相同时返回true 3 === var1
不全等!== 两边操作数不相等或类型不同时返回true var1 !== "3" 3 !== '3'
大于> 左边的操作数大于右边的操作数返回true var2 > var1 "12" > 2
大于等于>= 左边的操作数大于或等于右边的操作数返回true var2 >= var1 var1 >= 3
小于< 左边的操作数小于右边的操作数返回true var1 < var2 "2" < 12
小于等于<= 左边的操作数小于或等于右边的操作数返回true var1 <= var2 var2 <= 5

1.3 算术运算符

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

javascript 复制代码
1 / 2; // 0.5
1 / 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^exponent 2 ** 3返回8.10 ** -1返回0.1

1.4 位运算符

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

  下表总结了JavaScript的位运算符。

操作符 用法 描述
按位与AND a & b 在a,b的位表示中,每一个对应的位都为1则返回1,否则返回0
按位或OR a | b 在a,b的位表示中,每一个对应的位,只要有一个为1则返回1,否则返回0
按位异或XOR a ^ b 在a,b的位表示中,每一个对应的位,两个不相同则返回1,否则返回0
按位非NOT ~ a 反转被操作数的位
左移shift a << 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 & 9 9 1111 & 1001 = 1001
15 | 9 15 1111 | 1001 = 1111
15 ^ 9 6 1111 ^ 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。

javascript 复制代码
let a1 = true && true; // t && t returns true
let a2 = true && false; // t && f returns false
let a3 = false && true; // f && t returns false
let a4 = false && 3 == 4; // f && f returns false
let a5 = "Cat" && "Dog"; // t && t returns Dog
let a6 = false && "Cat"; // f && t returns false
let a7 = "Cat" && false; // t && f returns false
javascript 复制代码
let o1 = true || true; // t || t returns true
let o2 = false || true; // f || t returns true
let o3 = true || false; // t || f returns true
let o4 = false || 3 == 4; // f || f returns false
let o5 = "Cat" || "Dog"; // t || t returns Cat
let o6 = false || "Cat"; // f || t returns Cat
let o7 = "Cat" || false; // t || f returns Cat
javascript 复制代码
let n1 = !true; // !t returns false
let n2 = !false; // !f returns true
let n3 = !"Cat"; // !t returns false
1.4.3.1 短路求值

  作为逻辑表达式进行求值是从左到右,它们是为可能的短路的出现而使用以下规则进行测试:

  false && anything // 被短路求值为false

  true || anything // 被短路求值为true

  逻辑的规则,保证这些评估总是正确的。上述表达式的anything部分不会被求值,所以这样做不会产生任何副作用。

1.5 字符串运算符

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

javascript 复制代码
console.log("my " + "string");

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

javascript 复制代码
let myString = "alpha";
myString += "bet";
console.log(myString);

1.6 条件运算符

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

javascript 复制代码
条件 ? 值1 : 值2

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

javascript 复制代码
let age = 19;
let status = age >= 18 ? "adult" : "minor";
console.log(status);

1.7 逗号操作符

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

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

例如,假如 a 是一个二维数组,每个维度各有 10 个元素,以下代码利用逗号操作符来同时改变两个变量的值。这段代码的功能是打印出该二维数组的对角线元素的值:

js

复制
var x = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
var a = [x, x, x, x, x];
// i++, j++这个逗号才是逗号操作符
for (var i = 0, j = 9; i <= j; i++, j--)
  console.log("a[" + i + "][" + j + "]= " + a[i][j]);

1.8 一元操作符

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

1.8.1 delete

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

javascript 复制代码
delete objectName.property;
delete objectName[index];
delete property;

  objectName是一个对象名,property是一个已经存在的属性,index是数组中的一个已经存在的键值的索引值。

  第三行的形式只在with声明的状态下是合法的,从对象中删除一个属性。

  你能使用delete删除各种各样的隐式声明,但是被var声明的除外。

  如果delete操作成功,属性或者元素会变成undefined。如果delete可行会返回true,否则返回false。

javascript 复制代码
x = 42;
var y = 43;
myobj = new Number();
myobj.h = 4;
delete x; // true
delete y; // false
delete Math.PI; // false
delete myobj.h; // true
delete myobj; // true
1.8.1.1 删除数组元素

  删除数组中的元素时,数组的长度是不变的,例如删除a3,a4,a4和a3仍然存在变成了undefined。

  delete删除数组中的一个元素,这个元素就不在数组中了。

javascript 复制代码
let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
delete trees[3];
if (3 in trees) {
	// 不会被执行
}

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

javascript 复制代码
let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
tree[3] = undefined;
if (3 in trees) {
	// 会被执行
}

1.8.2 typeof

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

javascript 复制代码
typeof operand
typeof (operand);

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

javascript 复制代码
let myFun = new Function("5 + 2");
let shape = "round";
let size = 1;
let today = new Date();
typeof myFunc; // function
typeof shape; // string
typeof size; // number
typeof today; // object
typeof dontExist; // undefined
typeof true; // boolean
typeof null; // object
typeof document.lastModified; // string
typeof window.length; // number
typeof Math.LN2; // number

1.8.3 void

  void运算符运用方法如下。

javascript 复制代码
void expression;
void (expression);

  void运算符,表明一个运算没有返回值。expression是JavaScript表达式,括号中的表达式是一个可选项,当然使用该方式是一种好的形式。

  你可以使用void运算符指明一个超文本链接。该表达式是有效的,但是并不会在当前文档中进行加载。

javascript 复制代码
<a href="javascript:void(0)">Click here to do nothing</a>
javascript 复制代码
<a href="javascript:void(document.form.submit())">Click here to submit</a>

1.9 关系运算符

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

1.9.1 in

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

javascript 复制代码
propNameOrNumber in objectName;

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

javascript 复制代码
let trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees; // true
3 in trees; // true
6 in trees; // false
"bay" in trees; // false
"length" in trees; // true 属性
"PI" in Math; // true
let myString = new String("coral");
"length" in myString; // true
let mycar = { make: "Honda", model: "Accord", year: 1998 };
"make" in mycar; // true
"model" in mycar; // true

1.9.2 instanceof

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

javascript 复制代码
objectName instanceof objectType;

  objectName是需要做判别的对象的名称,而objectType是假定的对象的类型。

  当你需要确认一个对象在运行时的类型时,可使用instanceof。例如,需要catch异常时,你可以针对抛出异常的类型,来做不同的异常处理。

javascript 复制代码
let theDay = new Date(1995, 12, 17);
if (theDay instanceof Date) {
	//
}

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指代的是方法中正在被调用的对象。

javascript 复制代码
this["propertyName"];
this.propertyName;

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

javascript 复制代码
function validate(obj, lowval, hival) {
	if (obj.value < lowval || obj.value > hival)
		console.log("Invalid Value!");
}

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

html 复制代码
<p>Enter a number between 18 and 99;</p>
<input type="text" name="age" size="3" onChange="validate(this, 18, 99);" />

2.1.2 分组操作符

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

javascript 复制代码
let a = 1;
let b = 2;
let c = 3;

// 默认优先级
a + b * c; // 7
// 现在使加法优先于乘法
(a + b) * c; // 9

2.2 左值表达式

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

2.2.1 new

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

javascript 复制代码
// []表示可选
let objectName = new objectType([param1, param2, ..., paramN]);

2.2.2 super

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

javascript 复制代码
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

相关推荐
怕浪猫1 小时前
2026年金九银十,我面了22个前端
前端·javascript·面试
前端的日常1 小时前
一个人+AI做情侣食谱小程序,30天纯赚
前端·javascript·后端
qq_316837752 小时前
阿里云百炼 fun-asr-realtime uniapp vue3 调用
javascript·vue.js·uni-app
默_笙2 小时前
🚊 别再让 AI 的记忆写两遍了:PostgreSQL 把关系查询和语义检索装进一张表
前端·javascript
lzhdim2 小时前
C#不为人知的10个魔法特性:资深开发者也会震惊的底层奥秘
java·前端·javascript·算法·c#
只睡四小时4 小时前
JS 手写 D-pad 空间导航:电视端焦点引擎实战
android·开发语言·前端·javascript·ecmascript·hls·空间导航
喵个咪6 小时前
GoWind Admin|风行 — 开箱即用的企业级全栈中后台框架:脚本系统实战
javascript·后端·go
樱花落木兰6 小时前
SpringBoot + ECharts 后台数据统计报表模块实战
java·javascript·spring boot·ai·log4j·github·echarts
愛芳芳6 小时前
element-plus+vite+vue3+pinpa+mock+typeScript搭建经典的电商管理后台
前端·javascript·typescript
事圆则缓7 小时前
Flutter 状态管理框架对比(三):Riverpod 如何连起购物车与异步价格
开发语言·javascript·flutter