JavaScript中undefined详解

目录

一、前言

二、undefined的特点

1、undefined既是JavaScript中的原始数据类型之一，也是一个原始值数据

2、undefined是全局对象上的一个属性

3、undefined不可删，不可重新定义，不可枚举

（1）undefined不可删除

（2）undefined不可重新定义

（3）undefined不可枚举

4、undefined不是JavaScript的关键字和保留字，

二、什么情况下会出现undefined

1、已声明但未被初始化的变量默认赋值undefined

2、未被声明的变量使用typeof操作符检测数据类型时返回undefined

 3、当函数没有明确指定返回值时，默认返回undefined

 4、viod()返回undefined

三、undefined在类型转换中的结果

四、总结

---

一、前言

在前端的实际开发工作中，经常会遇到undefined。在求职面试的过程中，undefined也是频繁出现。作为web前端开发人员，无论是实际的工作还是求职面试。掌握undefined这个知识点都是很有必要的。接下来简单说一下我对JavaScript中undefined的理解

二、undefined的特点

1、undefined既是JavaScript中的原始数据类型之一，也是一个原始值数据

对于有编程经验的朋友来说，undefined是JavaScript的原始数据类型之一这一点毋庸置疑，没有什么可以赘述的，因为ECMAScript规范中就将undefined定义为原始数据类型之一。

undefined也是一个原始值数据，我的理解是，当一个声明了但是未初始化的变量会默认赋值为字符串“undefined”

    <script>
        let num;
        console.log(num)//undefined
    </script>

2、undefined是全局对象上的一个属性

当我们直接输出全局window对象时，就可以找到undefined的存在，当然也可以直接输出window.undefined得到undefined

    <script>
       console.log(window);
       console.log(window.undefined);//undefined
    </script>

3、undefined不可删，不可重新定义，不可枚举

（1）undefined不可删除

以下操作虽然使用delete操作想将undefined删除，但是达不到效果，使用delete操作后，再次输出undefined依然可行

    <script>
       delete window.undefined;
       console.log(undefined);//undefined
    </script>

（2）undefined不可重新定义

以下操作会报错

 <script>
        Object.defineProperty(window,'undefined',{
            enumerable:true,
            writable:true,
            configurable:true
        });
    </script>

（3）undefined不可枚举

既然undefined是全局对象window中的一个属性，那么是否可以通过循环遍历的方式将undefined从window对象中遍历出来呢？结果很遗憾，不可以。

以下代码不会输出任何内容

  <script>
        for(k in window){
           if(k===undefined){
               console.log(key)//不会输出内容
           }
       }
    </script>

4、undefined不是JavaScript的关键字和保留字，

undefined不是JavaScript的关键字和保留字，在全局作用域中不重新赋值，但是在函数作用域中可以重新赋值，但是不建议这么做，不建议将undefined作为变量、对象、函数等名称使用，

在全局作用域中，undefined不可以重新赋值，即使重新赋值了，但是无效，在全局中输出的依然是undefined

  <script>
      window.undefined=1;
      console.log(window.undefined);//undefined
  </script>

但是在局部作用域中，可以将undefined作为变量名重新赋值，但是不建议这么做。

以下fun函数执行输出结果为2

 <script>
    function fun(){
        let undefined=2;
        console.log(undefined)//2
    }
    fun();
  </script>

二、什么情况下会出现undefined

1、已声明但未被初始化的变量默认赋值undefined

  <script>
      let a;
      console.log(a);//undefined
  </script>

2、未被声明的变量使用typeof操作符检测数据类型时返回undefined

  <script>
      console.log(typeof a)//undefined
  </script>

 3、当函数没有明确指定返回值时，默认返回undefined

  <script>
      function fun(){
          console.log(333);
      }
     console.log(fun());//函数默认会返回一个undefined
  </script>

当函数有明确的返回值时，则返回指定的值

  <script>
      function fun(){
          console.log(333);
          return "666666"//指定函数返回值，则不再返回undefined
      }
     console.log(fun());
  </script>

 4、viod()返回undefined

使用viod操作任何值返回的都是undefined

以下代码均输出undefined

  <script>
     console.log(void(122));//undefined
     console.log(void(0));//undefined
     console.log(void(3));//undefined
     console.log(void("南山"));//undefined
  </script>

因此在一些比较久远的代码中，偶尔会看到这样的代码

    <a href="javascript:void(0)"></a>//阻止超链接跳转

 viod获取到的undefined其实就是全局对象window中的undefined。比如：viod(0)===window.undefined

  <script>
     console.log(void(0)===window.undefined)//true
     console.log(void(0)===undefined);//true
  </script>

在局部作用域中，如果使用undefined作为变量名并重新赋值，一定要注意，此时的void(0)不一定等于undefined。

通过viod得到的undefined是全局对象window中的undefined。只和全局中的undefined相等。不一定等于局部作用域中重新赋值的undefined

<script>
     function fun(){
         let undefined=2;
         console.log(undefined===void(0));//false
         if(void(0)===undefined){//条件不成立
             console.log(undefined);//不会输出内容
         }
     }
     fun();
  </script>

三、undefined在类型转换中的结果

undefined是有个假值false。但是在做类型转换的时候，要根据具体的情况来分析

1. 在使用Number(),parseInt(),parseFloat(),+，- 运算符进行类型转换时，会转换成NaN。
2. 在使用！运算符转换时会转换成true
3. undefined==null
4. undefined不等于0
5. undefined 没有toString方法，将其转换成字符串是，不能使用toString方法，但是可以使用String()方法。

  <script>
     console.log(Number(undefined));//NaN
     console.log(parseInt(undefined));//NaN
     console.log(parseFloat(undefined));//NaN
     console.log(+undefined);//NaN
     console.log(-undefined);//NaN
     console.log(undefined==null);//true
     console.log(!undefined);//true
     console.log(undefined==0);//false
  </script>

 在if流程控制语句中，会将undefined默认转换成对应的 Boolean值

  <script>
     let num;
     if(num){
         console("3333")//不会输出
     }

     if(!num){
         console.log(9999)//999
     }
  </script>

四、总结

以上几点是我对undefined的总结，以后遇见新的undefined的知识点也会在该文章中继续补充。但是学海无涯，虽然我尽可能的将自己理解的表达正确和全面，但是难免会有疏漏，若有遗漏和错误，欢迎指正补充。共同交流学习，也是一种进步的途径。