前端知识速记—JS篇:null 与 undefined

前端知识速记—JS篇:null 与 undefined

什么是 nullundefined

1. undefined 的含义

undefined 是 JavaScript 中默认的值,表示某个变量已被声明但尚未被赋值。当尝试访问一个未初始化的变量、函数没有返回值时,都会得到 undefined

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

2. null 的含义

null 是一个表示“无”或“空值”的对象类型。它通常用来表示一个变量拥有一个空值,而这个空值是可以被赋予的。换句话说,null 是一种明确的赋值状态,表示该变量是空的。

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

nullundefined 的区别

1. 赋值状态

undefined 表示变量已经声明但没有值;而 null 则是显式赋予的空值。你可以将 undefined 视作“未定义的状态”,而 null 视为一个明确的“空状态”。

2. 类型

你可以使用 typeof 运算符检查它们的类型,结果显示它们各自的不同:

console.log(typeof undefined); // 输出: undefined
console.log(typeof null);      // 输出: object

尽管 null 是一个对象,但它实质上表示的是“没有值”,这也是 JavaScript 中的一大奇妙之处。

如何有效使用 nullundefined

1. 决定何时使用

在编程时,有效的选择 nullundefined 可以帮助你的代码可读性和逻辑性。例如,当你希望一个变量具有一个“空”状态时,使用 null 来表明此意图是一个好主意。而对于尚未赋值的变量,undefined 则是合适的选择。

2. 结合使用示例

考虑一个简易的用户注册表单,用户输入为 null 时表示未填写,反之为 undefined 可以用于检查是否已进行注册。

function registerUser(username) {
    if (username === undefined) {
        return "用户名不能为空";
    }
    // 其他处理代码
    console.log(`用户 ${username} 注册成功!`);
}

console.log(registerUser()); // 输出: 用户名不能为空
console.log(registerUser(null)); // 输出: 用户 null 注册成功!

小贴士:防止混淆

在实际开发中,理解 nullundefined 的重要性不可忽视。以下是一些小贴士帮助你防止混淆:

  • 使用 ===!== 进行比较,避免因为类型转换而产生的意外结果。
  • 使用 try...catch 语句捕获潜在的错误,确保代码运行的稳定。
  • 对象的属性在未定义情况下仍然存在,但其值为 undefined,这一点需要特别注意。

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

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

相关文章

新鲜速递:DeepSeek-R1开源大模型本地部署实战—Ollama + MaxKB 搭建RAG检索增强生成应用

在AI技术快速发展的今天,开源大模型的本地化部署正在成为开发者们的热门实践方向。最火的莫过于吊打OpenAI过亿成本的纯国产DeepSeek开源大模型,就在刚刚,凭一己之力让英伟达大跌18%,纳斯达克大跌3.7%,足足是给中国AI产…

用BGP的路由聚合功能聚合大陆路由,效果显著不?

正文共:666 字 11 图,预估阅读时间:1 分钟 之前我们统计过中国境内的IP地址和路由信息(你知道中国大陆一共有多少IPv4地址吗?),不过数量比较多,有8000多条。截止到2021年底&#xff…

AI DeepSeek-R1 Windos 10 环境搭建

1、安装: 下载 Python |Python.org CUDA Drivers for MAC Archive | NVIDIA pip 和virtualenv Download Ollama on Windows 如下图 2、下载模型 deepseek-r1 ollama run deepseek-r1 或者可以ollama run deepseek-r1:8b 或 3、安装一个可视化对话Chatbox 下载 …

SOME/IP--协议英文原文讲解4

前言 SOME/IP协议越来越多的用于汽车电子行业中,关于协议详细完全的中文资料却没有,所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块: 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 4.1.3 End…

工作总结:git篇

文章目录 前言基础Gerrit1.克隆2.新建本地分支和checkout3.添加到暂存区新增文件到暂存区修改已经添加到暂存区的文件取消添加到暂存区的文件 4.提交到本地仓库在不重复提交的情况下,修改本次提交 5.提交到远程仓库6.评审其他辅助命令 前言 目前也算是工作一段时间…

SpringCloud系列教程:微服务的未来(十七)监听Nacos配置变更、更新路由、实现动态路由

前言 在微服务架构中,API 网关是各个服务之间的入口点,承担着路由、负载均衡、安全认证等重要功能。为了实现动态的路由配置管理,通常需要通过中心化的配置管理系统来实现灵活的路由更新,而无需重启网关服务。Nacos 作为一个开源…

WireShark4.4.2浏览器网络调试指南:数据统计(八)

概述 Wireshark 是一款功能强大的开源网络协议分析软件,被广泛应用于网络调试和数据分析。随着互联网的发展,以及网络安全问题日益严峻,了解如何使用 Wireshark进行浏览器网络调试显得尤为重要。最新的 Wireshark4.4.2 提供了更加强大的功能…

【2025年数学建模美赛E题】(农业生态系统)完整解析+模型代码+论文

生态共生与数值模拟:生态系统模型的物种种群动态研究 摘要1Introduction1.1Problem Background1.2Restatement of the Problem1.3Our Work 2 Assumptions and Justifications3 Notations4 模型的建立与求解4.1 农业生态系统模型的建立与求解4.1.1 模型建立4.1.2求解…

Eureka 服务注册和服务发现的使用

1. 父子工程的搭建 首先创建一个 Maven 项目&#xff0c;删除 src &#xff0c;只保留 pom.xml 然后来进行 pom.xml 的相关配置 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xs…

【PowerShell专栏】实现Terminal工具的安装

微软已经发布了Windows Terminal的版本,提供各个命令操作工具的集成环境,在Windows Terminal中,我们可以集中实现多页签的各个命令方式,相比传统的命令执行分离,着实方便了不少。图为Terminal 界面: 如何实现Windows Terminal的安装呢?有好几种方式可以实现Windows Term…

从0到1:C++ 开启游戏开发奇幻之旅(二)

目录 游戏开发核心组件设计 游戏循环 游戏对象管理 碰撞检测 人工智能&#xff08;AI&#xff09; 与物理引擎 人工智能 物理引擎 性能优化技巧 内存管理优化 多线程处理 实战案例&#xff1a;开发一个简单的 2D 射击游戏 项目结构设计 代码实现 总结与展望 游戏…

九大服务构建高效 AIOps 平台,全面解决GenAI落地挑战

最近,DevOps运动的联合创始人Patrick Debois分享了他对AI平台与软件研发关系的深刻见解,让我们一起来探讨这个话题。 在AI的落地过程中,我们面临着两个主要难题: 引入AI编码工具后的开发者角色转变:随着像GitHub Copilot这样的AI工具的普及,工程师的角色正在发生深刻变革…

LangChain概述

文章目录 为什么需要LangChainLLM应用开发的最后1公里LangChain的2个关键词LangChain的3个场景LangChain的6大模块 为什么需要LangChain 首先想象一个开发者在构建一个LLM应用时的常见场景。当你开始构建一个新项目时&#xff0c;你可能会遇到许多API接口、数据格式和工具。对于…

【浏览器 - Mac实时调试iOS手机浏览器页面】

最近开发个项目&#xff0c;需要在 Mac 电脑上调试 iOS 手机设备上的 Chrome 浏览器&#xff0c;并查看Chrome网页上的 console 信息&#xff0c;本来以为要安装一些插件&#xff0c;没想到直接使用Mac上的Safari 直接可以调试&#xff0c;再此记录下&#xff0c;分享给需要的伙…

【Rust自学】15.4. Drop trait:告别手动清理,释放即安全

喜欢的话别忘了点赞、收藏加关注哦&#xff08;加关注即可阅读全文&#xff09;&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 15.4.1. Drop trait的意义 类型如果实现了Drop trait&#xff0c;就可以让程序员自定义当值…

C动态库的生成与在Python和QT中的调用方法

目录 一、动态库生成 1&#xff09;C语言生成动态库 2&#xff09;c类生成动态库 二、动态库调用 1&#xff09;Python调用DLL 2&#xff09;QT调用DLL 三、存在的一些问题 1&#xff09;python调用封装了类的DLL可能调用不成功 2&#xff09;DLL格式不匹配的问题 四、…

SpringBoot 整合 SSM

文章目录 SpringBoot 整合 SSM第一步&#xff1a;使用 Spring Initializr 创建项目第二步&#xff1a;现在配置类中配置数据库第三步&#xff1a;进行 MyBatis 相关操作编写数据表对应的实体类创建 mapper 接口利用 MyBaitsX 插件快速创建 xml 文件创建 Mapper 接口 SQL 实现在…

JVM 面试题相关总结

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…

C++ unordered_map和unordered_set的使用,哈希表的实现

文章目录 unordered_map&#xff0c;unorder_set和map &#xff0c;set的差异哈希表的实现概念直接定址法哈希冲突哈希冲突举个例子 负载因子将关键字转为整数哈希函数除法散列法/除留余数法 哈希冲突的解决方法开放定址法线性探测二次探测 开放定址法代码实现 哈希表的代码 un…

JAVA实战开源项目:网上订餐系统(Vue+SpringBoot) 附源码

本文项目编号 T 039 &#xff0c;文末自助获取源码 \color{red}{T039&#xff0c;文末自助获取源码} T039&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计 六、核…