JS赋值运算符详解

青旅半醒 2024-03-31 10:22 49阅读 0赞

赋值运算符左侧的操作数必须是变量、对象属性或数组元素，也称为左值。例如，下面的写法是错误的，因为左侧的值是一个固定的值，不允许操作。

> 1.  `1 = 100; //返回错误`

赋值运算有以下两种形式：

*  简单的赋值运算`=`：把等号右侧操作数的值直接复制给左侧的操作数，因此左侧操作数的值会发生变化。
 *  附加操作的赋值运算：赋值之前先对右侧操作数执行某种操作，然后把运算结果复制给左侧操作数。具体说明如表所示。

<table> 
 <thead> 
  <tr> 
   <th>赋值运算符</th> 
   <th>说明</th> 
   <th>示例</th> 
   <th>等效于</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>+=</td> 
   <td>加法运算或连接操作并赋值</td> 
   <td>a += b</td> 
   <td>a = a + b</td> 
  </tr> 
  <tr> 
   <td>-=</td> 
   <td>减法运算并赋值</td> 
   <td>a -= b</td> 
   <td>a= a - b</td> 
  </tr> 
  <tr> 
   <td>*=</td> 
   <td>乘法运算并赋值</td> 
   <td>a *= b</td> 
   <td>a = a * b</td> 
  </tr> 
  <tr> 
   <td>/=</td> 
   <td>除法运算并赋值</td> 
   <td>a /= b</td> 
   <td>a = a / b</td> 
  </tr> 
  <tr> 
   <td>%=</td> 
   <td>取模运算并赋值</td> 
   <td>a %= b</td> 
   <td>a = a % b</td> 
  </tr> 
  <tr> 
   <td>&lt;&lt;=</td> 
   <td>左移位运算并赋值</td> 
   <td>a &lt;&lt;= b</td> 
   <td>a = a &lt;&lt; b</td> 
  </tr> 
  <tr> 
   <td>&gt;&gt;=</td> 
   <td>右移位运算并赋值</td> 
   <td>a &gt;&gt;= b</td> 
   <td>a = a &gt;&gt; b</td> 
  </tr> 
  <tr> 
   <td>&gt;&gt;&gt;=</td> 
   <td>无符号右移位运算并赋值位</td> 
   <td>a &gt;&gt;&gt;= b</td> 
   <td>a = a &gt;&gt;&gt; b</td> 
  </tr> 
  <tr> 
   <td>&amp;=</td> 
   <td>位与运算并赋值</td> 
   <td>a &amp;= b</td> 
   <td>a = a &amp; b</td> 
  </tr> 
  <tr> 
   <td>\</td> 
   <td>=</td> 
   <td>位或运算并赋值</td> 
   <td>a \</td> 
   <td>= b</td> 
   <td>a = a \</td> 
   <td>= b</td> 
  </tr> 
  <tr> 
   <td>^=</td> 
   <td>位异或运算并赋值</td> 
   <td>a ^= b</td> 
   <td>a = a ^ b</td> 
  </tr> 
 </tbody> 
</table>

示例1

使用赋值运算符设计复杂的连续赋值表达式。

> 1.  `var a = b = c = d = e = f = 100; //连续赋值`
> 2.  `//在条件语句的小括号内进行连续赋值`
> 3.  `for((a = b = 1;a < 5;a++) {console.log(a + "" + b)};)`

赋值运算的结合性是从右向左，最右侧的赋值运算先执行，然后再向左赋值，以此类推，所以连续赋值运算不会引发异常。

示例2

在下面表达式中，逻辑与左侧的操作数是一个赋值表达式，右侧的操作数也是一个赋值表达式。但是左侧赋的值是一个简单值，右侧是把一个函数赋值给变量b。

> 1.  `var a;`
> 2.  `console.log(a = 6 && (b = function(){`
> 3.  `return a;`
> 4.  `})()`
> 5.  `);`

在逻辑与运算中，左侧的赋值并没有真正的复制给变量 a，当逻辑与运算执行右侧的表达式时，该表达式是把一个函数赋值给变量 b，然后利用小括号运算符调用这个函数，返回变量 a 的值，结果并没有返回变量 a 的值 6，而是 undefined。

由于赋值运算作为表达式使用具有副作用，使用时要慎重，确保不会引发风险。对上面的表达式更安全的写法如下：

> 1.  `var a = 6; //定义并初始化变量a`
> 2.  `b = function () { //定义函数对象b`
> 3.  `return a;`
> 4.  `}`
> 5.  `console.log(a && b()); //逻辑与运算，根据a决定是否调用函数b`