JavaScript - 运算符优先级

在 JavaScript 中，运算符优先级可确保在单个表达式包含多个运算符时执行运算符的优先级。因此，无论表达式具有较高的优先级，编译器都会先执行它，然后再执行其他运算符，然后执行优先级较低的运算符。

每当编写任何仅包含 1 或 2 个运算符的 JavaScript 表达式时，都可以轻松理解表达式的输出。但是，当表达式包含多个运算符时，您应该了解运算符优先级的概念才能正确计算表达式。

运算符优先级的最好例子是，在传统数学中，乘法运算符的优先级高于加法或减法运算符。因此，如果任何数学表达式都包含两个运算符的乘法和加法，则需要先执行乘法运算。

关联性

术语 ascociativity 是指编译器在计算表达式时应遵循的方向。在许多情况下，运算符具有相同的优先级。在这种情况下，编译器应首先执行哪个操作会产生歧义。因此，编译器需要结合性帮助。它可以是从左到右或从右到左。

例如，我们需要执行以下表达式。


 let res = 50/5*2;

将上述表达式视为（50/5） * 2 得到 20 作为输出。
像 50/ （5*2）这样的表达式求值，得到 5 作为结果值。

为了解决上述歧义，编译器使用 associativity 规则。除法和乘法运算符的结合性是从左到右。因此，它将表达式计算为（50 / 5） * 2。

赋值运算符具有从右到左的结合性。请考虑以下赋值表达式。


 P = q = 90;

在上面的表达式中，90 被分配给 q，q 变量的值被分配给 p。

简而言之，JavaScript 编译器根据运算符优先级计算表达式，当多个运算符具有相同的优先级时，它使用结合性规则。

运算符优先级表

下表包含运算符、其描述、关联性方向和一个简短示例。

运算符优先级	运算符	描述	关联性	示例
1	()	分组	L -> R	(expression)
2	.	对象成员	L -> R	Object_name.property
2	()	函数调用	L -> R	Demo()
2	new	创建对象	R -> L	New test()
2	[]	对象成员	L -> R	Object["property"]
3	--	后缀递减	-	p--;
3	++	后缀递增	-	p++
4	--	前缀递减	R -> L	--p;
4	++	前缀递增	R -> L	++p;
4	typeof	获取变量类型	R -> L	typeof a;
4	!	逻辑 not	R -> L	!a;
4	~	按位不	R -> L	~p
4	-	一元减号	R -> L	-p
4	+	一元加号	R -> L	+p
4	delete	删除对象属性	R -> L	Delete arr[0]
4	void	评估 void	R -> L	Void(1)
5	**	幂运算符	R -> L	p ** q
6	*	乘法	L -> R	p * q
6	/	除法	L -> R	p / q
6	%	模	L -> R	p % q
7	+	加号或加号运算符	L -> R	p + q
7	-	减法运算符	L -> R	p - q
8	<<	左移	L -> R	p << 2
8	>>	有符号右移	L -> R	p >> 2
8	>>>	无符号右移	L -> R	p >>> 2
9	in	object 中的属性	L -> R	x in y
9	instanceof	对象的实例	L -> R	p instanceof Object
9	<	小于	L -> R	p < q
9	<=	小于或等于	L -> R	p <= q
9	>	大于	L -> R	p > q
9	>=	大于或等于	L -> R	p >= q
10	==	等于	L -> R	p == q
10	!=	不等于	L -> R	p != q
10	===	严格相等	L -> R	p === q
10	!==	严格不相等	L -> R	p !== q
11	&	按位 AND	L -> R	p & q
12	^	按位 XOR	L -> R	p ^ q
13	\|	按位 OR	L -> R	p \| q
14	&&	逻辑 AND	L -> R	p && q
15	\|\|	逻辑 OR	L -> R	p \|\| q
16	??	Nullish 合并	R -> L	p ?? q
17	=	赋值	R -> L	p = q
17	:	冒号赋值	R -> L	p : q
17	+=	加法赋值	R -> L	p += q
17	-=	减法赋值	R -> L	p -= q
17	*=	乘法赋值	R -> L	p *= q
17	/=	除法赋值	R -> L	p /= q
17	%=	取余赋值	R -> L	p %= q
17	**=	幂赋值	R -> L	p **= q
17	<<=	左移分配	R -> L	p <<= q
17	>>=	右移分配	R -> L	p >>= q
17	>>>=	无符号右移赋值	R -> L	p >>>= q
17	&=	按位 AND 赋值	R -> L	p &= q
17	^=	按位 XOR 赋值	R -> L	p ^= q
17	\|=	按位 OR 赋值	R -> L	p \|= q
17	&&=	逻辑 AND 赋值	R -> L	p &&= q
17	\|\|=	逻辑 OR 赋值	R -> L	p \|\|= q
17	=>	箭头运算符	-	(a, b )=> { // function code}
17	…	Spread 运算符	-	[… arr]
18	yield	暂停/恢复	R -> L	yield p;
19	,	逗号运算符	L -> R	(10, 20, 30)

例子

让我们通过简单的示例来了解运算符的优先级。

例

在下面的示例中，第一个表达式包含具有相同优先级的除法、模数和乘法运算符。因此，编译器将使用结合性规则，该规则从左到右用于乘法、除法和模运算符。

因此，它将 30 除以 15，取（30/15）与 3 的模数，并将（（30/15）%3）与 2 相乘。

在第二个表达式中，幂运算符具有从右到左的结合性。因此，它计算的表达式与（2 *8 （3 ** 2））相同。


<html>
	 	<body>
	 	 	 <div id = "output"></div>
	 	 	 <script>
	 	 	 	 	const first = 30 / 15 % 3 * 2;
	 	 	 	 	const second = 2 ** 3 ** 2;
	 	 	 	 	document.getElementById("output").innerHTML =
	 	 	 	 	 	 "The value of first expression is : " + first + "<br>" +	
	 	 	 	 	 	 "The value of second expression is : " + second;
	 	 	 </script>
	 	</body>
</html>

输出

它将产生以下结果 -

The value of first expression is : 4
The value of second expression is : 512

例

此代码演示了您可以使用分组运算符（）来更改运算符优先级。在下面的代码中，我们采用了与上述代码相同的表达式，但我们更改了运算符的优先级。

在第一个表达式中，首先，我们取模并将结果值乘以 2。所以，我们得到 0 并将 30 除以 0，返回无穷大。

在第二个表达式中，第一个表达式计算（2 ** 3）和（8 ** 2），即等于 64。


<html>
	 	<body>
	 	 	 <div id = "output"></div>
	 	 	 <script>
	 	 	 	 	const first = 30 / ((15 % 3) * 2);
	 	 	 	 	const second = (2 ** 3) ** 2;
	 	 	 	 	document.getElementById("output").innerHTML =
	 	 	 	 	 	 "The value of first expression is : " + first + "<br>" +	
	 	 	 	 	 	 "The value of second expression is : " + second;
	 	 	 </script>
	 	</body>
</html>

输出

The value of first expression is : Infinity
The value of second expression is : 64

分组运算符可以更改任何运算符的运算符优先级，因为它具有最高的运算符优先级。

<< JavaScript - 幂运算符 JavaScript - if...else 语句 >>