当前位置:首页 » 《资源分享》 » 正文

【前端】JavaScript 中的 undefined 、null 与 NaN :概念解析与对比

22 人参与  2024年12月14日 12:00  分类 : 《资源分享》  评论

点击全文阅读



在这里插入图片描述

博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

文章目录

?前言?`undefined`1. 什么是 `undefined`2. `undefined` 的使用场景3. `undefined` 的特性 ?`null`1. 什么是 `null`2. `null` 的使用场景3. `null` 的特性 ?`NaN`1. 什么是 `NaN`2. `NaN` 的使用场景3. `NaN` 的特性 ?三者的区别与对比1. 定义和语义2. 类型3. 比较4. 真假值5. 常见错误与注意事项 ?小结


在这里插入图片描述


?前言

JavaScript 中,undefinednullNaN 是一些非常特殊和重要的值,它们经常用于处理未定义、空或无效的数据状态。然而,它们之间的行为和应用场景是有显著区别的。了解这些差异有助于编写更健壮、更健全的代码,尤其是在处理异常情况和防止运行时错误时。本文将详细分析它们的概念、特性、相似点与区别,并结合实际例子进行对比。
undefined在这里插入图片描述
null
在这里插入图片描述
NaN
在这里插入图片描述

?undefined

undefined在这里插入图片描述


1. 什么是 undefined

在这里插入图片描述

undefined 是 JavaScript 中表示变量未定义的值。通常情况下,当一个变量被声明但没有被赋予任何值时,它的默认值就是 undefined

示例代码:

let a;console.log(a); // 输出:undefined

在上面的例子中,变量 a 被声明,但没有赋值,所以默认情况下,它的值是 undefined


2. undefined 的使用场景

在这里插入图片描述

变量声明但未赋值:当我们声明了一个变量,但没有赋值,它的值默认为 undefined

let b;console.log(b); // 输出:undefined

对象属性未定义:当尝试访问对象中不存在的属性时,也会得到 undefined

let obj = {};console.log(obj.name); // 输出:undefined

函数无返回值:如果一个函数没有显式地返回任何值,那么它默认会返回 undefined

function sayHello() {  console.log("Hello");}let result = sayHello(); // 调用函数console.log(result); // 输出:undefined

3. undefined 的特性

在这里插入图片描述

类型undefined 是一个原始类型。

===== 的对比undefined == nulltrue,但 undefined === nullfalse。这表明,undefinednull 具有相同的值,但类型不同。

console.log(undefined == null);  // trueconsole.log(undefined === null); // false

?null

null
在这里插入图片描述


1. 什么是 null

在这里插入图片描述

null 是 JavaScript 中的一个特殊值,用于表示空值空对象引用。它表示“没有对象”或者“空对象”的状态。

示例代码:

let c = null;console.log(c); // 输出:null

在上面的代码中,c 被显式地赋值为 null,表示它目前没有指向任何对象。


2. null 的使用场景

在这里插入图片描述

空对象指针:通常,null 用于显式地指示变量不再引用任何对象。它可以被用作对象的初始化值,用于表明对象尚未被创建。

let person = null; // 尚未指向任何对象

清空对象引用:在某些情况下,我们可能需要手动地释放对象引用以便垃圾回收,这时候可以将对象赋值为 null

let person = { name: "John" };// 释放对象引用person = null;

3. null 的特性

在这里插入图片描述

类型null 被认为是一个对象类型(这也是 JavaScript 的历史遗留问题)。

===== 的对比null 仅等于 undefined,它们之间的宽松比较结果为 true,但严格比较结果为 false

console.log(null == undefined);  // trueconsole.log(null === undefined); // false

?NaN

NaN
在这里插入图片描述


1. 什么是 NaN

在这里插入图片描述

NaN 表示“不是一个数字”(Not-a-Number),它通常用于标识无法计算出有效数字结果的情况。比如,当进行非法的数学运算时,结果通常会是 NaN

示例代码:

let d = 0 / 0;console.log(d); // 输出:NaN

在上面的代码中,0 / 0 是一个无效的数学运算,所以结果为 NaN


2. NaN 的使用场景

在这里插入图片描述

非法数学运算:当尝试进行非法或不可计算的数学运算时,JavaScript 会返回 NaN

let e = Math.sqrt(-1);console.log(e); // 输出:NaN

无效的类型转换:当将无法转换为数字的字符串或其他类型转换为数字时,也会得到 NaN

let f = parseInt("Hello");console.log(f); // 输出:NaN

3. NaN 的特性

在这里插入图片描述

类型NaN 的类型是 number,尽管它表示一个无效的数值。

与自身不相等NaN 是 JavaScript 中唯一一个与自身不相等的值,NaN === NaNNaN == NaN 都会返回 false

console.log(NaN === NaN); // falseconsole.log(NaN == NaN);  // false

判断 NaN:可以使用 isNaN()Number.isNaN() 来判断一个值是否是 NaN

isNaN() 会对参数进行类型转换。Number.isNaN() 不进行类型转换,只在值本身是 NaN 时返回 true
console.log(isNaN("Hello"));           // trueconsole.log(Number.isNaN("Hello"));    // falseconsole.log(isNaN(NaN));                // trueconsole.log(Number.isNaN(NaN));         // true

?三者的区别与对比

在这里插入图片描述


1. 定义和语义

在这里插入图片描述

undefined:表示变量被声明但未赋值,或尝试访问不存在的属性。null:表示变量明确没有值,通常用于对象引用。NaN:表示“不是一个有效数字”,用于表示无效或不合法的数值计算。

2. 类型

在这里插入图片描述

undefined:是一个原始类型。null:历史上被视为对象类型。NaN:是一个数值类型(number),尽管它表示“不是一个数字”。

3. 比较

在这里插入图片描述

undefinednull

宽松相等:undefined == nulltrue。严格相等:undefined !== nulltrue,因为类型不同。
console.log(undefined == null);  // trueconsole.log(undefined === null); // false

NaN 与任何值比较

NaN 与自己不相等,NaN === NaNNaN == NaN 都为 false
console.log(NaN == NaN); // falseconsole.log(NaN === NaN); // false

4. 真假值

在这里插入图片描述

undefined:在布尔上下文中会被转换为 falsenull:在布尔上下文中会被转换为 falseNaN:在布尔上下文中也会被转换为 false

示例代码:

if (!undefined) {  console.log('undefined is false'); // 输出:undefined is false}if (!null) {  console.log('null is false'); // 输出:null is false}if (!NaN) {  console.log('NaN is false'); // 输出:NaN is false}

5. 常见错误与注意事项

在这里插入图片描述

未定义与空值的混淆undefined 表示未定义,而 null 表示空值,尽管两者宽松相等,但语义不同。undefined 通常由 JavaScript 引擎自动赋予,而 null 需要开发者显式地设置。

NaN 的不等性NaN 是 JavaScript 中最奇怪的值之一,因为它是唯一一个与自己不相等的值。在判断 NaN 时需要特别注意,不能使用 =====,应使用 isNaN()Number.isNaN()

类型转换的坑:在比较 undefinednullNaN 时,注意它们的类型转换和隐式行为,以避免意外错误。

console.log(undefined + 1); // NaNconsole.log(null + 1);      // 1console.log(NaN + 1);       // NaN

?小结

在这里插入图片描述
JavaScript 中的 undefinednullNaN 是三个特殊且非常常见的值,每个值都有其独特的用途和行为。

undefined 表示变量未定义,通常由 JavaScript 自动赋予,或访问不存在的属性时得到。null 表示空值,通常用于显式指示一个变量不再引用任何对象,或者用于初始化空对象。NaN 表示非法数值,是数值类型的一部分,常用于表示数学运算中的无效结果。

了解它们之间的区别和相似之处,以及它们如何在比较、赋值和转换中表现,是编写健壮 JavaScript 代码的重要基础。通过深入理解这些概念,可以更好地处理 JavaScript 中的异常情况,避免意外的逻辑错误,从而提高代码的质量和可维护性。


在这里插入图片描述



点击全文阅读


本文链接:http://m.zhangshiyu.com/post/201070.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1