运算符优先级

「爱情、让人受尽委屈。」 2022-12-03 02:29 155阅读 0赞

下面的表将所有运算符按照优先级的不同从高（20）到低（1）排列。

<table> 
 <tbody> 
 <tr> 
 <th>优先级</th> 
 <th>运算类型</th> 
 <th>关联性</th> 
 <th>运算符</th> 
 </tr> 
 <tr> 
 <td>20</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Grouping" rel="nofollow"><code>圆括号</code></a></td> 
 <td>n/a（不相关）</td> 
 <td><code>( … )</code></td> 
 </tr> 
 <tr> 
 <td>19</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors#%E7%82%B9%E7%AC%A6%E5%8F%B7%E8%A1%A8%E7%A4%BA%E6%B3%95" rel="nofollow"><code>成员访问</code></a></td> 
 <td>从左到右</td> 
 <td><code>… . …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors#%E6%8B%AC%E5%8F%B7%E8%A1%A8%E7%A4%BA%E6%B3%95" rel="nofollow"><code>需计算的成员访问</code></a></td> 
 <td>从左到右</td> 
 <td><code>… [ … ]</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new" rel="nofollow"><code>new</code></a>&nbsp;(带参数列表)</td> 
 <td>n/a</td> 
 <td><code>new … ( … )</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Functions" rel="nofollow">函数调用</a></td> 
 <td>从左到右</td> 
 <td><code>… (&nbsp;…&nbsp;)</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining" rel="nofollow">可选链（Optional chaining）</a></td> 
 <td>从左到右</td> 
 <td><code>?.</code></td> 
 </tr> 
 <tr> 
 <td>18</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new" rel="nofollow">new</a>&nbsp;(无参数列表)</td> 
 <td>从右到左</td> 
 <td><code>new …</code></td> 
 </tr> 
 <tr> 
 <td>17</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" rel="nofollow">后置递增</a>(运算符在后)</td> 
 <td colspan="1">n/a &nbsp;</td> 
 <td><code>… ++</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" rel="nofollow">后置递减</a>(运算符在后)</td> 
 <td><code>… --</code></td> 
 </tr> 
 <tr> 
 <td colspan="1">16</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" rel="nofollow">逻辑非</a></td> 
 <td colspan="1">从右到左</td> 
 <td><code>! …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" rel="nofollow">按位非</a></td> 
 <td><code>~ …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" rel="nofollow">一元加法</a></td> 
 <td><code>+ …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" rel="nofollow">一元减法</a></td> 
 <td><code>- …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" rel="nofollow">前置递增</a></td> 
 <td><code>++ …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" rel="nofollow">前置递减</a></td> 
 <td><code>-- …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof" rel="nofollow">typeof</a></td> 
 <td><code>typeof …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/void" rel="nofollow">void</a></td> 
 <td><code>void …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete" rel="nofollow">delete</a></td> 
 <td><code>delete …</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await" rel="nofollow">await</a></td> 
 <td><code>await …</code></td> 
 </tr> 
 <tr> 
 <td>15</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" rel="nofollow">幂</a></td> 
 <td>从右到左</td> 
 <td><code>…&nbsp;**&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>14</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" rel="nofollow">乘法</a></td> 
 <td colspan="1">从左到右 &nbsp;</td> 
 <td><code>… *&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" rel="nofollow">除法</a></td> 
 <td><code>… /&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" rel="nofollow">取模</a></td> 
 <td><code>… %&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>13</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" rel="nofollow">加法</a></td> 
 <td colspan="1">从左到右 &nbsp;</td> 
 <td><code>… +&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" rel="nofollow">减法</a></td> 
 <td><code>… -&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>12</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" rel="nofollow">按位左移</a></td> 
 <td colspan="1">从左到右</td> 
 <td><code>… &lt;&lt;&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" rel="nofollow">按位右移</a></td> 
 <td><code>… &gt;&gt;&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" rel="nofollow">无符号右移</a></td> 
 <td><code>… &gt;&gt;&gt;&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>11</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" rel="nofollow">小于</a></td> 
 <td colspan="1">从左到右</td> 
 <td><code>… &lt;&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" rel="nofollow">小于等于</a></td> 
 <td><code>… &lt;=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" rel="nofollow">大于</a></td> 
 <td><code>… &gt;&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" rel="nofollow">大于等于</a></td> 
 <td><code>… &gt;=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/in" rel="nofollow">in</a></td> 
 <td><code>… in&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/instanceof" rel="nofollow">instanceof</a></td> 
 <td><code>… instanceof&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>10</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" rel="nofollow">等号</a></td> 
 <td colspan="1">从左到右 &nbsp;</td> 
 <td><code>… ==&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" rel="nofollow">非等号</a></td> 
 <td><code>… !=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" rel="nofollow">全等号</a></td> 
 <td><code>… ===&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" rel="nofollow">非全等号</a></td> 
 <td><code>… !==&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>9</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" rel="nofollow">按位与</a></td> 
 <td>从左到右</td> 
 <td><code>… &amp;&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>8</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" rel="nofollow">按位异或</a></td> 
 <td>从左到右</td> 
 <td><code>… ^&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>7</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" rel="nofollow">按位或</a></td> 
 <td>从左到右</td> 
 <td><code>… |&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>6</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" rel="nofollow">逻辑与</a></td> 
 <td>从左到右</td> 
 <td><code>… &amp;&amp;&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>5</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" rel="nofollow">逻辑或</a></td> 
 <td>从左到右</td> 
 <td><code>… ||&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>4</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" rel="nofollow">条件运算符</a></td> 
 <td>从右到左</td> 
 <td><code>… ? … : …</code></td> 
 </tr> 
 <tr> 
 <td>3</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" rel="nofollow">赋值</a></td> 
 <td>从右到左</td> 
 <td><code>… =&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… +=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… -=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… *=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… /=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… %=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… &lt;&lt;=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… &gt;&gt;=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… &gt;&gt;&gt;=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… &amp;=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… ^=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><code>… |=&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td colspan="1">2</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/yield" rel="nofollow">yield</a></td> 
 <td colspan="1">从右到左</td> 
 <td><code>yield&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/yield*" rel="nofollow">yield*</a></td> 
 <td><code>yield*&nbsp;…</code></td> 
 </tr> 
 <tr> 
 <td>1</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator" rel="nofollow">展开运算符</a></td> 
 <td>n/a</td> 
 <td><code>...</code>&nbsp;…</td> 
 </tr> 
 <tr> 
 <td>0</td> 
 <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comma_Operator" rel="nofollow">逗号</a></td> 
 <td>从左到右</td> 
 <td><code>… ,&nbsp;…</code></td> 
 </tr> 
 </tbody> 
</table>

### 从左到右、从右到左 ###

从左到右：需要从左到右一次计算，比如逗号，与或，等于、不等于；

从右到左：左右是两个独立的块儿，比如所有的赋值运算符，幂运算符 ，new typeof await关键词，三目运算符是三个独立的块儿，和if else性质一致。

三元操作符 ：

### **六部分：** ###

**1、括号  **

()          ==> . [] new Func()

**2、自增自减**

i++ i--     ==>   ++i --i +i -i !  typeof await

** 3、幂运算 **

**加减、乘除、幂运算**

**          ==>  *  / %   + -

**4、大于小于**

> < >= <= ==> == != === !==

**5、与或三目**

&&  ||  ? :

** 6、赋值**

赋值= ... ,

### 简化版 ###

<table> 
 <thead> 
 <tr> 
 <th>运算类型</th> 
 <th>运算符</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>圆括号</td> 
 <td>()</td> 
 </tr> 
 <tr> 
 <td>属性访问、计算属性访问、函数调用、new操作符</td> 
 <td><code>… . …</code>、<code>… [ … ]</code>、<code>… ( … )</code>、<code>new … ( … )</code></td> 
 </tr> 
 <tr> 
 <td>后置递增、后置递减</td> 
 <td><code>… ++</code>、<code>… --</code></td> 
 </tr> 
 <tr> 
 <td>逻辑非、一元加减、前置递增递减、typeof、wait</td> 
 <td><code>! …</code>、<code>+ …</code>、<code>- …</code>、<code>++ …</code>、<code>-- …</code>、<code>typeof …</code>、<code>await …</code></td> 
 </tr> 
 <tr> 
 <td>幂运算|乘除取余|加减</td> 
 <td><code>… \** …</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; |&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<code>… \* …</code>、<code>… / …</code>、<code>… % …</code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;|&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<code>… + …</code>、<code>… - …</code></td> 
 </tr> 
 <tr> 
 <td>大于、小于、大于等于、小于等于、in、instanceof</td> 
 <td><code>… &gt; …</code>、<code>… &lt; …</code>、<code>… &gt;= …</code>、<code>… &lt;= …</code>、<code>… in …</code>、<code>… instanceof …</code></td> 
 </tr> 
 <tr> 
 <td>等于、不等于、全等于、非全等于</td> 
 <td><code>… == …</code>、<code>… != …</code>、<code>… === …</code>、<code>… !== …</code></td> 
 </tr> 
 <tr> 
 <td>逻辑与|逻辑或|三目运算符</td> 
 <td>&amp;&amp; || <code>… ? … : …</code></td> 
 </tr> 
 <tr> 
 <td>赋值</td> 
 <td>=、+=、-=、*=、/=、%=</td> 
 </tr> 
 <tr> 
 <td>展开运算符</td> 
 <td>...</td> 
 </tr> 
 <tr> 
 <td>逗号运算符</td> 
 <td>,</td> 
 </tr> 
 </tbody> 
</table>

**三目运算符（条件运算符）**

执行顺序，执行条件的判断，根据true或false，执行对应的表达式

## ##

### 实例 ###

（1）

return typeof obj === "object" || typeof obj === "function" ?
    			class2type[toString.call(obj)] || "object" :
    			typeof obj;

（2）逗号运算符：

数组中

var num = 1;
    var arr = [num, num +2, num +4];

函数默认参数中：

function sum(a =1, b = 2*a){
    }

函数参数中：