JavaScript 中的 undefined 、null 与 NaN :概念解析与对比


文章目录

  • 💯前言
  • 💯`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);  // true
    console.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);  // true
    console.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); // false
    console.log(NaN == NaN);  // false
    
  • 判断 NaN:可以使用 isNaN()Number.isNaN() 来判断一个值是否是 NaN

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

💯三者的区别与对比

在这里插入图片描述


1. 定义和语义

在这里插入图片描述

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

2. 类型

在这里插入图片描述

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

3. 比较

在这里插入图片描述

  • undefinednull

    • 宽松相等:undefined == nulltrue
    • 严格相等:undefined !== nulltrue,因为类型不同。
    console.log(undefined == null);  // true
    console.log(undefined === null); // false
    
  • NaN 与任何值比较

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

4. 真假值

在这里插入图片描述

  • undefined:在布尔上下文中会被转换为 false
  • null:在布尔上下文中会被转换为 false
  • NaN:在布尔上下文中也会被转换为 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); // NaN
    console.log(null + 1);      // 1
    console.log(NaN + 1);       // NaN
    

💯小结

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

    • undefined 表示变量未定义,通常由 JavaScript 自动赋予,或访问不存在的属性时得到。
    • null 表示空值,通常用于显式指示一个变量不再引用任何对象,或者用于初始化空对象。
    • NaN 表示非法数值,是数值类型的一部分,常用于表示数学运算中的无效结果。
  • 了解它们之间的区别和相似之处,以及它们如何在比较、赋值和转换中表现,是编写健壮 JavaScript 代码的重要基础。通过深入理解这些概念,可以更好地处理 JavaScript 中的异常情况,避免意外的逻辑错误,从而提高代码的质量和可维护性。


在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/916609.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C++编程技巧与规范-类和对象

类和对象 1. 静态对象的探讨与全局对象的构造顺序 静态对象的探讨 类中的静态成员变量(类类型静态成员) 类中静态变量的声明与定义&#xff08;类中声明类外定义&#xff09; #include<iostream> using namespace std;namespace _nmspl {class A{public:A():m_i(5){…

python遇到问题

1&#xff0c;BeautifulSoup lxml 解析器安装 问 1&#xff0c;BeautifulSoup lxml 解析器安装2&#xff0c;BeautifulSoup 如何引入第三方库 BeautifulSoup lxml&#xff0c;默认是导入的是python内置的解析器答1 1. 安装 Python 和 pip 确保你已经安装了 Python 和 pip。你…

async 和 await的使用

一、需求 点击按钮处理重复提交&#xff0c;想要通过disabled的方式实现。 但是点击按钮调用的方法里有ajax、跳转、弹窗等一系列逻辑操作&#xff0c;需要等方法里流程都走完&#xff0c;再把disabled设为false&#xff0c;这样下次点击按钮时就可以继续走方法里的ajax等操作…

MacOS下,如何在Safari浏览器中打开或关闭页面中的图片文字翻译功能

MacOS下&#xff0c;如何在Safari浏览器中打开或关闭页面中的图片文字翻译功能 在Mac上的Safari浏览器中&#xff0c;可以通过实况文本功能来实现图片中的文本翻译。关闭步骤具体步骤如下&#xff1a; 在浏览器地址栏&#xff0c;鼠标右击翻译按钮&#xff0c;然后点击“首选…

31.2 DOD压缩和相关的prometheus源码解读

本节重点介绍 : 时序数据时间的特点DOD压缩原理讲解dod压缩过程讲解dod压缩 prometheus源码解读 时序数据时间的特点 持续采集采集间隔固定&#xff0c;如prometheus配置job中的scrape_interval参数每隔15秒采集一次 - job_name: node_exporterhonor_timestamps: truescrape…

推荐一款好用的ios传输设备管理工具:AnyTrans for iOS

AnyTrans for iOS是一款好用的ios传输设备管理工具&#xff0c;可以方便用户对iphone、ipad、ipod中的文件进行管理操作&#xff0c;可以方便用户在电脑上进行各类文件的管理操作&#xff0c;支持联系人、视频、音频、短信、图片等文件的导入&#xff0c;软件支持双向传输和浏览…

快速利用c语言实现线性表(lineList)

线性表是数据结构中最基本和简单的一个&#xff0c;它是n的相同类型数据的有序序列&#xff0c;我们也可以用c语言中的数组来理解线性表。 一、线性表声明 我们定义一个线性表的结构体&#xff0c;内部有三个元素&#xff1a;其中elem是一个指针&#xff0c;指向线性表的头&am…

计算机毕业设计Python+CNN卷积神经网络股票预测系统 股票推荐系统 股票可视化 股票数据分析 量化交易系统 股票爬虫 股票K线图 大数据毕业设计 AI

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

QT QLineEdit失去焦点事件问题与解决

本文介绍如何获得QLineEdit的失去焦点事件和获得焦点的输入框也会触发失去焦点事件的问题&#xff01; 目录 一、QLineEdit获得失去焦点事件 1.自定义类继承自QLineEdit 2.重写 focusOutEvent 3.使用 二、失去焦点事件问题 1.问题描述 2.问题解决 三、源码分享 lineed…

vscode执行npm install报错

npm install一直提示报错 以管理员身份运行vscode&#xff0c;如果每次觉得很麻烦可以做如下修改&#xff1a;

【算法】树状数组

前言 众所周知&#xff0c;通过前缀和&#xff0c;我们可以很快的在一个很大的数组中求出区间和&#xff0c;但是如果想要去修改数组中的一个数的值&#xff0c;前缀和就无法实现。所以来学习一个新的数据结构&#xff1a;树状数组 &#xff08;文章中关于树状数组的截图来自于…

Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。获取源码联系方式请查看文末 一、前言 在城市化进…

ZeroSSL HTTPS SSL证书ACMESSL申请3个月证书

目录 一、引言 二、准备工作 三、申请 SSL 证书 四、证书选型 五、ssl重要性 一、引言 目前免费 Lets Encrypt、ZeroSSL、BuyPass、Google Public CA SSL 证书&#xff0c;一般免费3-6个月。从申请难易程度分析&#xff0c;zerossl申请相对快速和简单&#xff0c;亲测速度非…

pipx安装提示找不到包

执行&#xff1a; pipx install --include-deps --force "ansible6.*"WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) after connection broken by NewConnectionError(<pip._vendor.urllib3.connection.HTTPSConnection …

react + ts定义接口类型写法

接口&#xff08;未进行ts定义&#xff09; export async function UserList(params: {// keyword?: string;current?: number;pageSize?: number;},// options?: { [key: string]: any }, ) {return request<API1.UserList>(http://geek.itheima.net/v1_0/mp/artic…

Golang超详细入门教程

Golang超详细入门教程 部分图片可能加载不出来&#xff0c;所以这里我上传到了自己的个人网站上也可以查看&#xff1a;http://dahua.bloggo.chat/testimonials/490.html 一、数据类型转换 C语言中数据可以隐式转换或显示转换, 但是Go语言中数据只能显示转换格式: 数据类型(…

Cannot resolve org.apache.tomcat.embed:tomcat-embed-core:9.0.60标红解决办法

解决方法是&#xff1a; MyBatis 会扫描这个包下的所有接口&#xff0c;并将这些接口注册为 MyBatis 的 Mapper。 把这个加上后&#xff0c;问题解决&#xff01;

游戏引擎学习第九天

视频参考:https://www.bilibili.com/video/BV1ouUPYAErK/ 修改之前的方波数据&#xff0c;改播放正弦波 下面主要讲关于浮点数 1. char&#xff08;字符类型&#xff09; 大小&#xff1a;1 字节&#xff08;8 位&#xff09;表示方式&#xff1a;char 存储的是一个字符的 A…

C#设计模式(12)——享元模式(Flyweight Pattern)

前言 享元模式通过共享对象来减少内存使用和提高性能。 代码 public abstract class Flyweight {public abstract void Control(); }public class ComputerFlyweight : Flyweight {private string _operator;public ComputerFlyweight(string name){_operator name;}public o…

upload-labs通关练习

目录 环境搭建 第一关 第二关 第三关 第四关 第五关 第六关 第七关 第八关 第九关 第十关 第十一关 第十二关 第十三关 第十四关 第十五关 第十六关 第十七关 第十八关 第十九关 第二十关 总结 环境搭建 upload-labs是一个使用php语言编写的&#xff0c…