undefined和null在js中非常常见，而且两者都代表"空"的含义，但又有细微的差异，这俩每天都能见到的东西，你真的了解它们吗？来和Blue一起，重新认识undefined和null吧

undefined和null在使用中几乎可以等同（除了判断时），但探究内部的原理有助于加深对程序的理解

本文将包含以下内容

undefined和null都是空，但又不是一个东西，JS为什么要搞两个空？
undefined是什么？什么时候出现undefined？
null是什么？什么时候用到null？
undefined和null的本质
如何正确使用undefined和null

快速介绍

首先，undefined和null都是假值（falsy），都能作为条件进行判断，所以在绝大多数情况下两者在使用上没有区别

if(undefined){
  console.log('真的');
}else{
  console.log('假的');  //执行
}

if(null){
  console.log('真的');
}else{
  console.log('假的');  //执行
}

甚至连官方都**“很贴心”的让null和undefined判定为相等**

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

那么，undefined和null是不是完全相同呢？不是

//松散比较(loose equality)
console.log(null == undefined); //true

//严格比较(strict equality)
console.log(null === undefined); //false

上面的例子可以看出

undefined和null并不是同一个东西，严格比较会判定为不相等
它们到底是什么、有什么区别、如何影响我们是用呢

重新认识undefined

什么时候出现undefined

字面上，undefined就是"未定义"的意思，所以当我们没有定义一个东西之前，它就是undefined

//a并未定义过
console.log(typeof a);  //"undefined"

//注意，这里只能使用typeof，直接使用a会造成报错
console.log(a);  //Uncaught ReferenceError: a is not defined

我们知道js是弱类型的，所以变量本身没有类型，变量内存储的数据才有，所以当一个变量没有任何数据时，它也是undefined

//定义但未赋值
let a;

console.log(a);  //undefined

undefined是js的原始数据类型之一，我们也可以直接把undefined赋值给变量

let a=undefined;

console.log(a); //undefined

当然，不只变量，函数中也出现undefined

//1-参数
function blueFn(a, b){
  console.log(a, b);
}

blueFn(12);  //12, undefined——因为b没有传值，所以是undefined


//2-返回值
function blueFn1(){
  return;
}
function blueFn2(){
  
}

blueFn1();  //undefined——return没写东西，类似于变量没赋值
blueFn2();  //undefined——连return都没有，跟变量没有声明过差不多

对象中也会出现undefined，当我们是用一个不存在的属性时，会得到undefined作为值（ts等强类型语言会直接报错）

const blue={age: 18, gender: 'male'};

console.log(blue.height); //undefined——因为就没有叫height的东西

总结一下，undefined会出现的场景有五种

真的是没定义（仅typeof可用）
定义了但没赋值
直接赋值或返回undefined
函数空return或者干脆没有return
没有对应属性

undefined是什么？——被迫的替代方案

经过上面的梳理其实我们可以看出——undefined就是没有值，不论是没赋值、没传参、没返回、没这个属性，都会导致系统无法找到对应的内容，从而返回undefined作为"替代选项"

重新认识null

null和undefined不同，null不是没得选才出来，想使用null必须主动要求

什么时候出现null

//变量
let name;
console.log(name);  //undefined

let name='blue';
console.log(name);  //null



//函数-参数
function fn1(a){
  console.log(a);
}
fn1(); //undefined
fn1(null); //null



//函数-返回值
function fn2(){
  return; //undefined
}
function fn2(){
  return null; //undefined
}

//对象属性
const person={name: 'blue'};
console.log(person1.age); //undefined

const person={name: 'blue', age: null};
console.log(person1.age); //null

null是什么？——主动选择为空

通过上面的例子，咱们能看出一个有意思的现象——咱们不明说由系统来猜时，会得到undefined；而null则需要我们主动要求才给

所以，这俩啥区别？

null是一个普通值，需要主动使用，和12、'abc'、false没多大区别

只有主动使用时，null才会出现
没有声明null不会自己蹦出来

undefined是一个特殊值，是js中最后的备选方案

当我们向js要求一个“不存在的东西”时，会得到undefined（例如：没赋值的变量、没return的函数、没传的参数）

undefined与null的本质

相对来说，null更接近其他语言的空、而undefined则是js特有的机制

null本质上是个零，undefined本质上是个特殊对象

Number(null); //0
Number(undefined); //NaN

12+null; //12
12+undefined; //NaN


//跟数字比较会更加明显
-5<null; //true——null是0，-5<0

-5<undefined;  //false
-5>undefined;  //false
-5==undefined; //false
//undefined就不是数字，跟数字没有可比性

当然，我猜肯定有人会说——“不对啊，Blue，null的type才是Object啊”，这个简单，因为js里充满了作者的主观规定，仅此而已

//null的类型是object，没错
typeof null; //"object"

//但这只是作者硬性规定null的类型罢了
//不然怎么解释
12+null  //12
5-null  //5
8*null  //0
19&null //0

有讲解有应用，完美

通过上面我们基本弄明白了null和undefined，那有没有什么使用上的区别呢？不多，但是有

默认参数与undefined、null

//age参数有默认值——也就是说，不传就是18
function blue(age=18){
  console.log(age);
}


//传个undefined跟没传一样，系统认为“没有”和undefined等价
blue(undefined);  //18

//传null就是有了，不会触发默认值
blue(null);  //null

解构赋值与undefined、null

类似于参数，其实解构赋值也有类似的情况

const [a=1,b=2]=[undefined, null];

//undefined就是没给——触发默认值
console.log(a);  //1

//null是给了，但是空——不触发默认值
console.log(b);  //null

总结

是时候梳理一遍Blue讲过的东西了，那么首先

15-三连

null是主动使用，undefined是被动的备选手段
null本质上是零，undefined本质上是个对象（js作者规定了type而已）
判断null和undefined时，应永远使用严格判断（===）
js中“没有传”、“没有给”和undefined基本等价；而null是有值的——例如：默认参数

有bug？想补充？

感谢大家观看这篇教程，有任何问题或想和Blue交流，请直接留言，发现文章有任何不妥之处，也请指出，提前感谢

🔥「深入本质」你真的理解undefined和null吗