1. 首页
  2. JavaScript 菜鸟教程
  3. JavaScript - 赋值运算符

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>
<< JavaScript - 按位运算符 JavaScript - 条件运算符 >>