undefined和null有点类似，都表示"没有"的意思。
然而类似不等于相同，下面就通过代码实例总结一下它们两者之间的区别。
一.数据类型区别：
undefined类型只有一个值，undefined。
null类型只有一个值，null。
也就是说undefined值和null值分别属于不同的数据类型，并且这两个数据类型都只有一个值。
代码实例如下：
`console.log(``typeof` `undefined)`
`console.log(``typeof` `null``)`
第一行输出没问题，正确打印undefined类型。
第二行打印结果为object，难道null不是null类型。
原因解释：这是ES一个设计失误，原本正确的结果应该是null，现在只能将错就错，或许以后版本会修正此问题。
二.存在场景不同：
（1）.undefined通常是未初始化变量的值：
代码实例如下：
`let` `num;`
`var` `webName;`
`console.log(num);`
`console.log(webName);`
两个变量在声明的时候都未曾赋值，打印结果都为undefined。
（2）.null通常用来标识一个空对象：
比如当我们用document.getElementBy()方法获取一个元素的时候，如果此元素不存在，那么返回值就是null。
代码实例如下：
`<!doctype html>`
`<``html``>`
`<``head``>`
`<``meta` `charset``=``"utf-8"``>`
`<``meta` `name``=``"author"` `content``="http://www.aiqianduan.com/" />`
`<``title``>爱前端</``title``>`
`<``script` `type``=``"text/javascript"``>`
`window.onload=function() {`
`let odiv=document.getElementById("shwo");`
`alert(odiv);`
`}`
`</``script``>`
`</``head``>`
`<``body``>`
`<``div` `id``=``"show"``></``div``>`
`</``body``>`
`</``html``>`
一不小心id值写错了，自然无法获取到对应div对象，那么odiv就被赋值为null。
代码运行效果截图如下：
专注全栈大前端，爱前端整理了一批最新WEB前端教学视频，不论是零基础学习还是在职提升，这些资料都会给你带来帮助，爱前端帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。全栈大前端技术交流群：137503198
爱前端-专注前端大前端
网友评论