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;

在上述语句中，它将 b 从 x 中减去，并将结果赋给 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
`^=` (位异或赋值)	`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 左移赋值运算符

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`

示例

<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>