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

js中! 、!!、?.、??、??=的用法及使用场景

js中! 、 !. 、!、?.、.?、??、??=的用法及使用场景

  • !
  • !!
  • ?.
  • ??
  • ??=
    • ??、??= 区别
  • !. (ts)
  • 注意

!

  • (非空断言符号)

用于取反一个布尔值或将一个值转换为布尔类型并取反

const a= true; 
const b= false; const value = !a; // 'false'
const value =  !b; // 'true'

!!

  • (强制类型转换)

用于将一个值转换为对应的布尔值(强制类型转换)

const a= "Hello";
const value = !!a; //  'true',任何非空字符串在布尔上下文中都是真值

?.

  • (可选链操作符)

在访问对象属性或调用函数时,检查中间的属性是否存在或为 null/undefined。如果中间的属性不存在或为空,表达式将短路返回 undefined,而不会引发错误

const obj = {a: {b: {c: 42}},m: [],n: function () {return "Hello, world!";}
};// 传统写法 --需要手动检查每个属性
const value1 = obj && obj.a&& obj.a.b&& obj.a.b.c; 
const value2 = obj && obj.m&& obj.m[0] && obj.n[0].fn && obj.n[0].fn();
const value3 = obj && obj.n && obj.n();// 使用可选链操作符  --如果任何中间属性不存在或为空,value 将为 undefined// 对属性的检查
const value1 = obj?.a?.b?.x;//对数组下标的检查  ?. => ?.[] 
const value2 = obj?.m?.[2]; //对函数的检查  ?. => ?.()
const value3 = obj?.n?.(); 

??

  • (空值合并操作符 )

用于选择性地提供默认值,仅当变量的值为 null 或 undefined 时,才返回提供的默认值。否则,它将返回变量的实际值

const a= null;
const b= undefined;
const c= 0;
const d= '';
const e= false;//传统写法,除了null,undefined, 无法兼容0、''、false的情况,使用时要特别小心
const value1 = a || 'default'; // 'default'
const value2 = b || 'default'; // 'default'
const value3 = c || 'default'; // 'default',因为 0 转布尔类型是 false
const value4 = d || 'default'; // 'default',因为 '' 转布尔类型是 false
const value5 = e || 'default'; // 'default'const value1 = a ?? 'default'; // 'default',因为 a 是 null
const value2 = b ?? 'default'; // 'default',因为 b 是 undefined
const value3 = c ?? 'default'; // 0,因为 c 不是 null 或 undefined
const value4 = d ?? 'default'; // false,因为 d 不是 null 或 undefined

??=

  • (空值合并赋值操作符)

结合了空值合并操作符和赋值操作符。它用于将默认值分配给变量,仅当变量的值为 null 或 undefined 时

let a= null;
let b= undefined;
let c= 0;a ??= 'default'; // 'default',因为 a 是 null
b ??= 'default'; // 'default',因为 b 是 undefined
c ??= 'default'; // 0,因为 c的初始值不是 null 或 undefined

??、??= 区别

  • 是否是复制操作
含义
??在??左边是null或者undefined的时候,返回右边的结果
??=当左边是null或者undefined的时候,赋值右边的结果。

!. (ts)

  • (非空断言操作符符)

在访问对象属性或调用函数时,检查中间的属性是否不存在或不是 null/undefined,表示确定某个标识符是有值的。

function a(value?:string){console.log(value!.length);// console.log(value.length); //错误提醒:value is possibly 'undefined'.} 
a('b')// 注意: !.不传值, 编译JS后会报错, 建议使用?. 替代 !.

注意

  • !. 、 ?.、??、??= 是在 ECMAScript 2020 标准中引入的,因此在旧版本的 JavaScript 中可能不被支持

相关文章:

js中! 、!!、?.、??、??=的用法及使用场景

js中! 、 !. 、!、?.、.?、??、??的用法及使用场景 !!!?.??????、?? 区别 !. (ts)注意 ! (非空断言符号) 用于取反一个布尔值或将一个值转换为布尔类型并取反 const a true; const b false; const value !a; // false const value !…...

嵌入式面试高频八股文面试题及参考答案

目录 什么是嵌入式系统?请简要描述其特点。 请解释实时操作系统(RTOS)的概念。 请列举几种常见的嵌入式操作系统。 请解释中断、异常和竞态条件在嵌入式系统中的作用。 什么是死锁?请举例说明如何避免死锁的发生。 请解释进程和线程的区别。 请解释同步和互斥的概念…...

前端练习小项目——方向感应名片

前言:在学习完HTML和CSS之后,我们就可以开始做一些小项目了,本篇文章所讲的小项目为——方向感应名片 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 在开始学习之前,先让我们看一…...

【Vim】为什么程序员喜欢用 Vim

1. Vim介绍 Vim是一款高度可配置的文本编辑器,它被设计成作为一个工具,可以非常高效地进行文本编辑工作。以下是关于Vim的一些基本介绍: 历史:Vim 是 Vi 文本编辑器的改进版,最初由布莱姆米勒(Bram Moole…...

stm32h743 NetXduo 实现http server CubeIDE+CubeMX

在这边要设置mpu的大小,要用到http server,mpu得设置的大一些 我是这么设置的,做一个参考 同样,在FLASH.ld里面也要对应修改,SECTIONS里增加.tcp_sec和 .nx_data两个区,我们用ram_d2区域去做网络,这个就是对应每个数据在d2区域的起点。 在CubeMX里,需要用到filex、dhc…...

ubuntu服务器部署vue springboot前后端分离项目

上传构建好的vue前端文件 vscode构建vue项目,会生成dist目录 npm run build在服务器root目录新建/projects/www目录,把dist目录下的所有文件,上传到此目录中 上传ssl证书 上传ssl证书到/projects目录中 配置nginx 编辑 /etc/nginx/site…...

【python】pandas报错:UnicodeDecodeError详细分析,解决方案以及如何避免

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…...

FlinkModule加载HiveModule异常

HiveModule这个模块加载不出来 加在不出来这个模块&#xff0c;网上查说是要加下面这个依赖 <dependency><groupId>org.apache.flink</groupId><artifactId>flink-connector-hive_${scala.binary.version}</artifactId><version>${flink.…...

计算机硬件---如何更新自己电脑的BLOS

1找官网 例如“我使用的是HP&#xff08;惠普&#xff09;品牌的电脑”我只需要在浏览器上搜索“惠普官网”或“惠普-blos更新” 就可以看到&#xff0c;来自官网中更新blos的信息 2.有些品牌要查序列号该怎么办呢&#xff1f; 有许多方法可以查询&#xff0c;例如&#xf…...

AI算法17-贝叶斯岭回归算法Bayesian Ridge Regression | BRR

贝叶斯岭回归算法简介 贝叶斯岭回归&#xff08;Bayesian Ridge Regression&#xff09;是一种回归分析方法&#xff0c;它结合了岭回归&#xff08;Ridge Regression&#xff09;的正则化特性和贝叶斯统计的推断能力。这种方法在处理具有大量特征的数据集时特别有用&#xff…...

唯众物联网综合实训台 物联网实验室建设方案

物联网综合实训装置 物联网工程应用综合实训台是我公司针对职业院校物联网行业综合技能型人才培养&#xff0c;综合运用传感器技术、RFID技术、接口控制技术、无线传感网技术、Android应用开发等&#xff0c;配合实训台上的433M无线通信设备、ZigBee节点、射频设备、控制设备、…...

深入浅出 Vue.js:从基础到进阶的全面总结

深入浅出 Vue.js&#xff1a;从基础到进阶的全面总结 Vue.js 是一个用于构建用户界面的渐进式框架。它不仅易于上手&#xff0c;还能通过其强大的生态系统支持复杂的应用开发。本文将从基础到进阶&#xff0c;全面总结 Vue.js 的核心概念、常用技术和最佳实践&#xff0c;并提…...

路网双线合并单线——ArcGISpro 解决方法

路网双线合并成单线是一个在地图制作、交通规划以及GIS分析中常见的需求。双线路网定义&#xff1a;具有不同流向、不同平面结构的道路。此外&#xff0c;车道数较多的道路&#xff08;例如&#xff0c;双黄实线车道数大于4的道路&#xff09;也可以视为双线路网&#xff0c;本…...

邮箱验证码功能开发

该文章用于记录怎么进行邮箱验证码开发。 总所周知&#xff0c;我们在某些网站进行注册的适合总是会遇到什么填写邮箱&#xff0c;邮箱接收验证码&#xff0c;验证通过后才可以继续注册&#xff0c;那么这个功能是怎么实现的呢&#xff1f; 一&#xff0c;准备工作 1.1 邮箱…...

2024-07-15 Unity插件 Odin Inspector3 —— Button Attributes

文章目录 1 说明2 Button 特性2.1 Button2.2 ButtonGroup2.3 EnumPaging2.4 EnumToggleButtons2.5 InlineButton2.6 ResponsiveButtonGroup 1 说明 ​ 本文介绍 Odin Inspector 插件中有关 Button 特性的使用方法。 2 Button 特性 2.1 Button 依据方法&#xff0c;在 Inspec…...

根据脚手架archetype快速构建spring boot/cloud项目

1、找到archetype&#xff0c;并从私仓下载添加archetype到本地 点击IDEA的file&#xff0c;选择new project 选择maven项目&#xff0c;勾选create from archetype 填写archetype信息&#xff0c;&#xff08;repository填写私仓地址&#xff09; 2、选择自定义的脚手架arche…...

安灯系统在电力设备制造业中的应用效果

安灯系统作为面向制造业生产现场的专门应用软硬件系统&#xff0c;在电力设备制造企业中发挥着重要的作用。作为精益制造执行的核心工具&#xff0c;安灯系统为企业提供了快速联络生产、物料、维修、主管等部门的功能&#xff0c;以实时掌控和管理生产线状况&#xff0c;实现生…...

代码随想录打卡第二十五天

代码随想录–回溯部分 day 24 休息 day 25 回溯第三天 文章目录 代码随想录--回溯部分一、力扣93--复原IP地址二、力扣78--子集三、力扣90--子集Ⅱ 一、力扣93–复原IP地址 代码随想录题目链接&#xff1a;代码随想录 有效 IP 地址 正好由四个整数&#xff08;每个整数位于 0…...

openharmony上传图片,并获取返回路径

适用条件&#xff1a; openharmony开发 4.0 release版本&#xff0c;对应能力API10 一直不断尝试&#xff0c;一会用官方提供的上传文件&#xff0c;一会用第三方库的axios都不行&#xff0c; 一会报错‘没权限&#xff0c;一会报错’路径错误&#xff0c;还有报错‘401参数错…...

git常用命令及git分支

git常用命令及git分支 git常用命令设置用户签名初始化本地库查看本地库状态将文件添加到暂存区提交到本地库查看历史记录版本穿梭 git分支什么是分支分支的好处分支的操作查看分支创建分支切换分支删除分支合并分支合并冲突 git常用命令 设置用户签名 //设置用户签名 git con…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

dify打造数据可视化图表

一、概述 在日常工作和学习中&#xff0c;我们经常需要和数据打交道。无论是分析报告、项目展示&#xff0c;还是简单的数据洞察&#xff0c;一个清晰直观的图表&#xff0c;往往能胜过千言万语。 一款能让数据可视化变得超级简单的 MCP Server&#xff0c;由蚂蚁集团 AntV 团队…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

Leetcode33( 搜索旋转排序数组)

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...