一文詳解JS中三元運算子的語法和常見用法
- 青灯夜游轉載
- 2022-10-14 19:31:253586瀏覽
這篇文章帶大家探討 JavaScript 中三元運算子的語法及其一些常見用法，希望對大家有幫助！
三元運算子（也稱為條件運算子）可用來執行內聯條件檢查，而不是使用if...else語句。它使代碼更短，更易讀。它可用於根據條件為變數賦值，或根據條件執行表達式。
語法
三元運算子接受三個運算元；它是JavaScript中唯一能做到這一點的運算子。您提供一個要測試的條件，後面跟著一個問號，然後是兩個用冒號分隔的表達式。如果條件被認為為真，則執行第一個表達式；如果它被認為是假的，則執行最終的表達式。
它以以下格式使用：
condition ? expr1 : expr2
這裡，condition是要測試的條件。如果其值被認為是true，expr1則執行。否則，如果其值被認為是false，expr2則執行。
expr1並且expr2是任何一種表達方式。它們可以是變數、函數調用，甚至是其他條件。
例如：
1 > 2 ? console.log("true") : console.log('false');
使用三元運算子進行賦值
三元運算子最常見的用例之一是決定將哪個值分配給變數。通常，一個變數的值可能取決於另一個變數或條件的值。
雖然這可以使用if...else語句來完成，但它會使程式碼更長且可讀性更低。例如：
const numbers = [1,2,3];
let message;
if (numbers.length > 2) {
message = '数组太长';
} else {
message = '数组太短';
}
console.log(message); // 数组太长
在此程式碼範例中，您首先定義變數message。然後，您使用該if...else語句來決定變數的值。
這可以使用三元運算子在一行中簡單地完成：
const numbers = [1,2,3]; let message = numbers.length > 2 ? '数组太长' : '数组太短'; console.log(message); // 数组太长
#使用三元運算子執行表達式
三元運算符可用於執行任何類型的表達式。
例如，如果您想根據變數的值決定要執行哪個函數，您可以使用以下if...else語句執行此操作：
if (feedback === "yes") {
sayThankYou();
} else {
saySorry();
}
這可以使用三元運算子在一行中完成：
feedback === "yes" ? sayThankYou() : saySorry();
如果feedback具有value yes，則將sayThankYou呼叫並執行該函數。否則，該saySorry函數將被呼叫並執行。
使用三元運算子進行空檢查
在許多情況下，您可能正在處理可能有也可能沒有定義值的變數—例如，從用戶輸入檢索結果時，或從伺服器檢索資料時。
使用三元運算符，您可以透過在條件運算元的位置傳遞變數名稱來檢查變數是否存在null。 undefined
這在變數是物件時特別有用。如果您嘗試存取實際上是nullor的物件上的屬性undefined，則會發生錯誤。首先檢查物件是否實際設定可以幫助您避免錯誤。
例如：
let book = { name: '小明', works: '斗破苍穹' };
console.log(book ? book.name : '张三'); // "小明"
book = null;
console.log(book ? book.name : '张三'); // "张三"
在此程式碼區塊的第一部分，book是一個具有兩個屬性的物件-name和 works在上使用三元運算子時book，它會檢查它是否不是nullor undefined。如果不是——意味著它有一個值——name則存取該屬性並將輸出控制台。否則，如果它為空，張三輸出控制台。
因為bookis not null，所以書名會被記錄在控制台中。但是，在第二部分中，當應用相同的條件時，三元運算子中的條件將會失敗，因為bookis null。因此，「張三」輸出控制台。
嵌套條件
儘管三元運算子是內聯使用的，但可以將多個條件用作三元運算子表達式的一部分。您可以嵌套或連結多個條件來執行類似if...else if...else語句的條件檢查。
例如，一個變數的值可能取決於多個條件。它可以使用if...else if...else：
let score = '67';
let grade;
if (score <p>在此程式碼區塊中，您測試變數的多個條件<code>score</code>以確定變數的字母等級。 </p><p>可以使用三元運算子執行這些相同的條件，如下所示：</p><pre class="brush:php;toolbar:false">let score = '67';
let grade = score <p>評估第一個條件，即<code>score 。如果是<code>true</code>，那麼 的 <code>grade</code>值為 <code>F</code>。如果是<code>false</code>，則計算第二個表達式，即<code>score 。 </code></code></p><p>這一直持續到所有條件都為<code>false</code>，這意味著等級的值將為<code>A</code>，或直到其中一個條件被評估為<code>true</code>並且其真實值被指派給<code>grade</code>。 </p><h2 data-id="heading-5"><strong>示例</strong></h2><p>在这个实时示例中，您可以测试三元运算符如何在更多条件下工作。
如果您输入的值小于 100，则会显示“太低”消息。如果您输入的值大于 100，则会显示消息“太高”。如果输入 100，将显示“完美”消息。</p><pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#result {
display: block;
}
button,
#result {
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<label for="number">输入一个数字</label>
<input type="number" name="number" id="number" />
</div>
<button>提交</button>
<span id="result"></span>
</body>
<script>
const button = document.querySelector('button');
const numberElm = document.querySelector('#number');
const resultElm = document.querySelector('#result');
button.addEventListener('click', function() {
resultElm.textContent = numberElm.value > 100 ? '太高' : (numberElm.value < 100 ? '太低' : '完美');
});
</script>
</html>
结论
正如本教程中的示例所解释的，JavaScript 中的三元运算符有很多用例。if...else在许多情况下，三元运算符可以通过替换冗长的语句来增加代码的可读性。
【相关推荐：javascript视频教程、编程基础视频】
以上是一文詳解JS中三元運算子的語法和常見用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！