一文詳解JS中三元運運算元的語法和常見用法

本篇文章帶大家探討一下 JavaScript 中三元運運算元的語法及其一些常見用法，希望對大家有所幫助！

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

三元運運算元（也稱為條件運運算元）可用於執行內聯條件檢查，而不是使用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 < 50) {
  grade = 'F';
} else if (score < 70) {
  grade = 'D'
} else if (score < 80) {
  grade = 'C'
} else if (score < 90) {
  grade = 'B'
} else {
  grade = 'A'
}

console.log(grade); // "D"
登入後複製

在此程式碼塊中，您測試變數的多個條件score以確定變數的字母等級。

可以使用三元運運算元執行這些相同的條件，如下所示：

let score = '67';
let grade = score < 50 ? 'F'
  : score < 70 ? 'D'
  : score < 80 ? 'C'
  : score < 90 ? 'B'
  : 'A';

console.log(grade); // "D"
登入後複製

評估第一個條件，即score < 50。如果是true，那麼的grade值為F。如果是false，則計算第二個表示式，即score < 70。

這一直持續到所有條件都為false，這意味著等級的值將為A，或者直到其中一個條件被評估為true並且其真實值被分配給grade。

範例

在這個實時範例中，您可以測試三元運運算元如何在更多條件下工作。如果您輸入的值小於 100，則會顯示「太低」訊息。如果您輸入的值大於 100，則會顯示訊息「太高」。如果輸入 100，將顯示「完美」訊息。

<!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在許多情況下，三元運運算元可以通過替換冗長的語句來增加程式碼的可讀性。

【相關推薦：、】

以上就是一文詳解JS中三元運運算元的語法和常見用法的詳細內容，更多請關注TW511.COM其它相關文章！