undefined与null的区别

Posted 2020-09-27 冰河末日

现在再去聊这个的话基本上大家都很熟悉了，对于新手来说可以加强巩固吧。因为阮一峰老师的文章里面已经写很明白 《undefined与null的区别》 

 

null：空对象指针 -> 没有具体的值 -> 一般都是我们手动设置初始的值为null,后期的话会给其赋值

undefined：未定义 -> 连东西都没有 -> 一般都是浏览器默认的值

 

null

---

1、我们设定一个变量,后期需要使用,那么前期我们设置默认值为null

1   var timer=null;
2   function move(){
3      window.clearTimeout(timer);
4      timer=window.setTimeout(move,1000);
5   }
6   move();

 

2、在JS内存释放中，我们想释放一个堆内存，就让其值变为null即可

1  var obj={name:"珠峰培训"};
2  obj=null; -> 刚开始开辟的这个堆内存没有被占用,浏览器会在空闲的时候把它销毁掉

 

3、我们通过DOM中提供的属性和方法获取页面中的某一个元素标签，如果当前这个标签不存在，获取的结果是null，而不是undefined

1 document.getElementById("div1") -> 如果页面中没有#div1,获取的结果就是null

 

4、在正则的exec/字符串的match捕获中,如果当前要捕获的字符串和正则不匹配的话，捕获到的结果为null

1 var reg=/\d+?/g;
2 var str="zhufengpeixun";
3 reg.exec(str) ->null
4 str.match(reg) ->null

 

undefined

---

 

1、在JS预解释的时候，只声明未定义，默认的值是undefined

1 console.log(num); ->undefined
2 var num=13;

 

2、在一个函数中，如果没有写return,或者return后啥都没返回，默认的返回值是undefined

1 function fn(){
2 
3 }
4 var res=fn();
5 console.log(res);->undefined

 

3、函数中设置了形参，但是执行的时候如果没有传递参数值，那么形参默认值是undefined

1 function fn(a,b,c){
2       a->10
3       b->20
4       c->undefined  ->arguments[2]=30 : 让形参c的值变为30,因为在非严格模式下我们的arguments和形参存在映射关系，但是在严格模式("use strict")中是不存在映射关系，改变的话互不影响;
5 }
6 
7 fn(10,20);

 

 4、获取一个对象的属性名对应的属性值，如果当前的这个属性名不存在的话，属性值默认是undefined

 var obj={};
 console.log(obj.name); ->undefined

 

 

->我们也应用这个道理来检测当前的浏览器是否兼容某一个方法

window.getComputedStyle ->获取当前元素经过浏览器计算过的样式

在谷歌中：我们获取的结果是 function getComputedStyle() { [native code] }

在IE6~8中：我们获取的结果是undefined,因为在这个浏览器中不兼容getComputedStyle

 1  function getCss(curEle,attr){
 2          var val=null,reg=null;
 3          if(window.getComputedStyle){
 4             //->兼容
 5             val=window.getComputedStyle(curEle,null)[attr];
 6          }else{
 7             //->不兼容
 8             if(attr==="opacity"){
 9                val=curEle.currentStyle["filter"]; ->‘alpha(opacity=12.345)‘;
10                reg=/^alpha\(opacity=(\d+(?:\.\d+)?)\)$/;
11                val=reg.test(val)?reg.exec(val)[1]/100:1;
12             }else{
13                val=curEle.currentStyle[attr];
14             }
15          }
16          reg=/^-?\d+(\.\d+)?(px|pt|em|rem)?$/;
17          return reg.test(val)?parseFloat(val):val;
18 }