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,這樣我們可以更容易地處理錯誤情況。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/43647.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/43647.shtml
英文地址,請注明出處:http://en.pswp.cn/news/43647.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Transformer 相關模型的參數量計算

如何計算Transformer 相關模型的參數量呢? 先回憶一下Transformer模型論文《Attention is all your need》中的兩個圖。 設Transformer模型的層數為N,每個Transformer層主要由self-attention 和 Feed Forward組成。設self-attention模塊的head個數為 …

linux系統部署jenkins詳細教程

一、Linux環境 1、下載war包 官網下載地址: https://get.jenkins.io/war-stable/2.332.4/jenkins.war 2、將war包上傳至服務器 創建目錄/home/ubuntu/jenkins 上傳war包至該目錄 3、將jenkins添加到環境變量 進入環境變量文件 vim /etc/profile # 文件下方追加…

【3Ds Max】圖形合并命令的簡單使用

示例(將文字設置在球體上) 1. 首先這里創建一個球體和一個文本 2. 選中球體,在復合對象中點擊圖形合并按鈕 點擊“拾取圖形”按鈕,然后選中文本,此時可以看到球體上已經投射出文本 3. 接下來是一些常用參數的介紹 當…

從零實戰SLAM-第八課(非特征點的視覺里程計)

在七月算法報的班,老師講的蠻好。好記性不如爛筆頭,關鍵內容還是記錄一下吧,課程入口,感興趣的同學可以學習一下。 --------------------------------------------------------------------------------------------------------…

centos下使用jemalloc解決Mysql內存泄漏問題

參考: MySQL bug:https://bugs.mysql.com/bug.php?id83047&tdsourcetags_pcqq_aiomsg https://github.com/jemalloc/jemalloc/blob/dev/INSTALL.md (1)ptmalloc 是glibc的內存分配管理 (2)tcmalloc…

【設計模式】模板方法模式(Template Method Pattern)

23種設計模式之模板方法模式(Template Method Pattern) 基本概念 模板方法模式是一種行為型設計模式,它定義了一個算法骨架,將某些算法步驟的實現延遲到子類中。 這樣可以使得算法的框架不被修改,但是具體的實現可以…

Django

一 django 安裝 1. **安裝 Django:** 首先,確保您已經安裝了 Python 和 pip(Python 包管理器)。然后,在命令行中運行以下命令來安裝 Django: bashpip install Django 2. **創建項目:** …

Electron-builder打包和自動更新

前言 文本主要講述如何為 electron 打包出來軟件配置安裝引導和結合 github 的 release 配置自動更新。 electron-builder 是將 Electron 工程打包成相應平臺的軟件的工具,我的工程是使用 electron-vite 構建的,其默認集成了 electron-builder &#x…

中大型無人機遠程VHF語音電臺系統方案

方案背景 中大型無人機在執行飛行任務時,特別是在管制空域飛行時地面航管人員需要通過語音與無人機通信。按《無人駕駛航空器飛行管理暫行條例》規定,中大型無人機應當進行適航管理。物流無人機和載人eVTOL都將進行適航管理,所以無人機也要有…

Unity 工具 之 Azure 微軟SSML語音合成TTS流式獲取音頻數據的簡單整理

Unity 工具 之 Azure 微軟SSML語音合成TTS流式獲取音頻數據的簡單整理 目錄 Unity 工具 之 Azure 微軟SSML語音合成TTS流式獲取音頻數據的簡單整理 一、簡單介紹 二、實現原理 三、實現步驟 四、關鍵代碼 一、簡單介紹 Unity 工具類,自己整理的一些游戲開發可…

Qt creator之對齊參考線——新增可視化縮進功能

Qt creator隨著官方越來越重視,更新頻率也在不斷加快,今天無意中發現qt creator新版有了對齊參考線,也稱可視化縮進Visualize Indent,默認為啟用狀態。 下圖為舊版Qt Creator顯示設置欄: 下圖為新版本Qt Creator顯示設…

Day14 01-Shell腳本編程詳解

文章目錄 第一章 Shell編程【重點】1.1. Shell的概念介紹1.1.1. 命令解釋器4.1.1.2. Shell腳本 1.2. Shell編程規范1.2.1. 腳本文件的結構1.2.2. 腳本文件的執行 1.3. Shell的變量1.3.1. 變量的用法1.3.2. 變量的分類1.3.3. 局部變量1.3.4. 環境變量1.3.5. 位置參數變量1.3.6. …

Python入門【內存管理機制、Python緩存機制、垃圾回收機制、分代回收機制】(三十二)

👏作者簡介:大家好,我是愛敲代碼的小王,CSDN博客博主,Python小白 📕系列專欄:python入門到實戰、Python爬蟲開發、Python辦公自動化、Python數據分析、Python前后端開發 📧如果文章知識點有錯誤…

LeetCode150道面試經典題-- 存在重復元素 II(簡單)

1.題目 給你一個整數數組 nums 和一個整數 k &#xff0c;判斷數組中是否存在兩個 不同的索引 i 和 j &#xff0c;滿足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在&#xff0c;返回 true &#xff1b;否則&#xff0c;返回 false 。 2.示例 示例 1&#xff1a; 輸…

CSS中的字體屬性有哪些值,并分別描述它們的作用。

聚沙成塔每天進步一點點 ? 專欄簡介? font-style? font-weight? font-size? font-family? font-variant? line-height? letter-spacing? word-spacing? font? 寫在最后 ? 專欄簡介 前端入門之旅&#xff1a;探索Web開發的奇妙世界 記得點擊上方或者右側鏈接訂閱本專…

JS中對象數組深拷貝方法

structuredClone() JavaScript 中提供了一個原生 API 來執行對象的深拷貝&#xff1a;structuredClone。它可以通過結構化克隆算法創建一個給定值的深拷貝&#xff0c;并且還可以傳輸原始值的可轉移對象。 當對象中存在循環引用時&#xff0c;仍然可以通過 structuredClone()…

過濾字符,繞過

構造不包含字母和數字的webshell <?phpecho "A"^""; ?>運行結果為! 代碼中對字符"A"和字符”"進行了異或操作。在PHP中&#xff0c;兩個變量進行異或時&#xff0c;先會將字符串轉換成ASCII值&#xff0c;再將ASCII值轉換成二進制…

容器docker安裝及應用

目錄 二進制安裝docker應用啟動docker拉取鏡像查看當前主機鏡像查看鏡像詳細信息運行容器 二進制安裝docker 環境 centos 7 [rootlocalhost ~]# mkdir /data [rootlocalhost ~]# wget -P /data/ https://download.docker.com/linux/static/stable/x86_64/docker-18.03.1-ce.t…

【聲波】聲波在硼酸、硫酸鎂 (MgSO4) 和純水中的吸收研究(Matlab代碼實現)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;歡迎來到本博客????&#x1f4a5;&#x1f4a5; &#x1f3c6;博主優勢&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客內容盡量做到思維縝密&#xff0c;邏輯清晰&#xff0c;為了方便讀者。 ??座右銘&a…

MAC 命令行啟動tomcat的詳細介紹

MAC 命令行啟動tomcat MAC 命令行啟動tomcat的詳細介紹 一、修改授權 進入tomcat的bin目錄,修改授權 1 2 3 ? bin pwd /Users/yp/Documents/workspace/apache-tomcat-7.0.68/bin ? bin sudo chmod 755 *.sh sudo為系統超級管理員權限.chmod 改變一個或多個文件的存取模…