一文让你彻底弄懂js中undefined和null的区别
作者:前端不释卷leo 发布时间:2023-07-17 02:21:06
前言
undefined 和 null 的区别是个老生常谈的话题了,之前我对二者的区别只是简单理解,例如二者转成 Boolean 类型都是 false、使用 == 进行比较时为 true、使用 === 进行比较时为 false 等,却没有真正系统地总结二者的区别。
某天,下班前几分钟,我彻底弄懂了 undefined 和 null 的区别。
一、基本概念
1、undefined
undefined 是“全局对象”的一个属性。也就是说,它是全局作用域的一个变量(下面展开对 undefined 变量的赋值操作)。undefined 的最初值就是原始数据类型 undefined。
2、null
null 是一个字面量,不像 undefined,它不是“全局对象”的一个属性。null 是表示缺少的标识,指示变量未指向任何对象。把 null 作为尚未创建的对象,或许更好理解。在 API 中,null 常使用来表示返回类型应是一个对象,但没有关联某个具体对象的这么一个值。
二、简单区别
总的来说,null 和 undefined 都表示空,主要区别在于 undefined 表示尚未初始化的变量的值,而 null 表示该变量有意缺少对象指向。
undefined
这个变量从根本上就没有定义。
隐藏式 空值。
null
这个值虽然定义了,但它并未指向任何内存中的对象。
声明式 空值。
三、表现形式
undefined 和 null 在 JavaScript 中有什么不同的表现形式,理解这些表现形式,可以帮助我们更好地理解 undefined 和 null 的区别。
1、typeof
console.log(typeof undefined); // 'undefined'
console.log(typeof null); // 'object'
typeof null 为 object 是一个历史遗留问题,直到现阶段都无法被修复。
在 JavaScript 初始版本中,值以 32位 存储。前 3位 表示数据类型的标记,其余位则表示值。
对于所有对象类型,它的前 3位 都以 000 作为类型标记位。在 JavaScript 早期版本中,null 被认为是一个特殊的值,用来对应 C 中的空指针,但 JavaScript 中没有 C 中的指针概念,所以 null 意味着什么都没有或者 void 并以 全0(32位)表示。
因此每当 JavaScript 读取 null 时,它的前 3位 将它视为对象类型,这也是为什么 typeof null 返回 object 的原因。
2、== 与 ===
console.log(null == undefined); // true
console.log(null === undefined); // false
console.log(!!null === !!undefined); // true
这一点相信大家都明白,== 比较的是值,而 === 比较的是值跟类型。undefined 和 null 的布尔值都为 false,因此在用 == 比较时,为 true;而 undefined 和 null 的类型不同,因此在用 === 比较时为 false。
3、Object.prototype.toString.call
console.log( Object.prototype.toString.call(undefined) ); // '[object Undefined]'
console.log( Object.prototype.toString.call(null) ); // '[object Null]'
toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]]。这是一个内部属性,其格式为 [object Xxx],其中 Xxx 就是对象的类型。
那么既然在 JavaScript 中,万物皆对象,为什么 xxx.toString() 不能返回变量类型?
这是因为各个类中重写了 toString(),因此需要调用 Object 中的 toString(),且必须使用 toString.call() 的方式调用。对于 Object 对象,直接调用 toString() 就能返回 [object Object];而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。
4、+ 运算 与 Number()
let a = undefined + 1;
let b = null + 1;
console.log(a); // NaN
console.log(b); // 1
console.log(Number(undefined)); // NaN
console.log(Number(null)); // 0
这涉及到 JavaScript 中的隐式类型转换,在执行加法运算前,隐式类型转换会尝试将表达式中的变量转换为 number 类型。如:'1' + 1 会得到结果 11。
null 转化为 number 时,会转换成 0。
undefined 转换为 number 时,会转换为 NaN。
5、JSON.stringify
console.log( JSON.stringify({a: undefined}) ); // '{}'
console.log( JSON.stringify({b: null}) ); // '{b: null}'
console.log( JSON.stringify({a: undefined, b: null}) ); // '{b: null}'
JSON 会将 undefined 对应的 key 删除,这是因为 JSON 自身的转换原则。在 undefined 的情况下,有无该条数据是没有区别的,因为他们在表现形式上并无不同。
let obj1 = { a: undefined };
let obj2 = {};
console.log(obj1.a); // undefined
console.log(obj2.a); // undefined
6、let undefiend = 'test'
function test(params) {
let undefined = 'test'; // 该作用域内undefined为一个变量,赋值为test
return params === undefined;
}
test(); // false
test(undefined); // false
test('test'); // ture
let undefined = 'test'; // Uncaught SyntaxError: Identifier 'undefined' has already been declared
JavaScript 对于 undefined 的限制方式为全局创建了一个只读的 undefined,但是并没有彻底禁止局部 undefined 变量的定义。
请在任何时候,都不要对 undefined 变量进行覆盖,就算是你的 JSON 转换将 undefined 转换为 '' ,也不要通过该操作进行,这将是及其危险的行为。
四、建议
如果你需要使用 undefined 定义空值,请不要采取以下两种方式:
let a;
let a = undefined;
进而采取下面这种方式显式声明 undefined:
let a = void 0;
附:null在类型判断时为什么是object
这是一段历史,1995年Javascript诞生之初, 在实现js类型判断的方法时(也就是typeof),数值是以32位存储的,由标志位(1~3位)和数值组成。标志位存储的是低位的数据。这里有五种标志位:
000 表示对象
1 表示整数
010 表示浮点数
100 表示字符串
110 表示布尔类型
有两个特殊值:
undefined用-2^30表示
null用全0表示
这不巧了吗这不是,null的低位也是000,所以误打误撞成为了object,这一点一直被认为是个bug,直到es6的时候typeof null === 'null'的提案被否决,typeof null === 'object'变成了feature,也就是说这个"bug"不会被“修复”了
来源:https://blog.csdn.net/qq_41809113/article/details/123034018
猜你喜欢
- MySQL如何查看元数据锁阻塞在哪里操作步骤:1、session 1 执行: start transaction;  
- MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行。但是官网给出的安装包有两种格式,一个是msi格式,一个是zip格式的。很多人下了z
- 众所周知,我们可以通过索引值(或称下标)来查找序列类型(如字符串、列表、元组…)中的单个元素,那么,如果要获取一个索引区间的元素该怎么办呢?
- 1、爬取目标网站:业绩预告_数据中心_同花顺财经(ps:headers不会设置的可以看这篇:Python 用requests.get获取网页
- 前言内存映射通常可以提高I/O的性能,因为使用内存映射时,不需要对每个访问都建立一个单独的系统调用,也不需要在缓冲区之间复制数据,内核和用户
- 编写ATM程序实现下述功能,数据来源于文件db.txt1、充值功能:用户输入充值钱数,db.txt中该账号钱数完成修改2、转账功能:用户A向
- 一、打开、关闭文件 open的返回值用来确定打开文件的操作是否成功,当其成功时返回非零值,失败时返回零
- 最近由于项目需要,开始学习python,然后发现一个非常有用的python交互式编辑器,非常容易上手而且非常有用和实在,本博文是对学习jup
- javascript动画效果 打开层/关闭层:运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD
- char与varchar的区别来源:https://www.cnblogs.com/ZhuChangwu/p/15118290.html
- 有两种方法当知道字典的键时:unit_rooms={ 3:{301:[1,80],302:[1,80],303:[2,90],304:[2,
- 我在Window XP中安装了Gvim7.2,然后桌面上出现了三个快捷方式,gvim72.exe,gvim read-only,gvim e
- 01_msgbox# 使用easygui功能,可以直接导入easygui模块import easygui# 需要弹框时,要使用easygui
- 有的时候,我们为了保持网页的美观,需要将较长的文字在一定长度时截断。比如我们希望在列表中显示文章标题的前15个字,那么一个这样的标题:“rs
- PyTorch基础入门三:PyTorch搭建多项式回归模型 1)理论简介对于一般的线性回归模型,由于该函数拟合出来的是一条直线,所
- 主要用到的工具:Pandas 、fuzzywuzzyPandas:是基于numpy的一种工具,专门为分析大量数据而生,它包含大量的处理数据的
- 首先,Python 完整的异常处理语法结构如下:try: #业务实现代码except Exception1 as e: &nbs
- MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Win
- 今天展示一个利用pandas将json数据导入excel例子,主要利用的是pandas里的read_json函数将json数据转化为data
- 介绍在本文中,云朵君将和大家一起了解装饰器的工作原理,如何将我们之前定义的定时器类 Timer 扩展为装饰器,以及如何简化计时功能。最后对