JavaScript - 赋值运算符

JavaScript 赋值运算符

JavaScript 中的赋值运算符用于将值赋给变量。这些是二元运算符。赋值运算符采用两个操作数，根据右操作数的值将值赋给左操作数。左操作数始终是一个变量，而右操作数可以是字面量、变量或表达式。

let x = 10; // right operand is a literal
let y = x; // right operand is a variable
let z = x + 10; // right operand is an expression

赋值运算符首先计算表达式，然后将值赋给变量（左操作数）。

一个简单的赋值运算符是等于（=）运算符。在 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>

打印页面