條件語(yǔ)句是任何編程語(yǔ)言中最重要和最基本的概念。 if-else 語(yǔ)句允許我們有條件地執(zhí)行任何代碼塊。我們可以在大括號(hào)中定義if語(yǔ)句的條件，如果條件成立，則執(zhí)行if塊的代碼；否則，它執(zhí)行 else 塊的代碼。
在這里，我們演示了 if-else 語(yǔ)句在 JavaScript 中的工作原理。
if (condition) {
// code to execute when the condition becomes true
} else {
// code to execute when the condition becomes false
}
登錄后復(fù)制
從上面的代碼中，用戶可以了解if-else語(yǔ)句的語(yǔ)法。
如果我說(shuō)你可以把上面五行代碼寫成一行呢？是的，您可以使用內(nèi)聯(lián) if 語(yǔ)句來(lái)做到這一點(diǎn)。
語(yǔ)法
用戶可以按照以下語(yǔ)法在 JavaScript 中使用內(nèi)聯(lián) if 語(yǔ)句。
Condition? code - block - 1 : code - block - 2
登錄后復(fù)制
在上面的語(yǔ)法中，條件是一個(gè)表達(dá)式。當(dāng)條件表達(dá)式為 true 時(shí)，執(zhí)行代碼塊 1；否則，它執(zhí)行代碼塊2。
如果我們將內(nèi)聯(lián) if 語(yǔ)句與 if-else 語(yǔ)句進(jìn)行比較，則 code-block-1 是 if 語(yǔ)句的代碼，code-block-2 是 else 語(yǔ)句的代碼。
示例
在下面的示例中，我們將學(xué)習(xí)內(nèi)聯(lián) if 語(yǔ)句的基本用法。我們使用了條件“10===10”，如果條件為 true，則會(huì)打印“10 等于 10”；否則，它將打印“10 is not equal to 10”。
在輸出中，用戶可以觀察到它打印了“10 is equal to 10”，因?yàn)闂l件始終評(píng)估為 true。
<html>
<body>
<h2>Using the <i> inline if statement </i> in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let result = 10 === 10 ? "10 is equal to 10." : "10 is not equal to 10.";
output.innerHTML += "The value of the result variable: " + result;
</script>
</body>
</html>
登錄后復(fù)制
示例
在下面的示例中，我們創(chuàng)建了數(shù)字?jǐn)?shù)組。此外，我們還創(chuàng)建了 func1() 和 func2() 函數(shù)，它們使用作為參數(shù)傳遞的值來(lái)打印不同的消息。
我們使用 forEach() 方法循環(huán)遍歷數(shù)組。在 forEach() 方法的回調(diào)函數(shù)中，我們檢查數(shù)字是否能被 10 整除，則調(diào)用 func1() 函數(shù)；否則，調(diào)用 func2() 函數(shù)。
<html>
<body>
<h2>Using the <i> inline if statement </i> in JavaScript</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
function func1(value) {
output.innerHTML += "The func1() is executed for the value " + value + "<br>";
}
function func2(value) {
output.innerHTML += "The func2() is executed for the value " + value + "<br>";
}
let numbers = [10, 30, 43, 50, 64, 76, 87];
numbers.forEach((num) => {
num % 10 == 0 ? func1(num) : func2(num);
})
</script>
</body>
</html>
登錄后復(fù)制
示例
在下面的示例中，我們使用 if-else 語(yǔ)句和內(nèi)聯(lián) if 語(yǔ)句檢查年份是否為閏年。 checkYear() 函數(shù)使用 if-else 語(yǔ)句來(lái)確保作為參數(shù)傳遞的年份是否為閏年。
在 checkInlineYear() 函數(shù)中，我們實(shí)現(xiàn)了與 checkYear() 函數(shù)中相同的邏輯，但我們將 if-else 語(yǔ)句轉(zhuǎn)換為內(nèi)聯(lián) if 語(yǔ)句。用戶可以看到我們?nèi)绾螌⒕判袑懺谝恍兄小?
用戶可以觀察到這兩個(gè)函數(shù)對(duì)于任何年份值都給出相同的輸出。
<html>
<body>
<h3>Using inline if statement to check whether year is leap year in JavaScript</h3>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
function checkYear(year) {
// if the year is divisible by 400, it is a leap year.
if (year % 400 == 0) {
return true;
// if the year is divisible by 400 and by 100, it is not a leap year.
} else if (year % 100 == 0) {
return false;
// if the year is divisible by 400, not divisible by 100, and divisible by 4, it is a leap year.
} else if (year % 4 == 0) {
return true;
} else {
return false;
}
}
function checkInlineYear(year) {
return year % 400 == 0 ? true : year % 100 == 0 ? false : year % 4 == 0 ? true : false;
}
output.innerHTML += "Outputs using the checkYear() function. <br> ";
output.innerHTML += "The 2023 is leap year :- " + checkYear(2020) + "<br>";
output.innerHTML += "The 3000 is leap year :- " + checkYear(3000) + "<br>";
output.innerHTML += "<br>";
output.innerHTML += "Outputs using the checkInlineYear() function. <br> ";
output.innerHTML += "The 2023 is leap year :- " + checkInlineYear(2020) + "<br>";
output.innerHTML += "The 3000 is leap year :- " + checkInlineYear(3000) + "<br>";
</script>
</body>
</html>
登錄后復(fù)制
用戶學(xué)會(huì)了在 JavaScript 中使用內(nèi)聯(lián) if 語(yǔ)句。我們可以觀察到，內(nèi)聯(lián) if 語(yǔ)句使代碼更清晰、更具可讀性，并且在相同的邏輯下編寫更少的代碼行總是好的。
以上就是如何在 JavaScript 中編寫內(nèi)聯(lián) IF 語(yǔ)句？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
