JavaScript 如何切换布尔值

在本教程中，我们将学习如何在JavaScript中切换布尔值。除此之外，我们还将学习如何将其应用于需要切换特定状态或值的各种网络应用功能。

切换布尔值意味着将其值从true变为false或从false变为true。切换布尔值可以在许多情况下发挥作用，例如将布尔值更改为触发某个操作，或在状态或元素的可见性之间切换。

切换可以使用不同的方法来实现，如NOT运算符、三元运算符或XOR运算符。

让我们看一些示例以更好地理解这个概念-

示例1：使用NOT（！）运算符

切换布尔值的一种方法是使用NOT运算符（！）。NOT运算符否定布尔值，将true变为false或false变为true。在此示例中，我们将在点击按钮时使用NOT运算符切换标志值。

文件名 – index.html

<html>
<head>
   <title>How to toggle a boolean using JavaScript?</title>
   <script>
      function toggleBoolean() {
         let flag = true;
         console.log(flag);
         flag = !flag; // Toggling the boolean
         console.log(flag);
      }
   </script>
</head>
<body>
   <h3>Toggle Boolean using NOT Operator</h3>
   <button onclick="toggleBoolean()">Toggle Boolean</button>
</body>
</html>

输出

结果将如下图所示。

JavaScript 如何切换布尔值

示例2：使用三元运算符

三元运算符（?:）是另一种切换布尔值的方法。在这个示例中，我们将使用三元运算符来检查flag的值。如果为真，我们将将flag设置为假；如果为假，我们将将flag设置为真。

文件名 – index.html

<html>
<head>
   <title>How to toggle a boolean using JavaScript?</title>
   <script>
      function toggleBoolean() {
         let flag = true;
         console.log(flag);
         flag = flag ? false : true; // Toggling the boolean
         console.log(flag);
      }
   </script>
</head>
<body>
   <h3>Toggle Boolean using ternary Operator</h3>
   <button onclick="toggleBoolean()">Toggle Boolean</button>
</body>
</html>

输出

结果如下图所示。

JavaScript 如何切换布尔值

示例3：使用异或 (^) 运算符

异或（exclusive OR）运算符是用于切换布尔值的另一种技术。如果操作数具有不同的布尔值，异或运算符返回true；否则返回false。我们可以使用异或运算符来改变一个布尔变量的状态，将其与固定的true值进行异或运算。

文件名 – index.html

<html>
<head>
   <title>How to toggle a boolean using JavaScript?</title>
   <script>
      function toggleBoolean() {
         let flag = true;
         console.log(flag);
         flag = flag ^ true; // Toggling the boolean
         console.log(flag ? true : false);
      }
   </script>
</head>
<body>
   <h3>Toggle Boolean using XOR Operator</h3>
   <button onclick="toggleBoolean()">Toggle Boolean</button>
</body>
</html>