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

在上述语法中，条件是一个表达式。当条件表达式评估为真时，它执行代码块1；否则，它执行代码块2。

如果我们将内联if语句与if-else语句进行比较，代码块1是if语句的代码，代码块2是else语句的代码。

例子

在下面的例子中，我们将学习内联if语句的基本用法。我们使用了条件 “10===10″，如果条件评估为真，它将打印 “10等于10″；否则，它将打印 “10不等于10″。

在输出中，用户可以观察到它打印出’10等于10’，因为条件总是评估为真。

<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语句和inline if语句来检查该年是否是闰年。checkYear()函数使用if-else语句来确保作为参数传递的年份是否是闰年。

在checkInlineYear()函数中，我们实现了与checkYear()函数相同的逻辑，但我们将if-else语句转换为inline 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语句使代码更清晰，更具可读性，在相同的逻辑下写更少的代码行总是好的。