null、undefined、NaN的区别。它们之间的隐式转换和全等结果又是什么?

2023-11-02

前言

在 JavaScript 中,null、undefined 和 NaN 是三种不同的特殊值,它们在使用时有着不同的含义和用途。而我们在做项目时候,常常与它们打交道。

因此,在编写 JavaScript 代码时需要了解它们之间的区别和相互之间的隐式转换,以避免产生错误或不可预料的行为。比如:

1. 在使用 if 语句进行条件判断时,没有考虑到 undefined 可能隐式转换为 false。

let foo;
if (foo) {
  console.log("This should not be executed");
}

在这个例子中,由于 foo 的值为 undefined,因此 if 语句会将其隐式转换为 false,从而不执行其中的代码。如果忘记了这种隐式转换,就可能导致逻辑上的错误。

2. 在进行数学运算时,没有考虑到 NaN 的影响。

let bar = "hello";
console.log(bar - 1); // NaN
console.log(typeof (bar - 1)); // number

在这个例子中,由于将一个字符串减去一个数字会产生 NaN,因此 bar - 1 的结果就是 NaN。如果没有考虑到 NaN 的影响,就可能导致无效的计算结果或不可预测的行为。

3.在进行对象属性访问时,没有考虑到某个属性的值可能为 undefined。

let baz = {};
console.log(baz.prop); // undefined
console.log(baz.prop.foo.bar); // TypeError: Cannot read property 'foo' of undefined

在这个例子中,由于 baz 对象中不存在名为 prop 的属性,因此访问 baz.prop 会返回 undefined。然而,再次访问 undefined.prop.foo.bar 就会导致 TypeError 错误。如果没有考虑到这种情况,就可能导致运行时错误。

一、null

null 表示一个空对象指针。当一个变量被赋值为 null 时,它表示一个空对象引用,并且 typeof 运算符会返回 "object"。

let foo = null;
console.log(foo); // null
console.log(typeof foo); // object

二、undefined

undefined 表示一个未定义的值。当一个变量被声明但没有被赋值时,它的值为 undefined。同时,函数没有返回值时也会返回 undefined。typeof 运算符会返回 "undefined"。

let bar;
console.log(bar); // undefined
console.log(typeof bar); // undefined

function baz() {}
console.log(baz()); // undefined

三、NaN

NaN 表示不是数字的值。当进行无效的数学操作或将非数字字符串转换为数字时,会返回 NaN。NaN 与任何值(包括它自己)都不相等。

console.log(0 / 0); // NaN
console.log("hello" - 1); // NaN
console.log(NaN == NaN); // false

NaN 与任何值(包括它自己)都不相等这里可能有人不能理解。NaN和NaN明明长得一样,为什么不相等呢?可以从它的定义去理解“不是数字的值”表示这个值仅仅不是数字,可以是除数字外的任何值,既然是任何值了,两个不是数字的任何值,自然不相等。

四、==和===的情况

在 JavaScript 中,null、undefined 和 NaN 之间的相等比较是一个比较微妙的问题。由于它们的含义和类型都不同,因此它们之间的相等比较有时可能会产生出人意料的结果。

  • ==的特殊情况

1. null 和 undefined

特别注意:null 和 undefined 相等比较时,它们会相等!这是因为在 JavaScript 中,它们被认为是相同类型的“空值”。

console.log(null == undefined); // true
console.log(null == null); // true
console.log(undefined == undefined); // true
console.log(null == 0); // false
console.log(undefined == "hello"); // false

2. NaN

NaN 和任何值,包括 NaN 自身,在相等比较时都不相等。这是因为 NaN 表示不是数字的值,它与任何值的比较结果都为 false。

console.log(NaN == NaN); // false
console.log(NaN == 0); // false
console.log(NaN == "hello"); // false

需要注意的是,虽然 NaN 与任何值比较的结果都为 false,但在使用 isNaN() 函数时,它会将传入的值转换为数字后再进行比较。

console.log(isNaN(NaN)); // true  NaN转为数字是NaN
console.log(isNaN("hello")); // true  字符串转化为数字是NaN
console.log(isNaN(undefined)); // true  undefined转化为数字是NaN,因为 undefined 表示一个未定义的值,在转换为数字时没有明确的意义
console.log(isNaN(null)); // false  null转化为数字是0
  • ===的特殊情况

ull、undefined 和 NaN 是不同的类型,在严格相等比较(===)时会被认为是不相等的。同时,与 NaN 进行严格相等比较时,无论与哪个值比较都会返回 false,因为 NaN 是唯一不等于自身的值。

console.log(null === undefined); // false
console.log(null === null); // true
console.log(undefined === undefined); // true
console.log(NaN === null); // false
console.log(NaN === undefined); // false
console.log(NaN === NaN); // false

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

null、undefined、NaN的区别。它们之间的隐式转换和全等结果又是什么? 的相关文章

随机推荐

  • QQ小程序广告代码

    qml内代码
  • elasticsearch查看分词结果

    第一种情况 查看任意一段文本 能分成哪些词汇 http localhost 9200 analyze POST 第二种情况 查看已经入库的数据 分词情况 http localhost 9200 index type id termvecto
  • keil中出现Undefined symbol 等问题解决办法

    在keil中仿照别人的程序写了RCC初始化的程序 编译后出现以下问题 obj pro1 axf Error L6218E Undefined symbol FLASH PrefetchBufferCmd referred from main
  • C++动态内存管理——智能指针

    智能指针 1 什么是智能指针 智能指针 smart pointer 是存储指向动态分配 堆 对象指针的类 用于生存期控制 能够确保自动正确的销毁动态分配的对象 防止内存泄露 利用自动调用类的析构函数来释放内存 实现技术是使用引用计数 sha
  • C++——WebServer服务器项目

    项目场景 C WebServer服务器编程 项目搭建 1 配置虚拟机 下载XShell Xftp以及windows版本的VScode 2 安装SSH sudo apt install openssh server 3 在XShell中配置会
  • Parcel打包React

    Parcel打包React Parcel介绍 Parcel 官网 parceljs org 官网上的介绍 极速零配置Web应用打包工具 什么 对的 你没看错 它标称的零配置打包 这个打包工具其实在一些大厂 开发 Electron 和 Rea
  • PAT C入门题目-7-18 出租车计价 (15 分)

    7 18 出租车计价 15 分 本题要求根据某城市普通出租车收费标准编写程序进行车费计算 具体标准如下 起步里程为3公里 起步费10元 超起步里程后10公里内 每公里2元 超过10公里以上的部分加收50 的回空补贴费 即每公里3元 营运过程
  • MAC安装Securecrt

    文章目录 一 下载地址 二 安装软件 1 下载的文件有2个 一个是安装包 一个是安装文件 2 打开安装包以后 将安装程序拖到应用程序中 三 执行安装文件 1 执行安装 2 错误解决 四 安装软件 1 打开SecureCTR后 选择Enter
  • 关于Swagger中访问不了文档页面

    因为在SpringBoot启动类中 没有加上 EnableSwagger2WebMvc注解 这个注解的作用是启用swagger对应用程序暴露的API端点进行文档化 个人推断和拦截器拦截请求有关 解决办法就是加 EnableSwagger2W
  • 计算机精英ACM fellow和ACM杰出科学家,各校校友统计

    首先谢谢东南 大学网友青山人的统计工作 http bbs netbig com thread 2675926 1 1 html 人数相同 按照学校名称拼音排序 先统计最高荣誉 ACM Fellow 1 的精英 中国科大 81硕 李 凯 19
  • Spring面试问答Top 25

    本人收集了一些在大家在面试时被经常问及的关于Spring的主要问题 这些问题有可能在你下次面试时就会被问到 对于本文中未提及的Spring其他模块 我会单独分享面试的问题和答案 欢迎大家向我推荐你在面试过程中遇到关于Spring的问题 我会
  • APP 性能测试工具

    一 APP 自动化测试工具Appium 官网 http appium io GitHub 地址 https github com appium appium 介绍 Appium 是一个开源的 跨平台的自动化测试工具 支持自动化 iOS An
  • 使用adb 命令(atrace)抓起systrace的方法。【转】

    本文转载自 https www cnblogs com liuliu word p 9963017 html adb shell atrace c b 10240 async start z gfx 1 执行查看adb shell atra
  • 【Python案例】一键自动抠图生成证件照

    0 效果与体验 不想去照相馆 担心肖像隐私被第三方获取 不会抠图 本文实现基于人工智能的一键自动抠图生成证件照 在进入正文之前 先看最终效果 为了让读者快速体验 我写了个小程序 证照工具箱 可打开直接体验 1 人脸检测 在制作证件照时 首选
  • Windows下用pandoc将LaTex转成Word——使用错误总结

    以下是废话阶段 一般期刊投稿都是latex版本啊 奈何有时候机缘总是那么巧合 假如需要word版本呢 科研的乐趣 不就是发现问题 解决问题嘛 那么 就开始愉快地解决问题吧 以下是正片 首先 从无到有的过程当然是先借鉴别人的东西啦 所以 我主
  • idea自动生成类和方法注释

    idea自动生成类和方法注释 一 类注释 方式一 打开settings gt File and COde Templates 选中Files gt Class 添加类注释信息 新建一个类 就会看到类上会自动添加注释 方式二 通过设置文件头来
  • 超5星难度【微软Core allocation】Coding赛题 - 解题思路&优秀代码分享,邀你来“找茬儿”

    6月23日英雄会平台发布了一道难度为超5星的微软比赛题目 截止活动结束共有300多名编程爱好者参与线上答题 而最终通过者仅有7人 通过率仅为2 为什么成绩如此出人意料 是因为原题的英文描述难以理解 还是题目本身的难度太高让很多人望而生畏知难
  • Web前端简易复习手册(一)

    Web前端复习题 一 1 创建js对象的几种方式 2 如何访问对象属性和方法 3 解构是什么 4 什么是原型 原型链 5 基于原型的继承两种方式 6 实例成员 7 原型成员 8 类成员 9 Rest参数含义 10 简述arguments对象
  • 动手学数据分析 Task 1

    动手学数据分析 Task 1 一 数据加载 二 Pandas基础 三 探索性数据分析 一 数据加载 项目源数据请见 kaggle 1 对于csv中的数据 pandas库提供两种方法来读取 分别为 read csv 和read table 二
  • null、undefined、NaN的区别。它们之间的隐式转换和全等结果又是什么?

    前言 在 JavaScript 中 null undefined 和 NaN 是三种不同的特殊值 它们在使用时有着不同的含义和用途 而我们在做项目时候 常常与它们打交道 因此 在编写 JavaScript 代码时需要了解它们之间的区别和相互