path: root/files/zh-cn/web/javascript/guide/expressions_and_operators/index.html

---
title: 表达式与运算符
slug: Web/JavaScript/Guide/Expressions_and_Operators
tags:
  - JavaScript
  - 入门
  - 指南
  - 表达式
translation_of: Web/JavaScript/Guide/Expressions_and_Operators
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>

<p>本章描述了 JavaScript 的表达式和运算符，包括了赋值，比较，算数，位运算，逻辑，字符串，三元等等。</p>

<p>一个完整详细的运算符列表和表达式可以参见 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators">reference</a>.</p>

<h2 id="运算符">运算符</h2>

<p>JavaScript 拥有如下类型的运算符。本节描述了运算符和运算符的优先级。</p>

<ul>
 <li>{{ web.link("#赋值运算符", "赋值运算符(Assignment operators)") }}</li>
 <li>{{ web.link("#比较运算符", "比较运算符(Comparison operators)") }}</li>
 <li>{{ web.link("#算术运算符", "算数运算符(Arithmetic operators)") }}</li>
 <li>{{ web.link("#位运算符", "位运算符(Bitwise operators)") }}</li>
 <li>{{ web.link("#逻辑运算符", "逻辑运算符(Logical operators)") }}</li>
 <li>{{ web.link("#字符串运算符", "字符串运算符(String operators)") }}</li>
 <li>{{ web.link("#conditional_operator", "条件（三元）运算符(Conditional operator)")}}</li>
 <li>{{ web.link("#comma_operator", "逗号运算符(Comma operator)")}}</li>
 <li>{{ web.link("#delete", "一元运算符(Unary operators)")}}</li>
 <li>{{ web.link("#关系操作符", "关系运算符(Relational operator)")}}</li>
</ul>

<p>JavaScript 拥有二元和一元运算符， 和一个特殊的三元运算符（条件运算符）。一个二元运算符需要两个操作数，分别在运算符的前面和后面：</p>

<pre><em>操作数1 运算符 操作数2</em>
</pre>

<p>例如, <code>3+4</code> 或 <code>x*y</code>。</p>

<p>一个一元运算符需要一个操作数，在运算符前面或后面：</p>

<pre><em>运算符 操作数</em></pre>

<p>或</p>

<pre><em>操作数 运算符</em></pre>

<p>例如, <code>x++</code> 或 <code>++x</code>。</p>

<h3 id="赋值运算符">赋值运算符</h3>

<p>一个 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">赋值运算符(assignment operator)</a> 将它右边操作数的值赋给它左边的操作数。最简单的赋值运算符是等于（<code>=</code>），它将右边的操作数值赋给左边的操作数。那么 <code>x = y</code> 就是将 y 的值赋给 x。</p>

<p>还有一些复合赋值操作符，它们是下表列出的这些操作的缩写：</p>

<table class="standard-table">
 <caption>复合赋值运算符</caption>
 <thead>
  <tr>
   <th>名字</th>
   <th>简写的操作符</th>
   <th>含义</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Assignment">赋值(Assignment)</a></td>
   <td><code>x = y</code></td>
   <td><code>x = y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Addition_assignment">加法赋值(Addition assignment)</a></td>
   <td><code>x += y</code></td>
   <td><code>x = x + y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Subtraction_assignment">减法赋值(Subtraction assignment)</a></td>
   <td><code>x -= y</code></td>
   <td><code>x = x - y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Multiplication_assignment">乘法赋值(Multiplication assignment)</a></td>
   <td><code>x *= y</code></td>
   <td><code>x = x * y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Division_assignment">除法赋值(Division assignment)</a></td>
   <td><code>x /= y</code></td>
   <td><code>x = x / y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Remainder_assignment">求余赋值(Remainder assignment)</a></td>
   <td><code>x %= y</code></td>
   <td><code>x = x % y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Exponentiation_assignment">求幂赋值(Exponentiation assignment)</a></td>
   <td><code>x **= y</code></td>
   <td><code>x = x ** y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Left_shift_assignment">左移位赋值(Left shift assignment)</a></td>
   <td><code>x &lt;&lt;= y</code></td>
   <td><code>x = x &lt;&lt; y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Right_shift_assignment">右移位赋值(Right shift assignment)</a></td>
   <td><code>x &gt;&gt;= y</code></td>
   <td><code>x = x &gt;&gt; y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Unsigned_right_shift_assignment">无符号右移位赋值(Unsigned right shift assignment)</a></td>
   <td><code>x &gt;&gt;&gt;= y</code></td>
   <td><code>x = x &gt;&gt;&gt; y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_AND_assignment">按位与赋值(Bitwise AND assignment)</a></td>
   <td><code>x &amp;= y</code></td>
   <td><code>x = x &amp; y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_XOR_assignment">按位异或赋值(Bitwise XOR assignment)</a></td>
   <td><code>x ^= y</code></td>
   <td><code>x = x ^ y</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators#Bitwise_OR_assignment">按位或赋值(Bitwise OR assignment)</a></td>
   <td><code>x |= y</code></td>
   <td><code>x = x | y</code></td>
  </tr>
 </tbody>
</table>

<h4 id="解构">解构</h4>

<p>对于更复杂的赋值，<a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">解构赋值</a>语法是一个能从数组或对象对应的数组结构或对象字面量里提取数据的 Javascript 表达式。</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js">var foo = ["one", "two", "three"];

// 不使用解构
var one   = foo[0];
var two   = foo[1];
var three = foo[2];

// 使用解构
var [one, two, three] = foo;</code></pre>

<h3 id="比较运算符">比较运算符</h3>

<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">比较运算符</a>比较它的操作数并返回一个基于表达式是否为真的逻辑值。操作数可以是数字，字符串，逻辑，对象值。字符串比较是基于标准的字典顺序，使用Unicode值。在多数情况下，如果两个操作数不是相同的类型， JavaScript 会尝试转换它们为恰当的类型来比较。这种行为通常发生在数字作为操作数的比较。类型转换的例外是使用 <code>===</code> 和 <code>!==</code> 操作符，它们会执行严格的相等和不相等比较。这些运算符不会在检查相等之前转换操作数的类型。下面的表格描述了该示例代码中的各比较运算符</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js">var var1 = 3;
var var2 = 4;</code></pre>

<table class="standard-table">
 <caption>比较运算符</caption>
 <thead>
  <tr>
   <th scope="col">运算符</th>
   <th scope="col">描述</th>
   <th scope="col">返回true的示例</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">等于 Equal</a> (<code>==</code>)</td>
   <td>
    <p>如果两边操作数相等时返回true。</p>
   </td>
   <td><code>3 == var1</code>
    <p><code>"3" == var1</code></p>
    <code>3 == '3'</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">不等于 Not equal</a> (<code>!=</code>)</td>
   <td>如果两边操作数不相等时返回true</td>
   <td><code>var1 != 4<br>
    var2 != "3"</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">全等 Strict equal</a> (<code>===</code>)</td>
   <td>两边操作数相等且类型相同时返回true。 参见 {{jsxref("Object.is")}} and <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness" title="/en-US/docs/Web/JavaScript/Guide/Sameness">sameness in JS</a>.</td>
   <td><code>3 === var1</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">不全等 Strict not equal</a> (<code>!==</code>)</td>
   <td>两边操作数不相等或类型不同时返回true。</td>
   <td><code>var1 !== "3"<br>
    3 !== '3'</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">大于 Greater than</a> (<code>&gt;</code>)</td>
   <td>左边的操作数大于右边的操作数返回true</td>
   <td><code>var2 &gt; var1<br>
    "12" &gt; 2</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">大于等于 Greater than or equal</a> (<code>&gt;=</code>)</td>
   <td>左边的操作数大于或等于右边的操作数返回true</td>
   <td><code>var2 &gt;= var1<br>
    var1 &gt;= 3</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">小于 Less than</a> (<code>&lt;</code>)</td>
   <td>左边的操作数小于右边的操作数返回true</td>
   <td><code>var1 &lt; var2<br>
    "2" &lt; 12</code></td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_or_equal_operator">小于等于 Less than or equal</a> (<code>&lt;=</code>)</td>
   <td>左边的操作数小于或等于右边的操作数返回true</td>
   <td><code>var1 &lt;= var2<br>
    var2 &lt;= 5</code></td>
  </tr>
 </tbody>
</table>

<div class="note">
<p><strong>注意: </strong>（<strong>=&gt;</strong>） 不是运算符，而是<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">箭头函数</a>的标记符号 。</p>
</div>

<h3 id="算术运算符">算术运算符</h3>

<p>算术运算符使用数值(字面量或者变量)作为操作数并返回一个数值.标准的算术运算符就是加减乘除(+ - * /)。当操作数是浮点数时，这些运算符表现得跟它们在大多数编程语言中一样（特殊要注意的是，除零会产生{{jsxref("Infinity")}}）。例如：</p>

<pre class="brush: js">1 / 2;  // 0.5
1 / 2 == 1.0 / 2.0; // true
</pre>

<p>除了标准的算术运算符（+， - ，* /），JavaScript还提供了下表中的算术运算符。</p>

<table class="fullwidth-table" style="height: 469px; width: 520px;">
 <caption>表 3.3 算术运算符</caption>
 <thead>
  <tr>
   <th scope="col">Operator</th>
   <th scope="col">Description</th>
   <th scope="col">Example</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>求余(<code>%</code>)</td>
   <td>二元运算符. 返回相除之后的余数.</td>
   <td>12 % 5 返回 2。</td>
  </tr>
  <tr>
   <td>自增(<code>++</code>)</td>
   <td>一元运算符. 将操作数的值加一. 如果放在操作数前面 (<code>++x</code>), 则返回加一后的值; 如果放在操作数后面 (<code>x++</code>), 则返回操作数原值,然后再将操作数加一.</td>
   <td>
    <p><code>var x=3; </code></p>

    <p><code>console.log(++x); //4</code></p>

    <p><code>console.log(x); //4</code></p>

    <p><code>var y=3;</code></p>

    <p><code>console.log(y++); //3</code></p>

    <p><code>console.log(y); //4</code></p>
   </td>
  </tr>
  <tr>
   <td>自减(<code>--</code>)</td>
   <td>一元运算符. 将操作数的值减一. 前后缀两种用法的返回值类似自增运算符.</td>
   <td>
    <p>var x=3; console.log(--x); //输入2,x=2</p>

    <p>var y=3;console.log(y--);//输出3,x=2;</p>
   </td>
  </tr>
  <tr>
   <td>一元负值符(<code>-</code>)</td>
   <td>一元运算符,返回操作数的负值.</td>
   <td>
    <p>var x=3; console.log(-x); //输入-3</p>
   </td>
  </tr>
  <tr>
   <td>
    <p>一元正值符(+)</p>
   </td>
   <td>一元运算符, 如果操作数在之前不是number，试图将其转换为number</td>
   <td>
    <p><code>console.log( +'3' ); // 3</code></p>

    <p><code>console.log( '3' ); // '3'</code></p>

    <p>console.log(+true); // 1</p>
   </td>
  </tr>
  <tr>
   <td>指数运算符(**)</td>
   <td>计算 <code>base(底数)</code> 的 <code>exponent(</code>指数<code>)次方</code>, 表示为<code>base<sup>exponent</sup></code></td>
   <td>
    <p><code>2 ** 3</code> returns <code>8</code>.<br>
     <code>10 ** -1</code> returns <code>0.1</code>.</p>
   </td>
  </tr>
  <tr>
  </tr>
 </tbody>
</table>

<h3 id="位运算符">位运算符</h3>

<p>位运算符将它的操作数视为32位元的二进制串（0和1组成）而非十进制八进制或十六进制数。例如：十进制数字9用二进制表示为1001，位运算符就是在这个二进制表示上执行运算，但是返回结果是标准的JavaScript数值。</p>

<p>下表总结了 JavaScript 的位运算符。</p>

<table class="standard-table">
 <caption>位运算符</caption>
 <thead>
  <tr>
   <th scope="col">Operator</th>
   <th scope="col">Usage</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>按位与<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND"> AND</a></td>
   <td><code>a &amp; b</code></td>
   <td>
    <p>在a,b的位表示中，每一个对应的位都为1则返回1， 否则返回0.</p>
   </td>
  </tr>
  <tr>
   <td>按位或<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR"> OR</a></td>
   <td><code>a | b</code></td>
   <td>在a,b的位表示中，每一个对应的位，只要有一个为1则返回1， 否则返回0.</td>
  </tr>
  <tr>
   <td>按位异或<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR"> XOR</a></td>
   <td><code>a ^ b</code></td>
   <td>在a,b的位表示中，每一个对应的位，两个不相同则返回1，相同则返回0.</td>
  </tr>
  <tr>
   <td>按位非<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT"> NOT</a></td>
   <td><code>~ a</code></td>
   <td>反转被操作数的位。</td>
  </tr>
  <tr>
   <td>左移<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Left_shift"> shift</a></td>
   <td><code>a &lt;&lt; b</code></td>
   <td>将a的二进制串向左移动b位,右边移入0.</td>
  </tr>
  <tr>
   <td>算术右移</td>
   <td><code>a &gt;&gt; b</code></td>
   <td>
    <p>把a的二进制表示向右移动b位，丢弃被移出的所有位.</p>

    <p>(译注:算术右移左边空出的位是根据最高位是0和1来进行填充的)</p>
   </td>
  </tr>
  <tr>
   <td>
    <p>无符号右移</p>

    <p>(左边空出位用0填充)</p>
   </td>
   <td><code>a &gt;&gt;&gt; b</code></td>
   <td>把a的二进制表示向右移动b位，丢弃被移出的所有位，并把左边空出的位都填充为0</td>
  </tr>
 </tbody>
</table>

<h4 id="Bitwise_Logical_Operators" name="Bitwise_Logical_Operators">位逻辑运算符</h4>

<p>概念上来讲, 位逻辑运算符工作流程如下:</p>

<ul>
 <li>操作数被转换为32bit整數，以位序列（0和1组成）表示.若超過32bits，則取低位32bit，如下所示：</li>
</ul>

<dl>
 <dt>
 <pre><code>Before: 11100110111110100000000000000110000000000001
After:              10100000000000000110000000000001</code></pre>
 </dt>
</dl>

<ul>
 <li>第一个操作数的每一位都与第二个操作数的对应位组对: 第一位对应第一位,第二位对应第二位,以此类推.</li>
 <li>运算符被应用到每一对"位"上, 最终的运算结果由每一对“位”的运算结果组合起来.</li>
</ul>

<p>例如,十进制数9的二进制表示是1001,十进制数15的二进制表示是1111.因此,当位运算符应用到这两个值时,结果如下:</p>

<table class="standard-table">
 <caption>位运算符范例</caption>
 <thead>
  <tr>
   <th scope="col">表达式</th>
   <th scope="col">结果</th>
   <th scope="col">二进制描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>15 &amp; 9</code></td>
   <td><code>9</code></td>
   <td><code>1111 &amp; 1001 = 1001</code></td>
  </tr>
  <tr>
   <td><code>15 | 9</code></td>
   <td><code>15</code></td>
   <td><code>1111 | 1001 = 1111</code></td>
  </tr>
  <tr>
   <td><code>15 ^ 9</code></td>
   <td><code>6</code></td>
   <td><code>1111 ^ 1001 = 0110</code></td>
  </tr>
  <tr>
   <td><code>~15</code></td>
   <td><code>-16</code></td>
   <td><code>~</code><code>00000000...</code><code>00001111 = </code><code>1111</code><code>1111</code><code>...</code><code>11110000</code></td>
  </tr>
  <tr>
   <td><code>~9</code></td>
   <td><code>-10</code></td>
   <td><code>~</code><code>00000000</code><code>...</code><code>0000</code><code>1001 = </code><code>1111</code><code>1111</code><code>...</code><code>1111</code><code>0110</code></td>
  </tr>
 </tbody>
</table>

<p>注意位运算符“非”将所有的32位取反，而值的最高位(最左边的一位)为1则表示负数(2-补码表示法)。</p>

<h4 id="Bitwise_Shift_Operators" name="Bitwise_Shift_Operators">移位运算符</h4>

<p>移位运算符带两个操作数：第一个是待移位的数，第二个是指定第一个数要被移多少位的数。移位的方向由运算符来控制.</p>

<p>移位运算符把操作数转为32bit整数，然后得出一个与待移位数相同种类的值。</p>

<p>移位运算符列表如下。</p>

<p><strong style="font-style: inherit; font-weight: 700;">移位运算符</strong></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">运算符</th>
   <th scope="col">描述</th>
   <th scope="col">范例</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>&lt;&lt;</code><br>
    (左移位)</td>
   <td>将第一个操作数向左移动指定数量的位. 左边移出位被抛弃. 左边移出的几位被丢弃.右边多出的空位由0补齐</td>
   <td><code>9&lt;&lt;2产生36，因为1001移位2比特向左变为100100，它是36。</code></td>
  </tr>
  <tr>
   <td><code>&gt;&gt;</code><br>
    (带符号右移)</td>
   <td>将第一个操作数向右移动指定数量的位. 右边移出位被抛弃. 左边多出的空位由原值的最左边数字补齐.</td>
   <td><code>9&gt;&gt;2产生2，因为1001移位2位向右变为10，其是2。同样，-9&gt;&gt;2产生-3，由于符号被保留。</code></td>
  </tr>
  <tr>
   <td><code>&gt;&gt;&gt;</code><br>
    (补零右移)</td>
   <td>将第一个操作数向右移动指定数量的位. 右边移出位被抛弃. 左边多出的空位由0补齐.</td>
   <td><code>19&gt;&gt;&gt;2</code>产生4，因为10011移位2位向右变为100，它是4。对非负数值，补零右移和带符号右移产生相同结果。</td>
  </tr>
 </tbody>
</table>

<h3 id="逻辑运算符">逻辑运算符</h3>

<p>逻辑运算符常用于布尔（逻辑）值之间; 当操作数都是布尔值时，返回值也是布尔值。 不过实际上<code>&amp;&amp;</code>和<code>||</code>返回的是一个特定的操作数的值，所以当它用于非布尔值的时候，返回值就可能是非布尔值。 逻辑运算符的描述如下。</p>

<p><strong style="font-style: inherit; font-weight: 700;">逻辑运算符</strong></p>

<table class="fullwidth-table" style="height: 190px; width: 1316px;">
 <thead>
  <tr>
   <th scope="col">运算符</th>
   <th scope="col">范例</th>
   <th scope="col">描述</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">逻辑与</a><code> (&amp;&amp;</code>)</td>
   <td><code>expr1 &amp;&amp; expr2</code></td>
   <td>(逻辑与) 如果expr1能被转换为false，那么返回expr1；否则，返回<code>expr2</code>。因此<code>，&amp;&amp;</code>用于布尔值时，当操作数都为true时返回true；否则返回false.</td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">逻辑或 </a>(<code>||</code>)</td>
   <td><code>expr1 || expr2</code></td>
   <td>(逻辑或) 如果expr1能被转换为true，那么返回expr1；否则，返回<code>expr2</code>。因此，||用于布尔值时，当任何一个操作数为true则返回true；如果操作数都是false则返回false。</td>
  </tr>
  <tr>
   <td><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">逻辑非</a><code> (!)</code></td>
   <td><code>!expr</code></td>
   <td>(逻辑非) 如果操作数能够转换为true则返回false；否则返回true。</td>
  </tr>
 </tbody>
</table>

<p>能被转换为<code>false</code>的值有<code>null</code>, <code>0</code>, <code>NaN</code>, 空字符串("")和<code>undefined</code>。（译者注：也可以称作”falsy“）</p>

<p>下面是&amp;&amp;（逻辑"与"）操作符的示例。</p>

<pre class="brush: js">var a1 =  true &amp;&amp; true;     // t &amp;&amp; t returns true
var a2 =  true &amp;&amp; false;    // t &amp;&amp; f returns false
var a3 = false &amp;&amp; true;     // f &amp;&amp; t returns false
var a4 = false &amp;&amp; (3 == 4); // f &amp;&amp; f returns false
var a5 = "Cat" &amp;&amp; "Dog";    // t &amp;&amp; t returns Dog
var a6 = false &amp;&amp; "Cat";    // f &amp;&amp; t returns false
var a7 = "Cat" &amp;&amp; false;    // t &amp;&amp; f returns false
</pre>

<p>下面是||（逻辑"或"）操作符的示例。</p>

<pre class="brush: js">var o1 =  true || true;     // t || t returns true
var o2 = false || true;     // f || t returns true
var o3 =  true || false;    // t || f returns true
var o4 = false || (3 == 4); // f || f returns false
var o5 = "Cat" || "Dog";    // t || t returns Cat
var o6 = false || "Cat";    // f || t returns Cat
var o7 = "Cat" || false;    // t || f returns Cat
</pre>

<p>下面是！（逻辑"非"）操作符的示例。</p>

<pre class="brush: js">var n1 = !true;  // !t returns false
var n2 = !false; // !f returns true
var n3 = !"Cat"; // !t returns false
</pre>

<h4 id="Short-Circuit_Evaluation" name="Short-Circuit_Evaluation">短路求值</h4>

<p>作为逻辑表达式进行求值是从左到右，它们是为可能的“短路”的出现而使用以下规则进行测试：</p>

<ul>
 <li><code>false</code> &amp;&amp; <em>anything</em>    // 被短路求值为false</li>
 <li><code>true</code> || <em>anything</em>       // 被短路求值为true</li>
</ul>

<p>逻辑的规则，保证这些评估是总是正确的。请注意，上述表达式的<code>anything</code>部分不会被求值，所以这样做不会产生任何副作用。</p>

<h3 id="字符串运算符">字符串运算符</h3>

<p>除了比较操作符，它可以在字符串值中使用，连接操作符（+）连接两个字符串值相连接，返回另一个字符串，它是两个操作数串的结合。</p>

<p>例如，</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js">console.log("my " + "string"); // console logs the string "my string".</code></pre>

<p>简写操作符 <code>+=</code> 也可以用来拼接字符串，例如：</p>

<pre class="brush: js"><code>var myString = "alpha";</code>

<code>myString += "bet"; // 返回 "alphabet"  </code>
</pre>

<h3 id="conditional_operator" name="conditional_operator">条件（三元）运算符</h3>

<p><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">条件运算符</a>是JavaScript中唯一需要三个操作数的运算符。运算的结果根据给定条件在两个值中取其一。语法为：</p>

<pre><em>条件 </em>?<em> 值1 </em>:<em> 值2</em>
</pre>

<p>如果<code>条件</code>为真，则结果取<code>值1</code>。否则为<code>值2</code>。你能够在任何允许使用标准运算符的地方使用条件运算符。</p>

<p>例如，</p>

<pre class="brush: js">var status = (age &gt;= 18) ? "adult" : "minor";
</pre>

<p>当 <code>age</code> 大于等于18的时候，将“adult”赋值给<code> status</code>；否则将“minor”赋值给 <code>status</code>。</p>

<h3 id="comma_operator" name="comma_operator">逗号操作符</h3>

<p><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Comma_Operator">逗号操作符</a>（<code>,</code>）对两个操作数进行求值并返回最终操作数的值。它常常用在 <code>for</code> 循环中，在每次循环时对多个变量进行更新。</p>

<p>例如，假如 <code>a</code> 是一个二维数组，每个维度各有10个元素，以下代码利用逗号操作符来同时改变两个变量的值。这段代码的功能是打印出该二维数组的对角线元素的值：</p>

<pre class="brush: js">var x = [0,1,2,3,4,5,6,7,8,9]
var a = [x, x, x, x, x];

for (var i = 0, j = 9; i &lt;= j; i++, j--)
  console.log('a[' + i + '][' + j + ']= ' + a[i][j]);</pre>

<h3 id="delete" name="delete">一元操作符</h3>

<p>一元操作符仅对应一个操作数。</p>

<h4 id="delete" name="delete"><code>delete</code></h4>

<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete</a></code>操作符，删除一个对象的属性或者一个数组中某一个键值。语法如下:</p>

<pre class="brush: js">delete objectName.property;
delete objectName[index];
delete property; // legal only within a with statement
</pre>

<p><code>objectName</code>是一个对象名，<code>property</code> 是一个已经存在的属性，<code>index</code>是数组中的一个已经存在的键值的索引值。</p>

<p>第三行的形式只在<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with">with</a></code>声明的状态下是合法的， 从对象中删除一个属性。</p>

<p>你能使用 <code>delete</code> 删除各种各样的隐式声明， 但是被<code>var</code>声明的除外。</p>

<p>如果 <code>delete</code> 操作成功，属性或者元素会变成 <code>undefined</code>。如果 <code>delete</code>可行会返回<code>true</code>，如果不成功返回<code>false</code>。</p>

<pre class="brush: js">x = 42;
var y = 43;
myobj = new Number();
myobj.h = 4;    // create property h
delete x;       // returns true (can delete if declared implicitly)
delete y;       // returns false (cannot delete if declared with var)
delete Math.PI; // returns false (cannot delete predefined properties)
delete myobj.h; // returns true (can delete user-defined properties)
delete myobj;   // returns true (can delete if declared implicitly)
</pre>

<h5 id="删除数组元素">删除数组元素</h5>

<p>删除数组中的元素时，数组的长度是不变的，例如删除<code>a[3]</code>, <code>a[4]</code>，<code>a[4]</code><code>和a[3]</code> 仍然存在变成了<code>undefined</code>。</p>

<p><code>delete</code> 删除数组中的一个元素，这个元素就不在数组中了。例如，<code>trees[3]</code>被删除，<code>trees[3]</code> 仍然可寻址并返回<code>undefined</code>。</p>

<pre class="brush: js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
delete trees[3];
if (3 in trees) {
  // 不会被执行
}
</pre>

<p>如果想让数组中存在一个元素但是是<code>undefined</code>值，使用<code>undefined</code>关键字而不是<code>delete</code>操作. 如下： <code>trees[3]分配一个undefined</code>,但是这个数组元素仍然存在:</p>

<pre class="brush: js">var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
trees[3] = undefined;
if (3 in trees) {
  // this gets executed（会被执行）
}
</pre>

<h4 id="typeof" name="typeof"><code>typeof</code></h4>

<p><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof">typeof操作符</a> 可通过下面2种方式使用：</p>

<pre class="brush: js">typeof operand
typeof (operand)
</pre>

<p>typeof 操作符返回一个表示 operand 类型的字符串值。operand 可为字符串、变量、关键词或对象，其类型将被返回。operand 两侧的括号为可选。</p>

<p>假设你定义了如下的变量：</p>

<pre class="brush: js">var myFun = new Function("5 + 2");
var shape = "round";
var size = 1;
var today = new Date();
</pre>

<p>typeof 操作符将会返回如下的结果：</p>

<pre class="brush: js">typeof myFun;     // returns "function"
typeof shape;     // returns "string"
typeof size;      // returns "number"
typeof today;     // returns "object"
typeof dontExist; // returns "undefined"
</pre>

<p>对于关键词 <code>true</code> 和 <code>null</code>， <code>typeof</code> 操作符将会返回如下结果：</p>

<pre class="brush: js">typeof true; // returns "boolean"
typeof null; // returns "object"
</pre>

<p>对于一个数值或字符串<code></code>， <code>typeof</code> 操作符将会返回如下结果：</p>

<pre class="brush: js">typeof 62;            // returns "number"
typeof 'Hello world'; // returns "string"
</pre>

<p>对于属性值，typeof 操作符将会返回属性所包含值的类型：</p>

<pre class="brush: js">typeof document.lastModified; // returns "string"
typeof window.length;         // returns "number"
typeof Math.LN2;              // returns "number"
</pre>

<p>对于方法和函数，typeof 操作符将会返回如下结果：</p>

<pre class="brush: js">typeof blur;        // returns "function"
typeof eval;        // returns "function"
typeof parseInt;    // returns "function"
typeof shape.split; // returns "function"
</pre>

<p>对于预定义的对象，typeof 操作符将会返回如下结果：</p>

<pre class="brush: js">typeof Date;     // returns "function"
typeof Function; // returns "function"
typeof Math;     // returns "object"
typeof Option;   // returns "function"
typeof String;   // returns "function"
</pre>

<h4 id="void" name="void"><code>void</code></h4>

<p>void 运算符运用方法如下：</p>

<pre class="brush: js">void (expression)
void expression
</pre>

<p>void运算符,表明一个运算没有返回值。expression是javaScript表达式，括号中的表达式是一个可选项，当然使用该方式是一种好的形式。</p>

<p>你可以使用void运算符指明一个超文本链接。该表达式是有效的，但是并不会在当前文档中进行加载。</p>

<p>如下创建了一个超链接文本，当用户单击该文本时，不会有任何效果。</p>

<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;a href="javascript:void(0)"&gt;Click here to do nothing&lt;/a&gt;</code></pre>

<p>下面的代码创建了一个超链接，当用户单击它时，提交一个表单。</p>

<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;a href="javascript:void(document.form.submit())"&gt;
Click here to submit&lt;/a&gt;</code></pre>

<h3 id="关系操作符">关系操作符</h3>

<p>关系操作符对操作数进行比较，根据比较结果真或假，返回相应的布尔值。</p>

<h4 id="in" name="in"><code>in</code></h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in"><code>in</code>操作符</a>，如果所指定的<strong>属性</strong>确实存在于所指定的对象中，则会返回<code>true</code>，语法如下：</p>

<pre class="brush: js">propNameOrNumber in objectName
</pre>

<p>在这里 <code>propNameOrNumber</code>可以是一个代表着属性名的字符串或者是一个代表着数组索引的数值表达式，而<code>objectName</code>则是一个对象名。</p>

<p>下面的例子是 <code>in</code> 操作的常见用法。</p>

<pre class="brush: js">// Arrays
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees;        // returns true
3 in trees;        // returns true
6 in trees;        // returns false
"bay" in trees;    // returns false (you must specify the index number,
                   // not the value at that index)
"length" in trees; // returns true (length is an Array property)

// Predefined objects
"PI" in Math;          // returns true
var myString = new String("coral");
"length" in myString;  // returns true

// Custom objects
var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar;  // returns true
"model" in mycar; // returns true
</pre>

<h4 id="instanceof" name="instanceof"><code>instanceof</code></h4>

<p>如果所判别的对象确实是所指定的类型，则返回<code>true</code>。其语法如下：</p>

<pre class="brush: js">objectName instanceof objectType
</pre>

<p><code>objectName</code> 是需要做判别的对象的名称,而<code>objectType</code>是假定的对象的类型, 例如{{jsxref("Date")}}或 {{jsxref("Array")}}.</p>

<p>当你需要确认一个对象在运行时的类型时，可使用<code>instanceof</code>. 例如，需要 catch 异常时，你可以针对抛出异常的类型，来做不同的异常处理。</p>

<p>例如, 下面的代码使用<code>instanceof</code>去判断 <code>theDay</code>是否是一个 <code>Date</code> 对象. <code>因为theDay</code>是一个<code>Date</code>对象, <code>所以if</code>中的代码会执行.</p>

<pre class="brush: js">var theDay = new Date(1995, 12, 17);
if (theDay instanceof Date) {
  // statements to execute
}
</pre>

<h3 id="运算符优先级">运算符优先级</h3>

<p>运算符的优先级，用于确定一个表达式的计算顺序。在你不能确定优先级时，可以通过使用括号显式声明运算符的优先级。</p>

<p>下表列出了描述符的优先级，从最高到最低。</p>

<p><strong style="font-style: inherit; font-weight: 700;">运算符优先级</strong></p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Operator type</th>
   <th scope="col">Individual operators</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>member</td>
   <td><code>. []</code></td>
  </tr>
  <tr>
   <td>call / create instance</td>
   <td><code>() new</code></td>
  </tr>
  <tr>
   <td>negation/increment</td>
   <td><code>! ~ - + ++ -- typeof void delete</code></td>
  </tr>
  <tr>
   <td>multiply/divide</td>
   <td><code>* / %</code></td>
  </tr>
  <tr>
   <td>addition/subtraction</td>
   <td><code>+ -</code></td>
  </tr>
  <tr>
   <td>bitwise shift</td>
   <td><code>&lt;&lt; &gt;&gt; &gt;&gt;&gt;</code></td>
  </tr>
  <tr>
   <td>relational</td>
   <td><code>&lt; &lt;= &gt; &gt;= in instanceof</code></td>
  </tr>
  <tr>
   <td>equality</td>
   <td><code>== != === !==</code></td>
  </tr>
  <tr>
   <td>bitwise-and</td>
   <td><code>&amp;</code></td>
  </tr>
  <tr>
   <td>bitwise-xor</td>
   <td><code>^</code></td>
  </tr>
  <tr>
   <td>bitwise-or</td>
   <td><code>|</code></td>
  </tr>
  <tr>
   <td>logical-and</td>
   <td><code>&amp;&amp;</code></td>
  </tr>
  <tr>
   <td>logical-or</td>
   <td><code>||</code></td>
  </tr>
  <tr>
   <td>conditional</td>
   <td><code>?:</code></td>
  </tr>
  <tr>
   <td>assignment</td>
   <td><code>= += -= *= /= %= &lt;&lt;= &gt;&gt;= &gt;&gt;&gt;= &amp;= ^= |=</code></td>
  </tr>
  <tr>
   <td>comma</td>
   <td><code>,</code></td>
  </tr>
 </tbody>
</table>

<p>上表有一个更详细的版本，它包含了各操作符更详细的说明，可在 <a href="/zh-CN/docs/JavaScript/Reference/Operators/Operator_Precedence#Table" title="zh-CN/docs/JavaScript/Reference/Operators/Operator_Precedence#Table">JavaScript 参考手册</a> 中找到。</p>

<h2 id="表达式">表达式</h2>

<p>表达式是一组代码的集合，它返回一个值。（译注：定义比较不好理解，看下面的举例就很好懂了。）</p>

<p>每一个合法的表达式都能计算成某个值，但从概念上讲，有两种类型的表达式：有副作用的（比如赋值）和单纯计算求值的。</p>

<p>表达式x=7是第一类型的一个例子。该表达式使用=运算符将值7赋予变量x。这个表达式自己的值等于7。</p>

<p>代码3 + 4是第二个表达式类型的一个例子。该表达式使用+运算符把3和4加到一起但并没有把结果（7）赋值给一个变量。</p>

<p>JavaScript有以下表达式类型：</p>

<ul>
 <li>算数: 得出一个数字, 例如 3.14159. (通常使用 {{ web.link("#Arithmetic_operators", "arithmetic operators") }}.)</li>
 <li>字符串: 得出一个字符串, 例如, "Fred" 或 "234". (通常使用 {{ web.link("#String_operators", "string operators") }}.)</li>
 <li>逻辑值: 得出true或者false. (经常涉及到 {{ web.link("#Logical_operators", "logical operators") }}.)</li>
 <li>基本表达式: javascript中基本的关键字和一般表达式。</li>
 <li>左值表达式: 分配给左值。</li>
</ul>

<h3 id="new" name="new">基本表达式</h3>

<h4 id="this" name="this"><code>this</code></h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a>关键字被用于指代当前的对象，通常，<code>this</code>指代的是方法中正在被调用的对象。用法如下：</p>

<pre class="brush: js">this["propertyName"]
this.propertyName
</pre>

<p>假设一个用于验证对象<code>value</code>属性的<code>validate</code>函数，传参有对象，最高值和最低值。</p>

<pre class="brush: js">function validate(obj, lowval, hival){
  if ((obj.value &lt; lowval) || (obj.value &gt; hival))
    console.log("Invalid Value!");
}
</pre>

<p>你可以在任何表单元素的<code>onchange</code>事件处理中调用<code>validat</code>函数，用<code>this</code>来指代当前的表单元素，用例如下：</p>

<pre class="brush: html">&lt;p&gt;Enter a number between 18 and 99:&lt;/p&gt;
&lt;input type="text" name="age" size=3 onChange="validate(this, 18, 99);"&gt;
</pre>

<h4 id="分组操作符">分组操作符</h4>

<p>分组操作符（）控制了表达式中计算的优先级. 举例来说, 你可以改变先乘除后加减的顺序，转而先计算加法。</p>

<pre class="brush:js line-numbers  language-js"><code class="language-js">var a = 1;
var b = 2;
var c = 3;

// 默认优先级
a + b * c     // 7
// 默认是这样计算的
a + (b * c)   // 7

// 现在使加法优先于乘法
(a + b) * c   // 9

// 这等价于
a * c + b * c // 9</code></pre>

<h5 id="数值推导">数值推导</h5>

<p>Comprehensions 是一个带有实验性质的JavaScript特性, 计划将在未来的ECMAScript版本中加入该特性. 有两种类型的comprehensions:</p>

<dl>
 <dt>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt>
 <dd>数列数值推导 （非标准用法）</dd>
 <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt>
 <dd>生成器数值推导 （译者注：生成器数值推导标准化可能不大，推荐使用 <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Generator_comprehensions">生成器函数</a>）</dd>
</dl>

<p>Comprehensions特性被许多编程语言所采用，该特性能够使你快速地通过一个已有的数组来创建出一个新的数组，比如：</p>

<pre class="brush:js line-numbers  language-js"><code class="language-js">[for (i of [ 1, 2, 3 ]) i*i ];
// [ 1, 4, 9 ]

var abc = [ "A", "B", "C" ];
[for (letters of abc) letters.toLowerCase()];
// [ "a", "b", "c" ]</code></pre>

<h3 id="左值表达式">左值表达式</h3>

<p>左值可以作为赋值的目标。</p>

<h4 id="new" name="new"><code>new</code></h4>

<p>你可以使用<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> 创建一个自定义类型或者是<code>预置类型</code>的对象实例。用法如下：</p>

<pre class="brush: js">var objectName = new objectType([param1, param2, ..., paramN]);
</pre>

<p>super</p>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super">super </a>关键字可以用来调用一个对象父类的函数，它在用来调用一个<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">类</a>的父类的构造函数时非常有用，比如：</p>

<pre>super([arguments]); // calls the parent constructor. super.functionOnParent([arguments]);</pre>

<h4 id="扩展语句">扩展语句</h4>

<p><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_operator">扩展语句</a>符允许一个表达式在原地展开， 当需要多个参数 (比如函数调用时) 或者多个值(比如字面量数组) 。</p>

<p><strong>例如：</strong>现在你有一个数组，你想创建一个新数组，并将刚才那个作为它的一部分，用array的字面语法是不够的，你不得不写一些代码实现它，比如用些<code>push</code>, <code>splice</code>, <code>concat等等。但是用</code>spread syntax就没问题了：</p>

<pre><code>var parts = ['shoulder', 'knees'];
var lyrics = ['head', ...parts, 'and', 'toes'];</code></pre>

<p>类似的，扩展语句也可以用在函数调用的时候:</p>

<pre><code>function f(x, y, z) { }
var args = [0, 1, 2];
f(...args);</code></pre>

<div>{{PreviousNext("Web/JavaScript/Guide/Functions", "Web/JavaScript/Guide/Numbers_and_dates")}}</div>