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 中可能不被支持

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

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

相关文章

https和http区别

1、安全性 HTTP信息是明文传输,而HTTPS则通过SSL/TLS协议进行加密传输,确保数据传输的安全性。HTTPS可以验证服务器身份,防止中间人攻击,保护数据的完整性和保密性。 2、端口号 HTTP默认使用80端口,而HTTPS默认使用…

最佳实践:设计思维:“6+1”迭代过程的创新实践丨IDCF

谢志萌 研发效能(DevOps)工程师(中级)认证学员 一、前言 “有效的Devops关键在于专注于人员和文化,而不仅仅是工具和技术。” -John Willis 随着数字化转型的加速,组织越来越依赖于快速、高效的软件交…

7月18日学习打卡,数据结构堆

hello大家好呀,本博客目的在于记录暑假学习打卡,后续会整理成一个专栏,主要打算在暑假学习完数据结构,因此会发一些相关的数据结构实现的博客和一些刷的题,个人学习使用,也希望大家多多支持,有不…

ARM架构(二)—— arm v7/v8/v9寄存器介绍

1、ARM v7寄存器 1.1 通用寄存器 V7 V8开始 FIQ个IRQ优先级一样, 通用寄存器:31个 1.2 程序状态寄存器 CPSR是程序状态毒存器,保存条件标志位,中断禁止位,当前处理器模式等控制和状态位。每种异常模式下还存在SPSR&…

《系统架构设计师教程(第2版)》第12章-信息系统架构设计理论与实践-02-信息系统架构

文章目录 1. 概述1.1 信息系统架构(ISA)1.2 架构风格 2. 信息系统架构分类2.1 信息系统物理结构2.1.1 集中式结构2.1.2 分布式结构 2.2 信息系统的逻辑结构1)横向综合2)纵向综合3)纵横综合 3. 信息系统架构的一般原理4…

Pandas教程:近万字讲解在Pandas中如何操作Excel

目录 1. 安装与配置 2. 读取Excel文件 2.1 基本用法 2.2 指定工作表 2.3 指定单元格范围 3. 数据检查与预处理 3.1 查看数据的基本信息 3.2 数据类型检查与转换 3.3 检查缺失值 3.4 处理缺失值 4. 数据清洗与转换 4.1 重命名列 4.2 删除重复数据 4.3 数据替换 4…

Android使用ANativeWindow更新surfaceView内容最简Demo

SurfaceView简介 SurfaceView对比View的区别 安卓的普通VIew,都依赖于当前Activity的Window的surface,这个surface用于承载view树从底到顶绘制出来的所有内容,因此任何一个view需要更新时,都需要把所有view中底到顶进行更新,即使使…

解决:Linux上SVN 1.12版本以上无法直接存储明文密码

问题:今天在Linux机器上安装了SVN,作为客户端使用,首次执行SVN相关操作,输入账号密码信息后,后面再执行SVN相关操作(比如"svn update")还是每次都需要输入密码。 回想以前在首次输入…

Python进阶(4)--正则表达式

正则表达式 在Python中,正则表达式(Regular Expression,简称Regex)是一种强大的文本处理工具,它允许你使用一种特殊的语法来匹配、查找、替换字符串中的文本。 在这之前,还记得之前我们是通过什么方法分割…

实习问题总结

为什么使用GRPC作为通信方式,对比如REST好处在哪里? 使用protobuf作为序列化格式,以二进制进行传输,减小了数据包的大小,效率高 proto强类型定义、支持复杂数据类型,编译运行可以进行严格的数据验证&#…

[论文笔记] pai-megatron-patch Qwen2-CT 长文本rope改yarn

更改: # Copyright (c) 2024 Alibaba PAI and Nvidia Megatron-LM Team. # # Licensed under the Apache License, Version 2.0 (the "License"); # you may not use this file except in compliance with the License. # You may obtain a copy of the License a…

【系统架构设计】数据库系统(二)

数据库系统(二) 数据库模式与范式数据库设计数据库设计的方法数据库设计的基本步骤 事务管理并发控制故障和恢复 备份与恢复分布式数据库系统数据仓库数据挖掘NoSQL大数据 数据库模式与范式 数据库设计 数据库设计的方法 目前已有的数据库设计方法可分…

element UI :el-table横向列内容超出宽度,滚动条不显示问题

是否能解决你问题的前提 **看到这篇文章的解决问题的方案之前,请先回忆你是否在项目中的全局样式或者私有组件中去单独设置过滚动条样式。如果有 请继续往下看:**单独设置过滚动条样式代码实例: ::-webkit-scrollbar {/*滚动条整体样式*/wi…

layui 让table里的下拉框不被遮挡

记录:layui 让table里的下拉框不被遮挡 /* 这个是让table里的下拉框不被遮挡 */ .goods_table .layui-select-title,.goods_table .layui-select-title input{line-height: 28px;height: 28px; }.goods_table .layui-table-cell {overflow: visible !important; }.…

H-Instructions Substring(牛客暑期第二场)

题意:刚开始red站在初始位置(0,0),她有一串指令:向上,向下,向左,向右(上将y,下将y--,左x--,右x),可以选择连续…

【Gitlab】记一次升级 Gitlab 后 API 失效的问题

背景 前段时间,因内部使用的 Gitlab 版本存在漏洞,需要进行升级,于是乎,将 Gitlab 从 16.6.0 升级到 16.11.3。而我们项目有个接口是用于获取 Gitlab 上的开发人员。 然后,今天,突然发现这个接口获取不到…

【Django】网上蛋糕项目商城-注册,登录,修改用户信息,退出功能

概念 通过以上多篇文章的讲解,对该项目的功能已经实现了很多,本文将对该项目的用户注册,登录,修改用户信息,以及退出等功能的实现。 注册功能实现 点击head.html头部页面的注册按钮,触发超链接跳转至use…

十一、集合操作

一、集合定义 语法 创建集合使⽤ {} 或 set() 功能 集合可以去掉重复数据;集合数据是⽆序的,故不⽀持下标 s1 set(eqweqwe) s2 {} s3 {10, 20, 30, 40, 50} s4 {"name":"xuxu"} print(s1) print(type(s1)) print(type(s2)) pri…

[Python][自然语言]利用NLTK建立自己的情感分析模型

文章目录 相关python模块步骤一:准备自己的训练数据步骤二:读取并处理数据步骤三:特征提取步骤四:训练机器学习模型步骤五:部署模型相关python模块 pip install pandas pip install scikit-learn pip install nltk 当前使用版本 Python 3.10.12 scikit-learn 1.2.2 pand…

操作系统发展简史(Unix/Linux 篇 + DOS/Windows 篇)+ Mac 与 Microsoft 之风云争霸

操作系统发展简史(Unix/Linux 篇) 说到操作系统,大家都不会陌生。我们天天都在接触操作系统 —— 用台式机或笔记本电脑,使用的是 windows 和 macOS 系统;用手机、平板电脑,则是 android(安卓&…