js和ts中的null与undefined

本文在个站同步发布,您可以在>>这里看到最新的文章。

1 定义

本文中的undefinednull指变量的字面值:

  • undefined:已声明但未初始化的变量值
  • null:未定义(不存在)的变量值

例如:

var var1: number;
var var2: number = null;

在以上代码中,var1的值为undefined,而var2则被显式地定义为null

不过需要注意的一点是,使用typeof查看上述变量var2的类型时,返回值并不是null

console.log(typeof undefined); //'undefined'
console.log(typeof var1); //'undefined'console.log(typeof null); //'object'
console.log(typeof var2); //'object'

2 null/undefined变量

2.1 常见场景举例

1、变量值为undefined

在Midway框架中,通常在Controller中通过装饰器写法声明需要接收的参数,例如:

// src/controller/user.ts
// POST /user/ HTTP/1.1
// Host: localhost:3000
// Content-Type: application/json; charset=UTF-8
//
// {"uid": "1", "name": "harry"}
import { Controller, Post, Body } from '@midwayjs/core';@Controller('/user')
export class UserController {@Post('/')async updateUser(@Body('uid') uid: string): Promise<User> {// id 等价于 ctx.request.body.uid}
}

※以上代码摘自Midway (midwayjs.org)

此时,若客户端未在请求中传送需要的参数uid,则uid = undefined,因为uid已被声明但尚未初始化。

2、变量值为null

进行数据库操作时,如果数据库中某个非必填字段的值为null,那么相应的,Prisma ORM返回的字段属性值也为null

// ...前略
export class UserService {@Injectdb:DB //注入async updateUser(uid: string, data:User){const res = await this.db.user.update({where: { uid },data,});}
}

update API的返回值为User类型的JavaScript对象,假设表中的age为非必填字段,且没有设置合适的初始值,那么上述代码中的res.age就有可能为null

2.2 初始化

为保证代码的鲁棒性,理应在业务代码前先对可能出现undefinednull(下文统称为“空值”)的入参进行处理。

在JavaScript中常见的做法是使用||运算符处理空值,例如:

uid = uid || '';

这段代码的出发点是,当uid为空值时,执行uid = ''。但由于||运算符不仅会放行空值,还会放行0、false,因此当参数为数值型或布尔型时,需要使用typeof结合三元运算符进行处理。

TypeScript语言考虑到上述情况,新增了一种名为Nullish Coalescing的运算符,也就是我们常说的双问号运算(??)。这种运算支持识别nullundefined,在处理空值时不再需要对数值型和布尔型数据进行特判:

null ?? "Value";
// "Value"undefined ?? "Value";
// "Value"false ?? true;
// false0 ?? 100;
// 0"" ?? "n/a";
// ""NaN ?? 0;
// NaN

※上述代码摘自这篇博文。

因此,我们可以这样对入参进行处理

uid = uid ?? '';

3 判别

1、判别是否为nullundefined

var x;
if(x==null){console.log(`x is null or undefined`);
}

2、判断是否为null

if(x===null){console.log(`x is null`);
}

注意,【不可以】使用typeof进行判断,如果你忘了为什么,可以复习一下第1节的最后一个code block。

3、判断是否为undefined

if(typeof x === 'undefined'){console.log(`x is undefined`);
}

4 鲁棒性写法

为防止对象或对象的某一个属性对象为空,导致代码报错,TypeScript提出了一种叫做“可选链?.”的运算符,它的功能是:在访问对象属性的过程中遇到空值时,①立即停下,②返回undefined。例如:

const obj =
{branch1: {}
}console.log(obj.branch1?.emp1?.name); //undefined

※以上代码摘自这篇博文。

由于obj.branch.emp1未定义,返回undefined

使用可选链运算符,就可以省去逐层判空的代码了。

参考

文章参考的博文:

  • 在 TypeScript 中检查 Null 和 Undefined | D栈 - Delft Stack
  • JavaScript 判断 null 、undefined、NaN的可靠方法、验证以及注意事项 - CSDN博客

文章中提到的框架:

  • Midway (midwayjs.org)

  • Prisma 中文网 (nodejs.cn)

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

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

相关文章

代码随想录刷题——5双指针法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言5.1 移除元素&#xff08;3.30&#xff09;5.2 翻转字符串&#xff08;3.30&#xff09;5.3 替换数字&#xff08;3.30&#xff09;5.4 翻转字符串里的单词(3.3…

Halcon TCP 服务端接收命令

Halcon TCP 服务端接收命令 * 1.创建服务端 ***************************************** 协议 Protocol : TCP4 * 端口 Port : 5321 * 超时 Timeout : 1.0* 打开TCP服务端 open_socket_accept (Port, [protocol, timeout], \[Protocol,Timeout], AcceptingSocket)* 2.循环接受…

Netty和websocket,如何部署Netty

Netty是一个**高性能、异步事件驱动的网络应用框架**。 Netty是基于Java NIO&#xff08;非阻塞IO&#xff09;实现的&#xff0c;它提供了一套易于使用的API&#xff0c;帮助开发者能够更高效地开发出网络应用程序。以下是Netty的一些主要特点&#xff1a; 1. **异步和事件驱…

使用开源AI引擎:提高合同管理效率与合规性方案|可本地化部署

合同管理是企业运营中的关键环节&#xff0c;它不仅涉及到企业的经济利益&#xff0c;还直接关系到企业的法律风险控制。随着企业规模的扩大和业务的复杂化&#xff0c;传统的人工合同审核方式已经难以满足高效、准确的管理需求。因此&#xff0c;采用技术手段提高合同管理的效…

Vue基础知识:vue路由——模式设置(hash路由,history路由)

路由的路径会出现#,能否将#符号去掉。 1.hash路由&#xff08;默认&#xff09; 例如&#xff1a; “http//local:8080/#/home” 哈希路由&#xff0c;它的底层基于a标签锚 2.history路由&#xff08;常用&#xff09;例如&#xff1a; “http//local:8080/home”&#xff08…

LabVIEW数控磨床振动分析及监控系统

LabVIEW数控磨床振动分析及监控系统 在现代精密加工中&#xff0c;数控磨床作为关键设备之一&#xff0c;其加工质量直接影响到产品的精度与性能。然而&#xff0c;磨削过程中的振动是影响加工质量的主要因素之一&#xff0c;不仅会导致工件表面质量下降&#xff0c;还可能缩短…

zdpdjango_argonadmin Django后台管理系统中的常见功能开发

效果预览 首先&#xff0c;看一下这个项目最开始的样子&#xff1a; 左侧优化 将左侧优化为下面的样子&#xff1a; 代码位置&#xff1a; 代码如下&#xff1a; {% load i18n static admin_argon %}<aside class"sidenav bg-white navbar navbar-vertical na…

【Go】十八、管道

文章目录 1、管道2、管道的定义3、管道的关闭4、管道的遍历5、管道 协程6、只读、只写管道7、管道的阻塞8、select 1、管道 channel本质是一个队列&#xff0c;先进先出自身线程安全&#xff0c;多协程访问时&#xff0c;不用加锁&#xff0c;channel本身就是线程安全的一个s…

RCE(远程命令执行)漏洞详解

漏洞描述 RCE(remote command/code execute&#xff0c;远程命令执行)漏洞 远程代码执行 (RCE) 攻击是指攻击者可以在一个组织的计算机或网络上运行恶意代码。执行攻击者控制的代码的能力可用于各种目的&#xff0c;包括部署额外的恶意软件或窃取敏感数据。 漏洞原理 远程代…

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(六)- 向量内存一致性模型

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

练习 19 Web [BJDCTF2020]Easy MD5

如果你是第一批做这个题的&#xff0c;这道题一点也不easy 打开在前端代码里面看到&#xff0c;输入框输入的内容实际是’password’ 随意输入内容&#xff0c;查看响应header中的内容有一句SQL代码&#xff0c;可知我们要让password在md5后返回值为true 然后尬住&#xff…

蓝桥杯嵌入式(G431)备赛笔记——LED

目录 cubeMX配置&#xff1a; 代码模板&#xff1a; 注意&#xff1a; cubeMX配置&#xff1a; 原理图&#xff0c;其中PD2高电平使能锁存器&#xff0c;PC8-15默认给高电平&#xff0c;放置上电初始化LED亮 74HC573是八路输出锁存器 1脚是使能&#xff0c;低电平有效&#…

05-延迟任务精准发布文章

延迟任务精准发布文章 1)文章定时发布 2)延迟任务概述 2.1)什么是延迟任务 定时任务&#xff1a;有固定周期的&#xff0c;有明确的触发时间延迟队列&#xff1a;没有固定的开始时间&#xff0c;它常常是由一个事件触发的&#xff0c;而在这个事件触发之后的一段时间内触发…

汽车统一诊断服务UDS协议参考文章和视频

UDS基础知识介绍-电子发烧友网 【图解UDS】UDS汽车诊断标准协议&#xff08;ISO14229&#xff09;带你入门到精通-有驾 车载测试之UDS诊断协议9&#xff1a;0x27服务&#xff1a;解锁ECU_哔哩哔哩_bilibili UDS诊断的22服务&#xff08;DID读取数据&#xff09;和2E服务&…

深度剖析鞋服品牌商品数字化管理的重要性

随着信息技术的迅猛发展与市场竞争的加剧&#xff0c;鞋服品牌商品数字化管理的重要性愈发凸显。数字化管理不仅关乎企业运营效率的提升&#xff0c;更是品牌实现差异化竞争、提升顾客体验、构建智慧零售生态的关键所在。对于鞋服品牌企业而言&#xff0c;提升商品数字化管理的…

vue指令体验

<!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0"> <title>vue指令体验</title> </head> &…

【Linux】环境基础开发工具使用——vim使用

Linux 软件包管理器 yum 什么是软件包 1.在 Linux 下安装软件 , 一个通常的办法是下载到程序的源代码 , 并进行编译 , 得到可执行程序 . 2.但是这样太麻烦了 , 于是有些人把一些常用的软件提前编译好 , 做成软件包 ( 可以理解成 windows 上的安装程序) 放在一个服务器…

深度学习-机器视觉part2

深度学习-机器视觉part2 文章目录 深度学习-机器视觉part2一、从卷积到卷积神经网络二、手撕卷积代码2.1 动机2.2 数据集2.3 卷积操作2.3.1 填充&#xff08;padding&#xff09;2.3.2 卷积块2.3.3 池化2.3.4 Softmax 2.4 完整CNN2.5 训练改进 三、经典CNN模型介绍四、CNN模型的…

ASP.Net添加Swagger注释

文章目录 Swagger添加Swagger注释 Swagger 添加Swagger注释 1、右击项目->选择属性->点击生成->输出&#xff0c;选中文档文件 2、配置服务 在program.cs 文件里配置SwaggerUI //增加项一 builder.Services.AddSwaggerGen(c> {c.SwaggerDoc("v1", ne…

如何将本地仓库放到远程仓库中

在我们仓库创建好之后&#xff0c;我们复制好ssh 接着我们需要使用git remote add<shortname><url>这个命令 shortname就是我们远程仓库的别名 接着使用git remote -v这个命令查看一下目前远程仓库的别名和地址 原本还有一个指令git branch -M main 指定分支的名…