JS中undefined和null的区别

JavaScript 真是一个特殊的语言, 其他语言都只有一个表示 "无" 的值, 比如 Java 语言用的是 null, C 语言用的是 NULL, Python 语言用的是 None, Ruby 语言用的是 nil。只有 JS 里面表示 "空" 的有两个, 一个是 undefined, 一个是 null。

很多朋友在刚开始学习的时候, 都会有一个疑问, 就是 undefined 和 null 二者之间有什么区别呢 ? 我什么时候该用什么呢 ?接下来, 咱们就来好好聊一聊！

JS的基本数据类型

在 JS 内, 有几个基本数据类型

ES5

Number 数值

String 字符串

Boolean 布尔

Undefined 空

Null 空

ES6

Symbel 唯一值

undefined 和 null 其实就是 JS 中的基本数据类型, 空类型

从这个角度来看, 他们两个是一样的, 都表示 空 的意思,并且在进行数据类型比较的时候, 某些情况下也是一样的

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

两者的区别

两者的区别还是在于含义,之前我们说过, 所有的数据在计算机都是以二进制形式存储的,那么这两个数据也是会按照二进制形式存储的

undefined 因为表示的是 "没有", 所以没得转换, 啥也没有

null 因为表示的是 "空", 其实是有内容, 只不过有一个空内容, 存储的是 0000 0000 ...

那么反馈到我们的代码内,undefined 就是没有值, 或者说未被赋值

null 就是有值, 有一个空值, 一般会被当做这里有一个空对象, 也叫作空指针

举个例子 : 咱们以数字为例

这就是有一个具体的数字, 100 200 什么的

这就是 0, 用完了, 没有了

这就是 null, 有一个空架子, 其他的什么都没有

这就是 undefined, 连个架子都没有

根据上面的例子

undefined, 你什么都不需要做, 只要什么也不赋值就是 undefined

null, 需要你赋值, 直接赋值为一个 null, 也就是你要安装一个空架子

两者对比

1.数据类型不同, 但是值相同

两个数据分别属于 Undefined 类型和 Null 类型

但是表示的值都是空

所以在比较的时候, 我们要注意

console.log(undefined == null) // true, 不涉及数据类型比较
console.log(undefined === null) // false, 涉及数据类型比较

2.数据类型转换成为数值类型的时候结果不一样

null 表示空, 存储的时候也是一大堆 0, 所以转换为数值是 0

undefined 表示没有, 什么都没有内容转换为数值以后是 NaN

console.log(Number(null)) // 0
console.log(Number(undefined)) // NaN

3.使用场景不同

null

在我们需要一个空值或者置空变量的时候手动赋值,原型链的终点位置, 也就是 Object.prototype.proto 是 null

undefined

在变量声明未赋值的时候就是 undefined,函数只有形参没有实参的时候, 这个形参的值也是 undefined,如果一个函数没有设置返回值, 那么这个函数的返回值也是 undefined

总结

总之, 我们就记住一个原则,当你什么也没有做过的时候, 那么就是 undefined,只有你想白干活的时候, 那么你就手动给他写成 null 就好了

实战教程

WebGL+Three.js 入门与实战，系统学习 Web3D 技术

随着元宇宙、数字孪生的火热，前端3D可视化需求越来越广泛，懂 WebGL 技术的前端人才也成为行业香饽饽，薪资诱人颇有竞争力。本课程系统组织了WebGL 和 Three.js 知识内容，并结合图形学相关的数学知识，带你从0基础入门，体系化学习它们的基本、进阶、高级用法。最终通过一款高质量的 3D 可视化项目-智慧城市，让你顺利将 WebGL 和 Three.js 技术落地，掌握其实际应用。

课程目标

内容设计

从 0 开始逐步深化，构造较完整的 Web3D 技能体系

从底层到框架，Three让 WebGL 的应用变得简单

---