JavaScript - 赋值运算符



JavaScript 赋值运算符

JavaScript 赋值运算符用于为变量赋值。这些是二元运算符。赋值运算符采用两个操作数,根据右操作数的值为左操作数分配一个值。左操作数始终是变量,右操作数可以是文字、变量或表达式。


let x = 10; // 右操作数是文字
let y = x; // 右操作数是一个变量
let z = x + 10; // 右操作数是一个表达式

赋值运算符首先计算表达式,然后将值分配给变量(左操作数)。

简单赋值运算符是等于 (=) 运算符。在 JavaScript 语句 “let x = 10;” 中,= 运算符将 10 分配给变量 x。

我们可以将简单的赋值运算符与其他类型的运算符(如算术逻辑等)组合在一起,得到复合赋值运算符。一些算术赋值运算符是 +=、-=、*=、/= 等。+= 运算符对操作数执行加法运算,并将结果分配给左侧操作数。

算术赋值运算符

在本节中,我们将介绍简单的赋值和算术赋值运算符。算术赋值运算符执行算术运算并将结果分配给变量。以下是带有示例的运算符列表 -

赋值运算符 示例 等效于
= (加法) a = b 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

简单赋值 (=) 运算符

简单的赋值 (=) 运算符为变量分配一个值。我们可以为多个变量分配单个值。这称为赋值链接。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 5;
	 	 let y = x + 10;	
	 	 document.getElementById("output").innerHTML =	
	 	 "Value of x : " + x + "<br>" +
	 	 "Value of y : " + y;
	 </script>
</body>
</html>

下面是一个赋值链接的示例 -


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = y = 5;
	 	 document.getElementById("output").innerHTML =	
	 	 "Value of x : " + x + "<br>" +
	 	 "Value of y : " + y;
	 </script>
</body>
</html>

加法赋值 (+=) 运算符

JavaScript 加法赋值运算符对两个操作数执行加法,并将结果分配给左操作数。这里的加法可以是数字加法或字符串连接。


 x += b;

在上面的语句中,它添加了 b 和 x 的值,并将结果分配给 x。

示例:数字加法赋值打开


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 5;
	 	 x += 7;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

示例:字符串串联赋值


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x ="Hello";
	 	 x += " World";
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

减法赋值 (-=) 运算符

JavaScript 中的减法赋值运算符从左操作数中减去右操作数的值,并将结果分配给左操作数(变量)。


 let x -=b;

在上面的语句中,它从 x 中减去 b 并将结果分配给 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 15;
	 	 x -= 5;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

乘法赋值 (*=) 运算符

JavaScript 中的乘法赋值运算符将两个操作数相乘,并将结果分配给左操作数。


 let x *= b;

在上面的语句中,它将 x 和 b 相乘,并将结果分配给 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 10;
		 	x *= 5;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

除法赋值 (/=) 运算符

此运算符将左操作数除以右操作数,并将结果分配给左操作数。


 let x /= b;

在上面的语句中,它将 x 除以 b 并将结果(商)分配给 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 10;
	 	 x /= 5;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

余数赋值 (%=) 运算符

JavaScript 余数赋值运算符对操作数执行余数运算,并将结果分配给左操作数。


 let x %= b;

在上面的语句中,它将 x 除以 b 并将结果(余数)分配给 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 12;
	 	 x %= 5;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

幂赋值 (**=) 运算符

此运算符对操作数执行幂运算,并将结果分配给左操作数。


 let x **= b;

在上面的语句中,它计算 x**b 并将结果分配给 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 5;
	 	 x **= 3;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

JavaScript 按位赋值运算符

按位赋值运算符对操作数执行按位运算,并将结果分配给变量。这些操作执行两个操作,第一个是按位运算,第二个是简单赋值运算。按位运算在位级别完成。按位运算符将两个操作数视为 32 位有符号整数,并对操作数的相应位执行运算。简单赋值运算符将 result is 分配给变量(左操作数)。

以下是带有示例的运算符列表 -

赋值运算符 示例 等效于
&= (按位 AND 赋值) a &= b a = a & b
|= (按位 OR 赋值) a |= b a = a | b
^= (按位 XOR 赋值) a ^= b a = a ^ b

按位 AND 赋值运算符

JavaScript 按位 AND 赋值 (&=) 运算符对操作数执行按位 AND 运算,并将结果分配给左操作数(变量)。


 let x &= b;

在上面的语句中,它对 x 和 b 执行按位 AND,并将结果分配给变量 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 7;	
	 	 x &= 5;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

按位 OR 赋值运算符

JavaScript 按位 OR 赋值 (|=) 运算符对操作数执行按位 OR 运算,并将结果分配给左操作数(变量)。


 let x |= b;

在上面的语句中,它对 x 和 b 执行按位 OR 并将结果分配给变量 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 7;	
	 	 x |= 5;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

按位 XOR 赋值运算符

JavaScript 按位 XOR 赋值 (^=) 运算符对操作数执行按位 XOR 运算,并将结果分配给左操作数(变量)。


 let x ^= b;

在上面的语句中,它对 x 和 b 执行按位 XOR 并将结果分配给变量 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 7;	
	 	 x ^= 5;
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

JavaScript Shift 赋值运算符

移位赋值运算符对操作数执行按位移位运算,并将结果分配给变量(左操作数)。这些是两个运算符的组合,第一个按位移位运算符,第二个是简单赋值运算符。

以下是带有示例的 shift 赋值运算符列表 -

赋值运算符 示例 等效于
<<= (左移赋值) a <<= b a = a << b
>>= (右移赋值) a >>= b a = a >> b
>>>= (无符号右移赋值) a >>>= b a = a >>> b

左移赋值运算符

JavaScript 左移赋值 (<<=) 运算符对操作数执行左移操作,并将结果分配给左操作数(变量)。


 let x <<= b;

在上面的语句中,它在 x 和 b 上执行左移并将结果分配给变量 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 7;	
	 	 x <<= 2;	
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

右移赋值运算符

JavaScript 右移赋值 (>>=) 运算符对操作数执行右移操作,并将结果分配给左操作数(变量)。


 let x >>= b;

在上面的语句中,它在 x 和 b 上执行右移并将结果分配给变量 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 7;	
		 	x >>= 1;	
	 	 document.getElementById("output").innerHTML = "Value of x : " + x;
	 </script>
</body>
</html>

无符号右移赋值运算符

JavaScript 无符号右移赋值 (>>>=) 运算符对操作数执行无符号右移操作,并将结果分配给左操作数(变量)。


 let x >>>= b;

在上面的语句中,它在 x 和 b 上执行无符号右移,并将结果分配给变量 x。


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 let x = 7;	
	 	 x >>>= 2;
	 	 document.getElementById("output").innerHTML ="Value of x : " + x;
	 </script>
</body>
</html>

JavaScript 逻辑赋值运算符

在 JavaScript 中,逻辑赋值运算符对操作数执行逻辑运算,并将结果分配给变量(左操作数)。每个逻辑赋值运算符都是两个运算符的组合,第一个逻辑运算符和第二个逻辑运算符是简单赋值运算符。

以下是带有示例的逻辑赋值运算符的列表 -

赋值运算符 示例 等效于
&&= (逻辑 AND 赋值) a &&= b a = a && b
||= (逻辑 OR 赋值) a ||= b a = a || b
??= (Nullish 合并赋值) a ??= b a = a ?? b


<html>
<body>
	 <div id="output"></div>
	 <script>
	 	 var a = 5;
	 	 var b = 10;
	 	 var result = (a &&= b);
	 	 document.getElementById("output").innerHTML =	
		 	"Value of (a &&= b) => " + result + "<br/>";
	 	 result = (a ||= b);
	 	 document.getElementById("output").innerHTML +=
		 	"Value of (a ||= b) => " + result;
	 </script>
</body>
</html>