阅读 14877

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

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

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

本文将包含以下内容

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

快速介绍

首先,undefinednull都是假值(falsy),都能作为条件进行判断,所以在绝大多数情况下两者在使用上没有区别

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

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

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

console.log(null==undefined); //true
复制代码

那么,undefinednull是不是完全相同呢?不是

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

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

上面的例子可以看出

  • undefinednull并不是同一个东西,严格比较会判定为不相等

  • 它们到底是什么、有什么区别、如何影响我们是用呢

重新认识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

nullundefined不同,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而已)
  • 判断nullundefined时,应永远使用严格判断(===)
  • js中“没有传”、“没有给”和undefined基本等价;而null是有值的——例如:默认参数

有bug?想补充?

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

文章分类
前端
文章标签