JavaScript 有许多运算符,可用于对值和变量(也称为操作数)执行操作
根据这些 JS 运算符执行的操作类型,我们可以将它们分为七组:
目录
算术运算符赋值运算符比较运算符逻辑运算符三元运算符typeof操作员按位运算符
在本手册中,您将通过示例了解这些运算符如何工作。让我们从算术运算符开始。
算术运算符
算术运算符用于执行加法和减法等数学运算。
这些运算符经常与数字数据类型一起使用,因此它们类似于计算器。以下示例显示如何使用+
运算符将两个变量相加:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">3</span><span style="color:#999999">;</span>
<span style="color:#0077aa">let</span> y <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">8</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> y<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 11</span>
</code></span>
此处,使用加号运算符将两个变量x
和y
添加在一起+
。我们还使用该console.log()
方法将操作结果打印到屏幕上。
您可以直接对值使用运算符,而无需将它们分配给任何变量:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">2</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 3</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">4</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 5</span>
</code></span>
在 JavaScript 中,我们总共有 8 个算术运算符。他们是:
- 添加
+
- 减法
-
- 乘法
*
- 分配
/
- 余
%
- 求幂
**
- 增量
++
- 递减
--
让我们一一看看这些运算符是如何工作的。
1. 加法运算符
加法运算符+
用于将两个或多个数字相加。您之前已经了解过该运算符的工作原理,但这里有另一个示例:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">7</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 9</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">2.3</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">1.5</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 3.8</span>
</code></span>
您可以对整数和浮点数使用加法运算符。
2.减法运算符
减法运算符由减号标记−
,您可以使用它从左操作数中减去右操作数。
例如,以下是如何从 5 中减去 3:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
<span style="color:#0077aa">let</span> y <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">3</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">-</span></span> y<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 2</span>
</code></span>
3. 乘法运算符
乘法运算符由星号标记*
,您可以使用它来将运算符左侧的值乘以运算符右侧的值。
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">*</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 10</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">3</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">*</span></span> <span style="color:#990055">3</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 9</span>
</code></span>
4.除法运算
除法运算符/
用于将左操作数除以右操作数。以下是使用该运算符的一些示例:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">10</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">/</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 5</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">9</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">/</span></span> <span style="color:#990055">3</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 3</span>
</code></span>
5. 余数运算符
余数运算符%
也称为模或模运算符。该运算符用于计算执行除法后的余数。
一个实际的例子应该会让这个运算符更容易理解,所以让我们看一个:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">10</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">%</span></span> <span style="color:#990055">3</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
</code></span>
数字 10 不能被 3 整除。除法的结果是 3,余数为 1。余数运算符仅返回余数。
如果左操作数可以被整除而没有余数,则该运算符返回 0。
当您想要检查数字是偶数还是奇数时,通常会使用此运算符。如果一个数是偶数,则除以 2 余数为 0;如果是奇数,则余数为 1。
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">1</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">%</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 1</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">2</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">%</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 0</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">3</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">%</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 1</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">4</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">%</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 0</span>
</code></span>
6. 幂运算符
求幂运算符由两个星号标记**
。它是较新的 JavaScript 运算符之一,您可以使用它来计算数字的幂(基于其指数)。
例如,计算 10 的 3 次方的方法如下:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">10</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">**</span></span> <span style="color:#990055">3</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 1000</span>
</code></span>
这里,数字 10 乘以自身 3 倍 (10 _ 10 _ 10)
幂运算符为您提供了一种简单的方法来计算特定数字的幂。
7. 自增运算符
增量++
运算符用于将数字的值加一。例如:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
x<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">++</span></span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 6</span>
</code></span>
此运算符为您提供了一种将变量值加一的更快方法。如果没有运算符,则递增变量的方法如下:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">1</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 6</span>
</code></span>
使用增量运算符可以缩短第二行。您可以将此运算符放置在要递增的变量之前或旁边:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
<span style="color:#708090">// Place the operator next to the variable (postfix)</span>
x<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">++</span></span><span style="color:#999999">;</span>
<span style="color:#708090">// Place the operator before the variable (prefix)</span>
<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">++</span></span>x<span style="color:#999999">;</span>
</code></span>
上面显示的两个位置都是有效的。前缀(之前)和后缀(之后)放置之间的区别在于,前缀位置将在执行该行代码之后执行运算符。
考虑以下示例:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
<span style="color:#0077aa">let</span> y <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">++</span></span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 5</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 6</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">++</span></span>y<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 6</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>y<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 6</span>
</code></span>
在这里,您可以看到将增量运算符放在变量旁边将会打印该变量,就好像它没有被增量一样。
当您将运算符放在变量之前时,数字将在调用console.log()
方法之前递增。
8. 自减运算符
自减运算--
符用于将数字的值减一。它与增量运算符相反:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
x<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">--</span></span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 4</span>
</code></span>
请注意,您只能对变量使用递增和递减运算符。当您尝试直接对数字值使用这些运算符时,会发生错误:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span><span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">--</span></span><span style="color:#999999">)</span><span style="color:#999999">;</span>
</code></span>
输出:
<span style="color:var(--gray85)"><code class="language-txt">Uncaught SyntaxError: Invalid left-hand side expression in postfix operation
</code></span>
您不能直接对数字使用递增或递减运算符。
算术运算符总结
现在您已经学习了 8 种算术运算符。出色的!请记住,您可以混合使用这些运算符来执行复杂的数学方程。
例如,您可以对一组数字执行加法和乘法:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">2</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">*</span></span> <span style="color:#990055">3</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 11</span>
</code></span>
JavaScript 中的运算顺序与数学中的相同。乘法、除法和求幂比加法或减法具有更高的优先级(还记得缩写 PEMDAS 吗?括号、指数、乘法和除法、加法和减法 - 这就是您的运算顺序)。
您可以使用括号()
来更改运算顺序。将要首先执行的操作包装起来,如下所示:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">*</span></span> <span style="color:#990055">3</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 21</span>
</code></span>
当自增或自减运算符与其他运算符一起使用时,需要将运算符放在前缀位置,如下所示:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">2</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">++</span></span>x<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 2 + 6 = 8</span>
</code></span>
这是因为后缀递增或递减运算符不会与同一行中的其他操作一起执行,正如我之前所解释的。
让我们尝试一些练习。你能猜出这些操作的结果吗?
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">*</span></span> <span style="color:#990055">3</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">-</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#999999">(</span><span style="color:#990055">3</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">*</span></span> <span style="color:#990055">6</span><span style="color:#999999">)</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">%</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">7</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">-</span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#999999">(</span><span style="color:#990055">4</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">9</span><span style="color:#999999">)</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">*</span></span> <span style="color:#990055">4</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">++</span></span>x<span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">++</span></span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">/</span></span> <span style="color:#990055">3</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
</code></span>
这就是算术运算符的全部内容。您在了解这些运算符方面做得非常出色。
让我们先休息五分钟,然后再继续下一类运算符。
赋值运算符
我们要探讨的第二组运算符是赋值运算符。
赋值运算符用于将特定值赋给变量。基本赋值运算符由等号标记=
,您之前已经见过该运算符的作用:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
</code></span>
在基本赋值运算符之后,还有 5 个将数学运算与赋值结合起来的赋值运算符。这些运算符对于使您的代码简洁而有用。
例如,假设您想要将x
变量增加 2。以下是使用基本赋值运算符执行此操作的方法:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+</span></span> <span style="color:#990055">2</span><span style="color:#999999">;</span>
</code></span>
上面的代码没有任何问题,但是你可以使用加法赋值+=
来重写第二行,如下所示:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+=</span></span> <span style="color:#990055">2</span><span style="color:#999999">;</span>
</code></span>
JavaScript 中可以使用 7 种赋值运算符:
姓名 | 操作示例 | 意义 |
---|---|---|
任务 | x = y | x = y |
加法作业 | x += y | x = x + y |
减法作业 | x -= y | x = x - y |
乘法作业 | x *= y | x = x * y |
分区分配 | x /= y | x = x / y |
余数分配 | x %= y | x = x % y |
求幂赋值 | x **= y | x = x ** y |
您在上一节中学到的算术运算符可以与除递增和递减运算符之外的赋值运算符组合。
让我们快速练习一下。你能猜出这些作业的结果吗?
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">3</span><span style="color:#999999">;</span>
x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">+=</span></span> <span style="color:#990055">2</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">*</span></span> <span style="color:#990055">3</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="color:#999999">)</span><span style="color:#999999">;</span>
x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">-=</span></span> <span style="color:#990055">3</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="color:#999999">)</span><span style="color:#999999">;</span>
x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">%=</span></span> <span style="color:#990055">2</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x<span style="color:#999999">)</span><span style="color:#999999">;</span>
</code></span>
现在您已经了解了赋值运算符。让我们继续学习比较运算符。
比较运算符
顾名思义,比较运算符用于将一个值或变量与其他值或变量进行比较。此类别中的运算符始终返回布尔值:true
或false
。
例如,假设您想要比较变量的值是否大于 1。具体操作方法如下:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">></span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">></span></span> <span style="color:#990055">7</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// false</span>
</code></span>
大于>
运算符检查左侧操作数的值是否大于右侧操作数的值。
JavaScript 中有 8 种可用的比较运算符:
姓名 | 操作示例 | 意义 |
---|---|---|
平等的 | x == y | true 如果操作数相等则返回 |
不等于 | x != y | true 如果操作数不相等则返回 |
严格等于 | x === y | 返回true 操作数是否相等且类型相同 |
严格不等于 | x !== y | true 如果操作数不相等或具有不同类型则返回 |
比...更棒 | x > y | true 如果左操作数大于右操作数则返回 |
大于或等于 | x >= y | true 如果左操作数大于或等于右操作数则返回 |
少于 | x < y | true 如果左操作数小于右操作数则返回 |
小于或等于 | x <= y | true 如果左操作数小于或等于右操作数则返回 |
以下是使用比较运算符的一些示例:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">9</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">==</span></span> <span style="color:#990055">9</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">9</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">!=</span></span> <span style="color:#990055">20</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">2</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">></span></span> <span style="color:#990055">10</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// false</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">2</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a"><</span></span> <span style="color:#990055">10</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">>=</span></span> <span style="color:#990055">10</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// false</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">10</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a"><=</span></span> <span style="color:#990055">10</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
</code></span>
比较运算符进一步分为两种类型:关系运算符和相等运算符。
关系运算符比较一个操作数相对于第二个操作数的值(大于、小于)
相等运算符检查左侧的值是否等于右侧的值。它们还可以用于比较字符串,如下所示:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#669900">"ABC"</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">==</span></span> <span style="color:#669900">"ABC"</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#669900">"ABC"</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">==</span></span> <span style="color:#669900">"abc"</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// false</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#669900">"Z"</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">!=</span></span> <span style="color:#669900">"A"</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
</code></span>
字符串比较区分大小写,如上面的示例所示。
JavaScript 也有两个版本的相等运算符:宽松的和严格的。
在严格模式下,JavaScript 将比较值而不执行类型强制。要启用严格模式,您需要=
在运算中再添加一个等号,如下所示:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#669900">"9"</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">==</span></span> <span style="color:#990055">9</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
<span style="color:#708090">// strict equal</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#669900">"9"</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">===</span></span> <span style="color:#990055">9</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// false</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#669900">"1"</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">!=</span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// false</span>
<span style="color:#708090">// strict not equal</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#669900">"1"</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">!==</span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
</code></span>
由于类型强制可能会导致不需要的行为,因此在进行相等比较时,您应该使用严格相等运算符。
逻辑运算符
逻辑运算符用于检查一个或多个表达式的结果是否为true
或false
。
JavaScript 中提供了三种逻辑运算符:
姓名 | 操作示例 | 意义 |
---|---|---|
逻辑与 | x && y | true 如果所有操作数均为 则返回true ,否则返回false |
逻辑或 | x | |
逻辑非 | !x | 反转结果:返回true if false ,反之亦然 |
这些运算符只能返回布尔值。例如,您可以确定“7是否大于2”和“5是否大于4”:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">7</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">></span></span> <span style="color:#990055">2</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">&&</span></span> <span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">></span></span> <span style="color:#990055">4</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
</code></span>
这些逻辑运算符遵循数理逻辑定律:
&&
AND 运算符 – 如果任何表达式返回false
,则结果为false
||
OR 运算符 – 如果任何表达式返回true
,则结果为true
!
NOT 运算符 – 对表达式求反,返回相反值。
让我们做一个小练习。尝试在您的计算机上运行这些语句。你能猜出结果吗?
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">true</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">&&</span></span> <span style="color:#990055">false</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">false</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">||</span></span> <span style="color:#990055">false</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">!</span></span><span style="color:#990055">true</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
</code></span>
当您需要断言代码中满足特定要求时,这些逻辑运算符将派上用场。
假设 a需要使用andhappyLife
进行工作:highIncome
supportiveTeam
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> highIncome <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">true</span><span style="color:#999999">;</span>
<span style="color:#0077aa">let</span> supportiveTeam <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">true</span><span style="color:#999999">;</span>
<span style="color:#0077aa">let</span> happyLife <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> highIncome <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">&&</span></span> supportiveTeam<span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span>happyLife<span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// true</span>
</code></span>
根据需求,您可以使用逻辑AND运算符检查是否同时满足这两个需求。当要求之一为 时false
,则也happyLife
等于。false
三元运算符
三元运算符(也称为条件运算符)是唯一需要 3 个操作数才能运行的 JavaScipt 运算符。
让我们假设您需要在代码中实现一些特定的逻辑。假设您要开一家卖水果的商店。当总购买额达到 20 美元或以上时,您可以享受 3 美元的折扣。否则,您将享受 1 美元的折扣。
if..else
您可以使用如下语句来实现逻辑:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> totalPurchase <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">15</span><span style="color:#999999">;</span>
<span style="color:#0077aa">let</span> discount<span style="color:#999999">;</span>
<span style="color:#0077aa">if</span> <span style="color:#999999">(</span>totalPurchase <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">>=</span></span> <span style="color:#990055">20</span><span style="color:#999999">)</span> <span style="color:#999999">{</span>
discount <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">3</span><span style="color:#999999">;</span>
<span style="color:#999999">}</span> <span style="color:#0077aa">else</span> <span style="color:#999999">{</span>
discount <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">1</span><span style="color:#999999">;</span>
<span style="color:#999999">}</span>
</code></span>
上面的代码工作正常,但您可以使用三元运算符使代码更短、更简洁,如下所示:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> totalPurchase <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">15</span><span style="color:#999999">;</span>
<span style="color:#0077aa">let</span> discount <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> totalPurchase <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">>=</span></span> <span style="color:#990055">20</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">?</span></span> <span style="color:#990055">3</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">:</span></span> <span style="color:#990055">1</span><span style="color:#999999">;</span>
</code></span>
三元运算符的语法是condition ? expression1 : expression2
。
您需要写下condition
评估,后跟问号?
。
在问号旁边,编写当条件计算结果为 时要执行的表达式true
,后跟冒号:
符号。你可以这样称呼expression1
。
在冒号符号旁边,编写当条件计算结果为 时要执行的表达式false
。这是expression2
。
如上面的示例所示,三元运算符可以用作语句的替代if..else
。
typeof
操作员
该typeof
运算符是唯一不由符号表示的运算符。该运算符用于检查放置在运算符右侧的值的数据类型。
以下是使用该运算符的一些示例:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#0077aa">let</span> x <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">=</span></span> <span style="color:#990055">5</span><span style="color:#999999">;</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> x<span style="color:#999999">)</span> <span style="color:#708090">// 'number'</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> <span style="color:#669900">"Nathan"</span><span style="color:#999999">)</span> <span style="color:#708090">// 'string'</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> <span style="color:#990055">true</span><span style="color:#999999">)</span> <span style="color:#708090">// 'boolean'</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> <span style="color:#0077aa">null</span><span style="color:#999999">)</span> <span style="color:#708090">// 'object'</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> <span style="color:#999999">[</span><span style="color:#990055">1</span><span style="color:#999999">,</span> <span style="color:#990055">2</span><span style="color:#999999">,</span> <span style="color:#990055">3</span><span style="color:#999999">]</span><span style="color:#999999">)</span> <span style="color:#708090">// 'object'</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> <span style="color:#999999">{</span><span style="color:#999999">}</span><span style="color:#999999">)</span> <span style="color:#708090">// 'object'</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#0077aa">typeof</span> <span style="color:#0077aa">undefined</span><span style="color:#999999">)</span> <span style="color:#708090">// 'undefined'</span>
</code></span>
该typeof
运算符以字符串形式返回数据类型。“数字”类型代表整数和浮点类型,字符串和布尔值代表它们各自的类型。
数组、对象和null
值都是对象类型,但undefined
又有自己的类型。
按位运算符
位运算符是将其操作数视为一组二进制数字,但将运算结果作为十进制值返回的运算符。
这些运算符在 Web 开发中很少使用,因此如果您只想学习实用的东西,可以跳过这部分。但如果您有兴趣了解它们是如何工作的,那么让我向您展示一个示例。
计算机使用二进制数字系统在内存中存储十进制数字。二进制系统仅使用两个数字 0 和 1 来表示我们人类所知的十进制数字的整个范围。
例如,十进制数 1 表示为二进制数 00000001,十进制数 2 表示为 00000010。
我不会详细介绍如何将十进制数转换为二进制数,因为本指南中包含的内容太多。要点是按位运算符对这些二进制数进行运算。
如果你想从特定的十进制数中找到二进制数,你可以谷歌搜索“十进制转二进制计算器”。
JavaScript 中有 7 种按位运算符:
- 和
&
- 或者
|
- 自由的
^
- 不是
~
- 左移
<<
- 右移
>>
- 零填充右移
>>>
让我们看看它们是如何工作的。
1. 按位与运算符
当数字 1 在两个操作数中重叠时,按位运算符 AND&
返回 1。十进制数 1 和 2 没有重叠的 1,因此对数字使用此运算符将返回 0:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#708090">// 1 = 00000001</span>
<span style="color:#708090">// 2 = 00000010</span>
<span style="color:#708090">// ------------</span>
<span style="color:#708090">// 00000000 = 0</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">1</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">&</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 0</span>
</code></span>
2. 按位或运算符
另一方面,按位运算符 OR|
返回两个十进制数中的全 1。
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#708090">// 1 = 00000001</span>
<span style="color:#708090">// 2 = 00000010</span>
<span style="color:#708090">// ------------</span>
<span style="color:#708090">// 00000011 = 3</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">1</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">|</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 3</span>
</code></span>
二进制数 00000011 代表十进制数 3,因此上面的 OR 运算符返回 3。
按位异或运算符
按位异或^
查找两个二进制数之间的差异。当对应位相同时,返回0:
5 = 00000101
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#708090">// 5 = 00000101</span>
<span style="color:#708090">// 7 = 00000111</span>
<span style="color:#708090">// ------------</span>
<span style="color:#708090">// 00000010 = 2</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">^</span></span> <span style="color:#990055">7</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 2</span>
</code></span>
按位非运算符
按位 NOT~
运算符反转十进制数的位,使 0 变为 1,1 变为 0:
<span style="color:var(--gray85)"><code class="language-js"><span style="color:#708090">// 5 = 00000101</span>
<span style="color:#708090">// ------------</span>
<span style="color:#708090">// 11111010 = -6</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">~</span></span><span style="color:#990055">5</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// -6</span>
</code></span>
按位左移运算符
按位左移<<
通过从右侧添加零来移动位的位置。
然后丢弃多余的位,从而改变这些位所表示的十进制数。请参见以下示例:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a"><<</span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span>
<span style="color:#708090">// 5 = 00000101</span>
<span style="color:#708090">// ------------ << Shift to the left by 2</span>
<span style="color:#708090">// 00010100 = 20</span>
</code></span>
右操作数是要添加到左操作数的零的数量。
按位右移运算符
按位右移>>
通过从左侧添加零来移动位的位置。它与左移运算符相反:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">>></span></span> <span style="color:#990055">2</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 1</span>
<span style="color:#708090">// 5 = 00000101</span>
<span style="color:#708090">// ------------ >> Shift to the right by 2</span>
<span style="color:#708090">// 00000001 = 1</span>
</code></span>
按位补零右移运算符
零填充右移运算符也称为无符号右移运算>>>
符,用于将位的位置向右移动,同时还将符号位更改为0
。
该运算符将任何负数转换为正数,因此您可以看到当传递负数作为左操作数时它是如何工作的:
<span style="color:var(--gray85)"><code class="language-js">console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">-</span></span><span style="color:#990055">70</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">>></span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// -35</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">-</span></span><span style="color:#990055">70</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">>>></span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 2147483613</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">>></span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 2</span>
console<span style="color:#999999">.</span><span style="color:#dd4a68">log</span><span style="color:#999999">(</span><span style="color:#990055">5</span> <span style="background-color:rgba(255, 255, 255, 0.5)"><span style="color:#9a6e3a">>>></span></span> <span style="color:#990055">1</span><span style="color:#999999">)</span><span style="color:#999999">;</span> <span style="color:#708090">// 2</span>
</code></span>
在上面的示例中,您可以看到>>
和>>>
运算符返回不同的结果。当您将零填充右移运算符用于正数时,它不起作用。
现在您已经了解了按位运算符的工作原理。如果您认为它们令人困惑,那么您并不孤单!幸运的是,在开发 Web 应用程序时很少使用这些运算符。
结论
在本教程中,您学习了 7 种 JavaScript 运算符:算术运算符、赋值运算符、比较运算符、逻辑运算符、三元运算符、typeof 运算符和按位运算符。
这些运算符可用于操纵值和变量以实现所需的结果。