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 位有符号整数，并对操作数的相应位执行运算。简单赋值运算符将结果赋给变量(左操作数)。
以下是运算符列表及其示例 -
| 赋值运算符 | 示例 | 等同于 |
|---|---|---|
| &=(按位与赋值) | 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 &= 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 = 7;
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 = 7;
x ^= 5;
document.getElementById("output").innerHTML = "Value of x : " + x;
</script>
</body>
</html>
JavaScript 移位赋值运算符
移位赋值运算符对操作数执行按位移位运算，并将结果赋值给变量(左操作数)。这是两个运算符的组合，第一个是按位移位运算符，第二个是简单赋值运算符。
以下是位移位赋值运算符的列表及其示例 -
| 赋值运算符 | 示例 | 等同于 |
|---|---|---|
| <<=(左移赋值) | 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 中，逻辑赋值运算符对操作数执行逻辑运算，并将结果赋给变量(左操作数)。每个逻辑赋值运算符都是两个运算符的组合，第一个是逻辑运算符，第二个是简单赋值运算符。
以下是逻辑赋值运算符的列表及其示例 -
| 赋值运算符 | 示例 | 等同于 |
|---|---|---|
| &&=(逻辑与赋值) | a &&= b | a = a && b |
| ||=(逻辑或赋值) | a ||= b | a = a || b |
| ??=(空值合并赋值) | 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>
