当前位置: 首页 > news >正文

typescript基础之null和undefined

TypeScript是一种基于JavaScript的编程语言,它支持静态类型检查和面向对象的特性。TypeScript中的null和undefined是两种基本类型,它们分别表示空值或未定义的值。在本文中,我将介绍TypeScript中null和undefined的含义、区别、检查方法和使用注意事项。

null和undefined的含义
•  null表示一个空或不存在的对象,它是一个字面量,可以直接赋值给变量或常量。例如:

let obj: object = null; // obj是一个空对象

•  undefined表示一个声明了但没有赋值的变量,或者一个不存在的属性或索引。它也是一个字面量,可以直接赋值给变量或常量。例如:

let x: number; // x是一个未定义的变量
console.log(x); // undefined
console.log(y); // error: y is not defined
let arr: number[] = [1, 2, 3];
console.log(arr[3]); // undefined

null和undefined的区别
•  null和undefined在类型上是不同的,null属于object类型,而undefined属于undefined类型。我们可以用typeof运算符来检查它们的类型。例如:

console.log(typeof null); // object
console.log(typeof undefined); // undefined

•  null和undefined在值上也是不同的,null表示一个空值,而undefined表示一个未知的值。我们可以用===运算符来比较它们是否相等。例如:

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

•  null和undefined在默认情况下都是所有类型的子类型,即它们可以赋值给任何类型。但是如果我们开启了strictNullChecks选项,那么只有any、void、null和undefined类型可以接受null或undefined赋值,其他类型则会报错。例如:

let s: string = 'hello';
s = null; // error: Type 'null' is not assignable to type 'string'.
s = undefined; // error: Type 'undefined' is not assignable to type 'string'. 

•  如果我们想要让某个类型可以接受null或undefined赋值,我们可以使用联合类型(Union Type),即用|符号连接多个类型。例如:

let s: string | null | undefined = 'hello';
s = null; // ok
s = undefined; // ok

null和undefined的检查方法
•  我们可以使用==运算符来同时检查null和undefined,因为它们在这种情况下会被视为相等。例如:

let x: number | null | undefined;
if (x == null) {console.log('x is null or undefined');
}

•  我们也可以使用===运算符来分别检查null和undefined,因为它们在这种情况下会被视为不等。例如:

let x: number | null | undefined;
if (x === null) {console.log('x is null');
}
if (x === undefined) {console.log('x is undefined');
}

•  我们还可以使用!运算符来否定null或undefined,因为它们都是falsy值,即在布尔上下文中会被转换为false。例如:

let x: number | null | undefined;
if (!x) {console.log('x is falsy');
}

•  我们还可以使用??运算符来提供一个默认值,当左侧的表达式为null或undefined时,返回右侧的表达式。这个运算符叫做Nullish Coalescing Operator(空值合并运算符)。例如:

let x: number | null | undefined;
let y = x ?? 0; // y is 0 if x is null or undefined, otherwise y is x

•  我们还可以使用?.运算符来访问一个可能为null或undefined的对象的属性或方法。这个运算符叫做Optional Chaining Operator(可选链运算符)。如果对象为null或undefined,则返回undefined,否则返回正常的结果。例如:

interface Person {name: string;age?: number;
}let p: Person | null = null;
console.log(p?.name); // undefined
console.log(p?.age); // undefined
p = { name: 'Alice', age: 20 };
console.log(p?.name); // Alice
console.log(p?.age); // 20

null和undefined的使用注意事项
•  我们应该尽量避免使用null,因为它会增加代码的复杂度和出错的可能性。我们可以使用undefined来表示一个缺失或未知的值,或者使用其他更具体的值,如空字符串、空数组、空对象等。

•  我们应该尽量使用===运算符来比较null和undefined,因为它会保持它们的类型和值不变,避免一些隐式的类型转换和意外的结果。

•  我们应该尽量使用??运算符来提供一个默认值,因为它只会在null或undefined时生效,而不会影响其他falsy值,如0、''、false等。

•  我们应该尽量使用?.运算符来访问一个可能为null或undefined的对象的属性或方法,因为它会避免抛出TypeError异常,而是返回undefined,这样我们可以更容易地处理错误情况。

相关文章:

typescript基础之null和undefined

TypeScript是一种基于JavaScript的编程语言,它支持静态类型检查和面向对象的特性。TypeScript中的null和undefined是两种基本类型,它们分别表示空值或未定义的值。在本文中,我将介绍TypeScript中null和undefined的含义、区别、检查方法和使用…...

php_mb_strlen指定扩展

1 中文在utf-字符集下占3个字节,所以计算出来长度为9。 2 可以引入php多字节字符的扩展,默认是没有的,需要自己配置这个函数 3 找到php.ini文件,去掉;extension mbstring的注释,接着重启apache服务 可以看到准确输出的中文的长度…...

利用OpenCV光流算法实现视频特征点跟踪

光流简介 光流(optical flow)是运动物体在观察成像平面上的像素运动的瞬时速度。光流法是利用图像序列中像素在时间域上的变化以及相邻帧之间的相关性来找到上一帧跟当前帧之间存在的对应关系,从而计算出相邻帧之间物体的运动信息的一种方法。…...

探索无限创造力的星辰大道,画出想象的浩瀚宇宙!-turtle

介绍 视频教程地址在此:https://www.bilibili.com/video/BV1Pm4y1H7Tb/ 大家好,欢迎来到本视频!今天,我们将一同探索Python编程世界中的一个有趣而创意的库——Turtle库。无需专业绘画技能,你就可以轻松地用代码绘制…...

企业数字化转型大数据湖一体化平台项目建设方案PPT

导读:原文《企业数字化转型大数据湖一体化平台项目建设方案PPT》(获取来源见文尾),本文精选其中精华及架构部分,逻辑清晰、内容完整,为快速形成售前方案提供参考。 喜欢文章,您可以点赞评论转发…...

【3Ds Max】车削命令的简单使用(以制作花瓶为例)

简介 在3ds Max中,"车削"(Lathe)是一种建模命令,用于创建围绕轴线旋转的几何形状。通过车削命令,您可以将一个闭合的平面或曲线几何形状旋转,从而生成一个立体对象。这种方法常用于创建圆柱体、…...

Python 3 使用HBase 总结

HBase 简介和安装 请参考文章:HBase 一文读懂 Python3 HBase API HBase 前期准备 1 安装happybase库操作hbase 安装该库 pip install happybase2 确保 Hadoop 和 Zookeeper 可用并开启 确保Hadoop 正常运行 确保Zookeeper 正常运行3 开启HBase thrift服务 使用命…...

Maven方式构建SpringBoot项目

目录 1、创建maven项目 2、添加springboot相关依赖 3、配置启动端口 4、修改APP文件 5、配置controller 6、启动应用 1、创建maven项目 项目如下&#xff1a; 2、添加springboot相关依赖 <parent><groupId>org.springframework.boot</groupId><arti…...

不花一分钱,利用免费电脑软件将视频MV变成歌曲音频MP3

教程 1.点击下载电脑软件下载地址&#xff0c;点击下载&#xff0c;安装。&#xff08;没有利益关系&#xff0c;没有打广告&#xff0c;只是单纯教学&#xff09; 2.安装完成后&#xff0c;点击格式工厂 3.然后如图所示依次&#xff0c;点击【音频】->【-MP3】 3.然后点击…...

运营知识之用户运营(一)触达用户的几种方式

运营知识之用户运营&#xff08;一&#xff09;触达用户的几种方式 APP推送短信&#xff08;DeepLink/Deferred DeepLink&#xff09;&#xff1a;短信拉起app电子邮件 EDM电话/外呼&#xff08;人工、AI&#xff09;电话外呼加短信&#xff08;操作步骤短链&#xff09;微信生…...

cocos creator pageView 循环展示 广告牌功能

在使用 creator pageView 滑动到最大或者最小为止的时候 滑动不了没法流畅的运行到最开始或者最后那个界面 循环展示 1.策划大人有需要就是要循环流畅的展示 解决方案: 做预制件的时候 最第一个界面之前 做一个最后的界面放到最前边去 比如 1,2,3,4,5,6,7,8 修改成 8,1…...

PyTorch Lightning:通过分布式训练扩展深度学习工作流

一、介绍 欢迎来到我们关于 PyTorch Lightning 系列的第二篇文章&#xff01;在上一篇文章中&#xff0c;我们向您介绍了 PyTorch Lightning&#xff0c;并探讨了它在简化深度学习模型开发方面的主要功能和优势。我们了解了 PyTorch Lightning 如何为组织和构建 PyTorch 代码提…...

无涯教程-Perl - splice函数

描述 此函数从LENGTH元素的OFFSET元素中删除ARRAY元素,如果指定,则用LIST替换删除的元素。如果省略LENGTH,则从OFFSET开始删除所有内容。 语法 以下是此函数的简单语法- splice ARRAY, OFFSET, LENGTH, LISTsplice ARRAY, OFFSET, LENGTHsplice ARRAY, OFFSET返回值 该函数…...

归并排序:从二路到多路

前言 我们所熟知的快速排序和归并排序都是非常优秀的排序算法。 但是快速排序和归并排序的一个区别就是&#xff1a;快速排序是一种内部排序&#xff0c;而归并排序是一种外部排序。 简单理解归并排序&#xff1a;递归地拆分&#xff0c;回溯过程中&#xff0c;将排序结果进…...

【Vue】运行项目报错 This dependency was not found

背景 运行Vue 项目报错&#xff0c;提示This dependency was not found&#xff1b;然后我根据提示 执行 npm install --save vue/types/umd ,执行后发现错误&#xff0c;我一开始一直以为是我本地装不上这个依赖。后来找了资料后&#xff0c;看到应该是自己的代码里面随意的i…...

Shell编程之正则表达式

文本处理器&#xff1a;三剑客&#xff1a;grep查找sed awk shell正则表达式由一类特殊字符以及文本字符所编写的一种模式&#xff0c;处理文本当中的内容&#xff0c;其中的一些字符不表示字符的字面含义表示一种控制或者通配的功能 通配符&#xff1a;匹配文件名和目录名&a…...

QGraphicsView 实例3地图浏览器

主要介绍Graphics View框架&#xff0c;实现地图的浏览、放大、缩小&#xff0c;以及显示各个位置的视图、场景和地图坐标 效果图: mapwidget.h #ifndef MAPWIDGET_H #define MAPWIDGET_H #include <QLabel> #include <QMouseEvent> #include <QGraphicsView&…...

Windows基础安全知识

目录 常用DOS命令 ipconfig ping dir cd net user 常用DOS命令 内置账户访问控制 Windows访问控制 安全标识符 访问控制项 用户账户控制 UAC令牌 其他安全配置 本地安全策略 用户密码策略复杂性要求 强制密码历史&#xff1a; 禁止密码重复使用 密码最短使用期限…...

自定义注解和自定义注解处理器来扫描所有带有某个特定注解的Controller层

在Spring Boot中&#xff0c;您可以使用自定义注解和自定义注解处理器来扫描所有带有某个特定注解的Controller层。 以下是一个简单的示例&#xff0c;演示如何实现这个功能&#xff1a; 首先&#xff0c;创建自定义注解 CustomAnnotation &#xff0c;用于标记需要被扫描的C…...

浏览器渲染原理 - 输入url 回车后发生了什么

目录 渲染时间点渲染流水线1&#xff0c;解析&#xff08;parse&#xff09;HTML1.1&#xff0c;DOM树1.2&#xff0c;CSSOM树1.3&#xff0c;解析时遇到 css 是怎么做的1.4&#xff0c;解析时遇到 js 是怎么做的 2&#xff0c;样式计算 Recalculate style3&#xff0c;布局 la…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

省略号和可变参数模板

本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...