前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >一篇文章带你了解JavaScript布尔值

一篇文章带你了解JavaScript布尔值

作者头像
前端进阶者
发布2021-01-22 10:08:36
4300
发布2021-01-22 10:08:36
举报
文章被收录于专栏:前端进阶交流

一个JavaScript Boolean类型代表一个值:true或false。

一、Boolean 值

很多时候,在编程中,需要一个只能有两个值的数据类型,像:YES / NO 或者 ON / OFF 或者 TRUE / FALSE。

为此,JavaScript有布尔数据类型。它只能取值为真或假。

二、Boolean() 函数

能使用 Boolean() 函数来查找表达式(或变量)是否为真:

代码语言:javascript
复制
Boolean(10 > 9)        // returns true
代码语言:javascript
复制
或者更容易的:
代码语言:javascript
复制
(10 > 9)              // also returns true
10 > 9                // also returns true

完整代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">

        <p>显示布尔值:(10 >9):</p>

        <button onclick="myFunction()">试试</button>

        <p id="demo"></p>

        <script>
            function myFunction() {
                document.getElementById("demo").innerHTML = Boolean(10 > 9);
            }
</script>

    </body>
</html>

三、比较和条件

JS比较全面的比较运算符 ,JS比较全面的条件语句。

操作符

描述

实例

==

等于

if (day == "Monday")

>

大于

if (salary > 9000)

<

小于

if (age < 18)

一个表达式的布尔值为JavaScript比较条件的基础。

1. 有“真实”价值的一切都是真的。
代码语言:javascript
复制
<script>
    var b1 = Boolean(100);
    var b2 = Boolean(3.14);
    var b3 = Boolean(-15);
    var b4 = Boolean("Hello");
    var b5 = Boolean('false');
    var b6 = Boolean(1 + 7 + 3.14);

    document.getElementById("demo").innerHTML =
    "100 is " + b1 + "<br>" +
    "3.14 is " + b2 + "<br>" +
    "-15 is " + b3 + "<br>" +
    "任意(非空)字符串是 " + b4 + "<br>" +
    "'false' 字符串是 " + b5 + "<br>" +
    "任意表达式 (非零)是 " + b6;
</script>
2. 没有“真实”的一切都是假的。

布尔值 0 是 false。

代码语言:javascript
复制
var x = 0;
Boolean(x);       // returns false

完整代码:

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>项目</title>
    </head>
    <body style="background-color: aqua;">

        <p>显示0的布尔值:</p>

        <button onclick="myFunction()">试试</button>

        <p id="demo"></p>
     /*下面案例,替换相对于的js,实现不同的效果展示*/
        <script>
            function myFunction() {
                var x = 0;
                document.getElementById("demo").innerHTML = Boolean(x);
            }
</script>

    </body>
</html>

布尔值 -0 是 false。

代码语言:javascript
复制
<script>
            function myFunction() {
                var x = -0;
                document.getElementById("demo").innerHTML = Boolean(x); // returns false
            }
</script>

空字符串""是 false。

代码语言:javascript
复制
<script>
    function myFunction() {
        var x;
        document.getElementById("demo").innerHTML = Boolean(x);// returns false
    }
</script>

null的布尔值是 false。

代码语言:javascript
复制
 <script>
    function myFunction() {
       var x = null;
        document.getElementById("demo").innerHTML = Boolean(x);// returns false
    }
</script>

false 的布尔值是false。

代码语言:javascript
复制
<script>
    function myFunction() {
        var x = false;
        document.getElementById("demo").innerHTML = Boolean(x);// returns false
    }
</script>

NaN 的布尔值是 false。

代码语言:javascript
复制
<script>
    function myFunction() {
        var x = 10 / "H";
        document.getElementById("demo").innerHTML = Boolean(x);// returns false
    }
</script>

四、布尔值可以是对象

通常JavaScript使用布尔的字面量创建: var x = false。

布尔值,也可以使用new关键字创建新对象: var y = new Boolean(false)。

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>项目</title>
  </head>
  <body style="background-color: aqua;">

    <p>不要创建一个布尔对象.</p>
    <p>布尔值和对象不能被安全的比较.</p>

    <p id="demo"></p>

    <script>
      var x = false; // x is a boolean
      var y = new Boolean(false); // y is an object
      document.getElementById("demo").innerHTML =
        typeof x + "<br>" + typeof y;
</script>

  </body>
</html>

不要创建布尔对象。它减慢执行速度。new关键字使代码复杂化。这会产生一些意想不到的结果。

当使用= =运算符,相等的布尔值是相等的:

代码语言:javascript
复制
var x = false;
var y = new Boolean(false);

// (x == y) is true because x and y have equal values

当使用===运算符,相等的布尔值不相等,因为===运算符将比较类型和值。

代码语言:javascript
复制
var x = false;
var y = new Boolean(false);

// (x === y) is false because x and y have different types

甚至更糟。对象不能比较。

代码语言:javascript
复制
var x = new Boolean(false);
var y = new Boolean(false);

// (x == y) is false because objects cannot be compared

运行结果:

比较两个JavaScript对象将始终返回false。

五、总结

本文基于JavaScript ,介绍了布尔函数在实际应用中需要注意的点,对Boolean运算符的比较和条件 进行了分点的讲解。布尔值也可以是对象。

希望读者能够根据本文的案例,自己去尝试实际操作一下,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。

文章希望能够帮助你更好的理解 和学习。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端进阶学习交流 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、Boolean 值
  • 二、Boolean() 函数
  • 三、比较和条件
    • 1. 有“真实”价值的一切都是真的。
      • 2. 没有“真实”的一切都是假的。
      • 四、布尔值可以是对象
      • 五、总结
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档