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

news2024/11/16 6:04:13

文章目录

  • 💯前言
  • 💯`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 中的异常情况,避免意外的逻辑错误,从而提高代码的质量和可维护性。


在这里插入图片描述


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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

计算机网络学习笔记-3.3以太网和局域网

以太网 以太网(Ethernet)是一种用于计算机网络的技术规范,广泛应用于局域网(LAN)的构建。它定义了如何在网络设备之间传输数据,并确保这些数据能够被可靠传送。以太网是目前最常见和最广泛使用的局域网技术…

Linux篇(用户管理命令)

目录 一、用户与用户组 1. 为什么要做用户与用户组管理 2. Linux的用户及用户组 2.1. Linux的多用户多任务 2.2. 什么是用户 2.3. 什么是用户组 2.4. 用户和用户组的关系 二、用户和用户组管理 1. 用户组管理 1.1. 用户组添加 /etc/group文件结构 1.2. 用户组修改 …

2024-11-15 Element-ui的tab切换中table自适应宽度无法立即100%的问题

前言 今天在写一个统计图表的时候,将所有的table表格和echarts图表放到一个页面中,这样会在纵向上出现滚动条,上下滑动对用户体验不好,于是改成tab切换的形式 遇到的问题 正如标题所述,elementui在tab中使用table时&…

使用Git工具在GitHub的仓库中上传文件夹(超详细)

如何使用Git工具在GitHub的仓库中上传文件夹? 如果觉得博主写的还可以,点赞收藏关注噢~ 第一步:拥有一个本地的仓库 可以fork别人的仓库或者自己新创建 fork别人的仓库 或者自己创建一个仓库 按照要求填写完成后,点击按钮创建…

设计模式-Facade(门面模式)GO语言版本

前言 个人理解Facade模式其实日常生活中已经不知不觉就在使用了,基本核心内容就是暴露一些简单操作的接口,实现上将一些内容封装起来。 如上图,外界使用内部子系统时,只需要通过调用facade接口层面的功能,不需要了解子…

【隐私计算】隐私计算的应用场景探索(大模型隐私计算、隐私数据存储计算、Web3、隐私物联网等)

1. 背景分析 隐私计算作为一种实现“原始数据不出域,可用不可见”的数据流通价值的关键技术,经历了2020-2023年的高光时刻,却在2024年骤然走向低谷。从各种渠道了解到一些业内曾经风光无两的隐私计算公司都有不同程度的裁员。几乎一夜之间&am…

【提高篇】3.4 GPIO(四,工作模式详解 下)

四,模拟输入输出 上下拉电阻断开,施密特触发器关闭,双 MOS 管也关闭。该模式用于 ADC 采集或者 DAC 输出,或者低功耗下省电。但要注意的是 GPIO本身并不具备模拟输出输入的功能。 4.1 模拟输入 STM32内置ADC(模数转换器),可以将模拟信号转换为数字信号。GPIO引脚可以…

【青牛科技】D4147漏电保护电路介绍及应用

1、标题: D4147漏电保护电路 2、简介: 我司代理电源管理芯片,产品具有失效率低、可靠性高等特点。 3、具体应用: 相关产品介绍: 4、D4147 应用框图: D4147 方案介绍: 接地零线故障引起的接地…

【C++】深入理解自定义 list 容器中的 list_iterator:迭代器实现详解

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 📘 基础数据结构【C语言】 💻 C语言编程技巧【C】 🚀 进阶C【OJ题解】 📝 题解精讲 目录 📌 引言📌 1. 为什么 list 容器需要 list_iterator…

MuMu模拟器安卓12安装Xposed 框架

MuMu模拟器安卓12安装Xposed 框架 当开启代理后,客户端会对代理服务器证书与自身内置证书展开检测,只要检测出两者存在不一致的情况,客户端就会拒绝连接。正是这个原因,才致使我们既没有网络,又抓不到数据包。 解决方式: 通过xposed框架和trustmealready禁掉app里面校验…

MongoDB分布式集群搭建----副本集----PSS/PSA

MongoDB分布式集群 Replication 复制、Replica Set 复制集/副本集 概念 一、 副本集的相关概念 1.概念 “ A replica set is a group of mongod instances that maintain the same data set. ” 一组MongoDB服务器(多个mongod实例)(有不…

Java篇String类的常见方法

目录 一. String类的概念 1.1 String类的特性 二. 字符串的构造方式 三. 常用方法 3.1 字符串查找 3.2 字符串转换 3.3 字符串比较 3.3.1 equals( )方法 3.3.2 compare To( )方法 3.3.3 compare ToIgnoreCase( )方法 3.4 字符串替换 3.4.1 replace( )方法 3.4.2 r…

「QT」文件类 之 QDataStream 数据流类

✨博客主页何曾参静谧的博客📌文章专栏「QT」QT5程序设计📚全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定制…

MySQL45讲 第二十三讲 是怎么保证数据不丢的?

文章目录 MySQL45讲 第二十三讲 是怎么保证数据不丢的?一、binlog 写入机制(一)事务执行与 binlog cache(二)事务提交与 binlog 文件写入 二、redo log 写入机制(一)事务执行与 redo log buffer…

pgaudit插件-pgslq

使用pgaudit插件 一.介绍 postgresql可以通过log_statementall 提供日志审计,但是无法详细的提供日志信息,使用ogaudit能够提供详细的会话和对象审计日志,是PG的一个扩展插件 注意:pgAudit可能会生成大量日志。请谨慎确定要在您…

系统掌握大语言模型提示词 - 从理论到实践

以下是我目前的一些主要个人标签: 6 年多头部大厂软件开发经验;1 年多 AI 业务应用经验,拥有丰富的业务提示词调优经验和模型微调经验。信仰 AGI,已经将 AI 通过自定义 Chatbot /搭建 Agent 融合到我的工作流中。头部大厂技术大学…

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件

Vue 项目打包后环境变量丢失问题(清除缓存),区分.env和.env.*文件 问题背景 今天在导报项目的时候遇到一个问题问题:在开发环境中一切正常,但在打包后的生产环境中,某些环境变量(如 VUE_APP_B…

群控系统服务端开发模式-应用开发-前端菜单功能开发

今天优先开发菜单及角色,明天将开发岗位配置、级别配置等功能。具体看下图 而前端的路由不需要手动添加,是依据数据库里面存储的路径。 一、添加视图 在根目录下src文件夹下views文件夹下permission文件夹下menu文件夹下,新建index.vue&…

数据结构Python版

2.3.3 双链表 双链表和链表一样,只不过每个节点有两个链接——一个指向后一个节点,一个指向前一个节点。此外,除了第一个节点,双链表还需要记录最后一个节点。 每个结点为DLinkNode类对象,包括存储元素的列表data、…

【HarmonyOS学习日志(8)】UIAbility,HAP,AbilityStage组件及其生命周期

基本概念 UIAbility组件是一种包含UI的应用组件,主要用于和用户交互。 在项目创建时,系统默认生成的EntryAbility类继承了UIAbility类。 ExtensionAbility组件:是基于特定场景(例如服务卡片、输入法等)提供的应用组件…