zl程序教程

您现在的位置是:首页 >  前端

当前栏目

javascript:null和undefined的区别(chrome 104.0.5112.101)

JavaScriptChrome 区别 null undefined
2023-09-14 08:59:32 时间

一,js代码:

<html>
<head>
    <meta charset="utf-8"/>
    <title>测试</title>
</head>
<body>
  <button onclick="test()">测试</button>
<script>
    function test() {

       //查看类型
       console.log("type of null:"+typeof(null));
       console.log("type of undefined:"+typeof(undefined));

        //返回null的情况之一: 一个不存在的DOM节点
        let n1 = document.getElementById('abc');
        console.log("n1:"+n1);
        //返回null的情况之二:Object的原型链终点
        let n2 = Object.prototype.__proto__;
       console.log("n2:"+n2);

       //返回undefined的情况之一:变量声明了,但没有赋值
       let u1;
       console.log("u1:"+u1);

       //返回undefined的情况之二:函数没有返回值
       let f = function(){};
       let u2 = f();
       console.log("u2:"+u2);
       
       //返回undefined的情况之三:调用函数时,没有提供参数
       let pf = function(a){
              console.log("a:"+a);
              return a*a;
       }
       pf();

       //返回undefined的情况之四:对象的属性未定义
       let u4 = {name:'laoliu'};
       console.log("u4.address:"+u4.address);

        //转数字,可以看到null值为0,undefined则提示NaN
        let aN1 = 5+null;
        console.log("aN1:"+aN1);
        let bN1 = 6+undefined;
        console.log("bN1:"+bN1);
        
        let aN2 = Number(null);
        console.log("aN2:"+aN2);
        let bN2 = Number(undefined);
        console.log("bN2:"+bN2);
    }
</script>
</body>
</html>

说明:刘宏缔的架构森林是一个专注架构的博客,地址:https://www.cnblogs.com/architectforest

         对应的源码可以访问这里获取: https://github.com/liuhongdi/
         或: https://gitee.com/liuhongdi

说明:作者:刘宏缔 邮箱: 371125307@qq.com

二,测试效果

三,查看chrome的版本: