了解JavaScript操作员：从算术到三元

<p>深入探索JavaScript运算符：从算术运算符到三元运算符</p> <p>本文将深入探讨JavaScript运算符。</p> <p>JavaScript运算符包括：</p> <ol> <li>算术运算符：<code> </code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>, <code>**</code> </li> <li>否定运算符：<code>-</code>（一元负号），<code>!</code>（逻辑非）</li> <li>比较运算符：<code>></code>, <code><</code>, <code>>=</code>, <code><=</code>, <code>==</code>, <code>!=</code>, <code>===</code>, <code>!==</code></li> <li>逻辑运算符：<code>&&</code>（与），<code>||</code>（或），<code>!</code>（非）</li> <li>空值合并运算符：<code>??</code></li> <li>三元运算符：<code>? :</code></li> </ol> <p><strong>真值和假值:</strong></p> <p>假值：0, "" (空字符串), <code>false</code>, <code>null</code>, <code>undefined</code>, 和 <code>NaN</code> 真值：其他所有值</p> <p><strong>操作数:</strong></p> <p>运算符作用于的值或变量。例如，在表达式 <code>5 2</code> 中，数字 5 和 2 是操作数。</p> <p><strong>一元运算符:</strong></p> <p>运算符作用于单个操作数时，称为一元运算符。例如：<code> 5</code>, <code>-x</code>（对 x 取反），或 <code>typeof "123"</code>。</p> <p><strong>二元运算符:</strong></p> <p>运算符作用于两个操作数时，称为二元运算符。例如：<code>5 2</code>, <code>x * y</code>。</p> <p><strong>算术运算符:</strong> <code> </code>, <code>-</code>, <code>*</code>, <code>/</code>, <code>%</code>, <code>**</code></p> <p>JavaScript会在运算中隐式转换类型。例如：</p> <p><code>5 - "3"</code> 结果为整数 2（"3" 被转换为整数 3 进行减法运算） <code>10 % "3"</code> 结果为整数 1</p> <p><strong><code> </code> 运算符的特殊行为:</strong></p> <p>对于字符串，<code> </code> 运算符会将它们连接起来。例如：</p> <p><code>let value = "hello" "world" "!";</code> // "helloworld!"</p> <p>这种行为与其他算术运算符不同。如果任一操作数为字符串类型，<code> </code> 运算符将连接操作数。例如：</p> <p><code>"10" 4</code> 结果为字符串 "104"。 <code>1 1 "5"</code> 结果为字符串 "25"（从左到右计算）。</p> <p><strong>一元 <code> </code>:</strong></p> <p>一元 <code> </code> 运算符将非数字转换为数字。它是 <code>Number()</code> 的简写。例如：</p> <p><code> "123"</code> // 123 <code> true</code> // 1 <code> ""</code> // 0</p> <p><strong>否定运算符:</strong></p> <p>一元 <code>-</code> 运算符对数字或变量取反，有效地翻转其符号。例如：</p> <p><code>let x = 3;</code> <code>console.log(-x);</code> // -3</p> <p><strong>比较运算符:</strong></p><p>比较运算符比较数字，这与我们从数学中了解的一样。对于字符串，JavaScript 基于字母顺序或词法顺序进行比较。您可以参考字符编码表（ASCII 或 Unicode）。在执行比较时，JavaScript 会根据需要将值转换为数字。例如：</p> <p><code>"2" > 1</code> // true <p>JavaScript 在其比较行为中有一些特性：</p> <p><code>null == undefined</code> // true <code>null === undefined</code> // false <code>NaN == NaN</code> // false (NaN 定义为“不等于任何值，包括自身”)</p> <p><strong>逻辑运算符:</strong></p> <p><strong><code>&&</code> (与)</strong></p> <p><code>&&</code> 运算符只有当两个操作数都为真值时才返回 <code>true</code>。</p> <p><code>true && true</code> // true <code>true && false</code> // false <code>false && true</code> // false <code>false && false</code> // false</p> <p>JavaScript 从左到右计算值。如果左操作数为真值，则继续计算右操作数并返回右值。</p> <p><code>1 && 2</code> // 2 <code>1 && true && 3</code> // 3</p> <p>如果遇到假值，则停止并返回假值。</p> <p><code>1 && null</code> // null <code>1 && 2 && undefined</code> // undefined</p> <p>如果所有操作数都为真值，则返回最后一个值。</p> <p><code>1 && 2 && 3</code> // 3</p> <p><strong><code>||</code> (或)</strong></p> <p><code>||</code> 运算符如果任一操作数为真值则返回 <code>true</code>。</p> <p><code>true || true</code> // true <code>true || false</code> // true <code>false || true</code> // true <code>false || false</code> // false</p> <p>JavaScript 从左到右计算值。它返回遇到的第一个真值。</p> <p><code>null || 1</code> // 1 <code>undefined || 0 || 2 || 5</code> // 2</p> <p>如果没有操作数为真值，则返回最后一个值。</p> <p><code>null || undefined || 0</code> // 0</p> <p><strong><code>!</code> (非)</strong></p> <p><code>!</code> 运算符反转操作数的布尔值。它将操作数转换为布尔值（<code>true</code> 或 <code>false</code>），然后返回相反的值。</p> <p><code>!true</code> // false <code>!0</code> // true <code>if (!true) {</code> <code>console.log("This won't run.");</code> <code>}</code></p> <p><strong>空值合并运算符：<code>??</code></strong></p> <p>空值合并运算符 <code>??</code> 是较新的运算符 (ES2020)。它有助于处理需要检查值是否为 <code>null</code> 或 <code>undefined</code> 并返回默认值的情况。</p> <p>语法：<code>let value = a ?? b;</code></p> <p>如果 <code>a</code> 不是 <code>null</code> 也不是 <code>undefined</code>，则返回 <code>a</code>。 如果 <code>a</code> 是 <code>null</code> 或 <code>undefined</code>，则返回 <code>b</code>。</p> <p>此运算符很有用，因为它专门处理 <code>null</code> 或 <code>undefined</code>，而不受 <code>0</code>, <code>""</code> 或 <code>false</code> 等假值的影响，而 <code>||</code> (或) 运算符会将它们视为假值并用第二个值替换。</p> <p><code>let height = 0;</code> <code>alert(height || 100); // 100 (因为 0 是假值)</code> <code>alert(height ?? 100); // 0 (因为 0 不是 null 或 undefined)</code></p> <p><code>||</code> 返回第一个真值 <code>??</code> 返回第一个已定义的值</p> <p><strong>三元运算符：<code>? :</code></strong></p> <p>语法：<code>let result = condition ? value1 : value2;</code></p> <p>条件被计算。如果为真值，则返回 <code>value1</code>；否则，返回 <code>value2</code>。</p> <p>三元运算符简洁明了，通常用于简单的条件赋值。例如：</p> <p><code>const className = isActive ? "red" : "blue";</code></p> <p>但是，不建议使用三元运算符来执行不同的代码块（如 <code>if</code> 语句）。这会导致代码可读性降低。</p> <p><code>||</code> 和 <code>??</code> 运算符有时看起来会产生类似的结果，但它们不能互换使用。<code>&&</code> 运算符返回它遇到的第一个假值，而 <code>??</code> 只有在第一个值为 <code>null</code> 或 <code>undefined</code> 时才返回第二个值。根据您想要实现的行为，仔细考虑使用哪个运算符非常重要。</p> <p><img src="https://img.php.cn/upload/article/000/000/000/173777947349716.jpg" alt="Understanding JavaScript Operators: From Arithmetic to Ternary"></p> </li> </ol>

以上是了解JavaScript操作员：从算术到三元的详细内容。更多信息请关注PHP中文网其他相关文章！