通过示例学习 JavaScript 运算符 - 逻辑、比较、三元和更多 JS 运算符

JavaScript 有许多运算符，可用于对值和变量（也称为操作数）执行操作

根据这些 JS 运算符执行的操作类型，我们可以将它们分为七组：

目录

算术运算符赋值运算符比较运算符逻辑运算符三元运算符typeof操作员按位运算符

算术运算符

1. 加法运算符

2.减法运算符

3. 乘法运算符

4.除法运算

5. 余数运算符

6. 幂运算符

7. 自增运算符

8. 自减运算符

算术运算符总结

赋值运算符

比较运算符

逻辑运算符

三元运算符

typeof操作员

按位运算符

1. 按位与运算符

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">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. 添加+
2. 减法-
3. 乘法*
4. 分配/
5. 余%
6. 求幂**
7. 增量++
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. 幂运算符