JavaScript中表示空的undefined与null的区别及用法

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

我在学习JS之初
就感觉undefined挺新鲜
因为其他语言没有
而且不仅有undefined，居然还有一个表示空的null
相信很多同学都说不出来undefined与null有什么区别
今天我来·总结一下JavaScript中表示空的undefined与null的区别

#相似#
undefined和null都是JavaScript中的基本类型
并且它们的类型值各只有一个，就是undefined和null，与它们的类型同名
正常来说，这两个值看起来还真没什么区别

var foo = undefined;

var foo = null;

而且标准还有这样的规定

console.log(null == undefined) // true

（但是null !== undefined）

转化为布尔值都是false

if(!undefined){
    console.log(1);//1
}
if(!null){
    console.log(1);//1
}

#区别#
但其实，有区别
先来看看这几行代码

console.log(undefined in window);// true
console.log(null in window);// false

这是其中不同的一点
null是JavaScript的关键字
而undefined是window上的一个特殊的的属性（和NaN、Infinity一样）
虽然ES5undefined变为只读属性，但是仍然有不合理的地方，比如说这样

function fn(){
    var undefined = 1;// 
    console.log(undefined);// 1
}
fn();

看吧，因为undefined不是关键字，所以我们可以在局部变量中声明undefined（无力吐槽）
（全局的window.undefined引擎设置了权限不可写）
即便你是严格模式

function fn(){
    "use strict";
    var undefined = 1;
    console.log(undefined);// 1
}
fn();

这就是为什么很多优秀的框架或库都会在函数中传入undefined
是为了防止undefined值被篡改

(function(window, undefined) {
   // ...
})(window);

我们在平时千万不要写这么令人发指的代码

在进行数学运算时也存在差别

console.log(undefined + 1); //NaN
console.log(null + 1); //1

undefined进行任何运算会转换为NaN
而null转换为0

#历史#
JavaScript有两种表示空的值是有道理的
js之父Brendan Eich最开始设计得时候像Java一样，只有null
但是他考虑到js有基本值和引用值两种
用一个对象来表示空怪怪的typeof null === 'object'，而且null转化为数字0会导致很多bug不好调试
于是他又设计了undefined
#用法#
按照Brendan Eich的设计
undefined表示缺少值
null表示为空对象
但是现在我们并不是这样使用的

可以这样来理解
undefined表示变量没有初始化，没有值
null表示变量初始化了，值为“空值”

undefined是js用的，而null是给我们用的
这句话不知道大家能不能理解
比如在这些情况

• var a; 声明变量，引擎会在预编译给它赋上默认值undefined
• function a(){} 声明函数，没有返回值默认返回undefined
• var obj = {};obj.a; 访问不存在的对象属性，默认值undefined
• var a = function(a){};a(); 没有指定实参，默认参数值undefined
• …

这都是系统给我们默认的undefined，也就是js使用的
而我们要用的是null
比如说

• var obj = Object.create(null); 创建空对象
• demo.onclick = null; 解除绑定事件
• …

只要我们想要使用空，就用null肯定没错，某些情况还可以方便浏览器的垃圾回收
#总结#
最后给大家总结一下

• undefined是window上的特殊属性，是标识符，可被赋值（非全局）
  null是特殊关键字，不是标识符，不能赋值
• undefined == null --> true | undefined === null --> false
• undefined转化为number为NaN，null转化为number为0
• undefined与null转换为boolean都是false
• undefined表示没有值，null表示空值
• 我们应该使用null表示空而不要使用undefined
• 永远不要重定义undefined

主页传送门