TypeScript 中合并运算符??
在 TypeScript 中，合并运算符（??） 是一种逻辑运算符，用于在变量为 null 或 undefined 时提供默认值。它让代码在处理“空值”场景时更加简洁、清晰、可预测。
一、语法说明
合并运算符由两个问号组成：
变量 ?? 默认值
该运算符的逻辑是：如果左侧的值是 null 或 undefined，则返回右侧的默认值；否则返回左侧的值本身。
⚠️ 注意：与逻辑或运算符（||）不同，??不会将 0、false 或空字符串 "" 视为“空值”。
二、实用示例
示例 1：函数中的默认值设置
以下函数通过 Nullish 合并运算符为 input 参数设置了默认值 100：
function displayValue(input?: number) {
const value = input ?? 100;
console.log(value);
}
displayValue(); // 输出 100
displayValue(50); // 输出 50在 displayValue() 中未传入参数，input 是 undefined，因此使用了默认值 100。而在传入 50 时，使用的是实际值。
示例 2：对象属性默认值设置（常用于 JSON）
当从 JSON 或其他外部数据源获取对象时，某些字段可能缺失。可以使用 ?? 为这些属性设定默认值。
interface Settings {
volume?: number;
brightness?: number;
}
const userSettings: Settings = {
volume: 0
};
const volume = userSettings.volume ?? 50;
const brightness = userSettings.brightness ?? 75;
console.log(`Volume: ${volume}`); // 输出 Volume: 0
console.log(`Brightness: ${brightness}`); // 输出 Brightness: 75volume 的值为 0，虽然是假值，但不是 null 或 undefined，因此不会使用默认值 50。
brightness 没有定义，因此使用了默认值 75。
三、浏览器支持情况
Nullish 合并运算符在大多数现代浏览器中已经得到支持：
- ✅ Google Chrome 80+
- ✅ Microsoft Edge 80+
- ✅ Firefox 72+
- ✅ Safari 13.1+
- ✅ Opera 67+
🎯 TypeScript 会将 ?? 编译为兼容 JavaScript 语法，确保在较老环境中依然可运行（需配置合适的编译目标）。
四、总结
合并运算符（??）是 TypeScript 中处理 null 与 undefined 值的利器，特别适合用于：
- 函数参数默认值
- 对象属性默认值
- 用户配置合并
它使得代码更加健壮，避免不必要的类型判断。是开发现代前端和后端应用时不可或缺的一部分。
如果你正在使用 TypeScript 开发项目，建议立刻开始使用 ?? 运算符，让你的代码更简洁，更可控！
到此这篇关于TypeScript 中合并运算符??的文章就介绍到这了,更多相关TypeScript 合并运算符内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了js中实现字符串和数组的相互转化，感兴趣的小伙伴们可以参考一下2016-01-01
写了几年代码，很少谈到javascript程序的执行效率问题，今天就举几个例子看看，让大家看看程序优化是多么重要。 这节来看看createElement和innerHTML的表现。看看差别是多大2008-05-05
下面小编就为大家带来一篇js字符串传引用的两种方式(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
本文给大家汇总介绍了3种javascript数组去重的方法以及示例，十分的简单实用，有需要的小伙伴可以参考下。2015-07-07
TypeScript中Boolean和boolean的用法及区别
本文详细解释了TypeScript中Boolean和boolean的区别,从类型本质、使用场景、真值判断、性能考量等方面进行对比,boolean为基本类型,适用于常规布尔逻辑,而Boolean为构造函数,适用于将布尔值作为对象处理的场景,了解这些差异有助于编写更精确高效的TypeScript代码2026-04-04
微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用,下面这篇文章主要给大家介绍了关于如何通过一文读懂微信小程序页面导航的相关资料,需要的朋友可以参考下2022-11-11
在 JavaScript 中，prototype 不但能让对象共享自己财富，而且 prototype 还有寻根问祖的天性，从而使得先辈们的遗产可以代代相传。2009-12-12
Js实现网页上的MD5加密功能，将文字转换为MD5字符，本代码调用简单，你可以新建一个网页，将此网页上传到你的服务器上，用户浏览网页，就可实现MD5加密转换功能，用户可方便查询任一字符的MD5码，很不错的功能2013-03-03
这篇文章主要介绍了微信小程序实现列表的横向滑动，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-07-07
JavaScript中,线性查找是最简单的查找算法,从数组首元素开始逐个比对,直到找到目标值或遍历结束,适用于无序数组,时间复杂度为 O(n),下面就来详细的介绍一下js 线性查找的使用2026-03-03
最新评论