首頁 >web前端 >js教程 >如何在 JavaScript 中編寫內嵌 IF 語句？

如何在 JavaScript 中編寫內嵌 IF 語句？

WBOY轉載: 2023-09-07 08:01:051224瀏覽

如何在 JavaScript 中编写内联 IF 语句？

條件語句是任何程式語言中最重要、最基本的概念。 if-else 語句允許我們有條件地執行任何程式碼區塊。我們可以在大括號中定義if語句的條件，如果條件成立，則執行if區塊的程式碼；否則，它執行 else 區塊的程式碼。

在這裡，我們示範了 if-else 語句在 JavaScript 中的工作原理。

if (condition) {
   
   // code to execute when the condition becomes true
} else {
   
   // code to execute when the condition becomes false
}

從上面的程式碼中，使用者可以了解if-else語句的語法。

如果我說你可以把上面五行程式碼寫成一行呢？是的，您可以使用內聯 if 語句來做到這一點。

文法

使用者可以依照以下語法在 JavaScript 中使用內嵌 if 語句。

Condition? code - block - 1 : code - block - 2

在上面的語法中，條件是一個表達式。當條件表達式為 true 時，執行程式碼區塊 1；否則，它執行程式碼區塊2。

如果我們將內嵌 if 語句與 if-else 語句進行比較，則 code-block-1 是 if 語句的程式碼，code-block-2 是 else 語句的程式碼。

範例

在下面的範例中，我們將學習內聯 if 語句的基本用法。我們使用了條件“10===10”，如果條件為 true，則會列印“10 等於 10”；否則，它將列印“10 is not equal to 10”。

在輸出中，使用者可以觀察到它列印了“10 is equal to 10”，因為條件始終評估為 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>

範例

在下面的範例中，我們建立了數字數組。此外，我們還建立了 func1() 和 func2() 函數，它們使用作為參數傳遞的值來列印不同的訊息。

我們使用 forEach() 方法循環遍歷數組。在 forEach() 方法的回呼函數中，我們檢查數字是否能被 10 整除，則呼叫 func1() 函數；否則，呼叫 func2() 函數。

<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>

範例

在下面的範例中，我們使用 if-else 語句和內嵌 if 語句檢查年份是否為閏年。 checkYear() 函數使用 if-else 語句來確保作為參數傳遞的年份是否為閏年。

在 checkInlineYear() 函數中，我們實作了與 checkYear() 函數相同的邏輯，但我們將 if-else 語句轉換為內嵌 if 語句。使用者可以看到我們如何將九行寫在一行中。

使用者可以觀察到這兩個函數對於任何年份值都給出相同的輸出。

<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>

使用者學會了在 JavaScript 中使用內嵌 if 語句。我們可以觀察到，內嵌 if 語句使程式碼更清晰、更具可讀性，並且在相同的邏輯下編寫更少的程式碼行總是好的。

以上是如何在 JavaScript 中編寫內嵌 IF 語句？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：解釋 AJAX 中請求的不同就緒狀態下一篇：解釋 AJAX 中請求的不同就緒狀態

看更多