【vue】可选链运算符(?.)和空值合并运算符(??):

news2024/11/25 22:30:07

文章目录

          • 一、问题一:
          • 二、问题二:
          • 三、使用:
            • 【1】空值合并运算符(??)
            • 【2】可选链运算符(?.)


一、问题一:

http://www.codebaoku.com/question/question-sd-1010000042870944.html

在这里插入图片描述

//1、npm安装
npm install  @babel/plugin-proposal-optional-chaining // 可选链运算符 ?.
npm install  @babel/plugin-proposal-nullish-coalescing-operator // 空值合并运算符 ??

//2、配置babel.config.js
module.exports = {
  plugins: [
    '@babel/plugin-proposal-optional-chaining',  // 可选链运算符 ?.
    '@babel/plugin-proposal-nullish-coalescing-operator'  // 空值合并运算符 ??
  ]
}
二、问题二:

https://www.cnblogs.com/the-big-dipper/p/17102843.html

在这里插入图片描述

三、使用:
【1】空值合并运算符(??)

一个逻辑运算符,当左侧的操作数为 null 或者 undefined 时,返回其右侧操作数,否则返回左侧操作数。
注:与逻辑或运算符(||)不同,逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说,如果使用 || 来为某些变量设置默认值,可能会遇到意料之外的行为。比如为假值(例如,‘’ 或 0)时。

const foo = null ?? 'default string';
console.log(foo); // "default string"

const baz = 0 ?? 42;
console.log(baz); // 0

const baz = 0 || 42;
console.log(baz); // 42
【2】可选链运算符(?.)

允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效。?. 运算符的功能类似于 . 链式运算符,不同之处在于,在引用为空 (nullish ) (null 或者 undefined) 的情况下不会引起错误,该表达式短路返回值是 undefined。与函数调用一起使用时,如果给定的函数不存在,则返回 undefined。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName); //undefined
console.log(adventurer.someNonExistentMethod?.()); // undefined

console.log(adventurer.someNonExistentMethod.()); 
// Error: Unexpected token  .'('

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

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

相关文章

批量修改文件命名的shell脚本

Android 制作开机动画的方法参考:linux开机动画制作教程 其中往往会把里面的png图片命名位XX_0001.png , 002.png……等 Window批量修改文件名时会带有空格和括号。 这里写了一个脚本,可以在批量修改文件名后,将文件名转换为XX_00001 格式&…

基于matlab使用 YOLO V2深度学习进行多类对象检测(附源码)

一、前言 此示例演示如何训练多类对象检测器。 深度学习是一种强大的机器学习技术,可用于训练强大的多类对象检测器,例如 YOLO v2、YOLO v4、SSD 和 Faster R-CNN。此示例使用该函数训练 YOLO v2 多类室内对象检测器。经过训练的物体检测器能够检测和识…

ModaHub魔搭社区:Milvus 监控指标和使用 Grafana 展示 Milvus 监控指标

目录 Milvus 监控指标 Milvus 性能指标 系统运行指标 硬件存储指标 Milvus 监控指标 Milvus 会生成关于系统运行状态的详细时序 metrics。你可以通过 Prometheus、Grafana 或任何可视化工具展现以下指标: Milvus 性能指标系统运行指标:CPU/GPU 使用…

单片机学习 11-中断系统(定时器中断+外部中断)

中断系统 中断介绍 ​ 中断是为使单片机具有对外部或内部随机发生的事件实时处理而设置的,中断功能的存在,很大程度上提高了单片机处理外部或内部事件的能力。它也是单片机最重要的功能之一,是我们学习单片机必须要掌握的。很多初学者被困在…

全网超全,Pytest自动化测试框架pytest-xdist分布式测试插件(实战)

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 平常我们功能测试…

Markdown 扩展语法

✅作者简介:人工智能专业本科在读,喜欢计算机与编程,写博客记录自己的学习历程。 🍎个人主页:小嗷犬的个人主页 🍊个人网站:小嗷犬的技术小站 🥭个人信条:为天地立心&…

Python在命令行模式下如何退出命令行

文章目录 python退出命令行模式结语 刚学习python的时候是用的命令行的方式,刚接触不知道如何退出命令行,百度参考了好几篇文章,这里记录一下,希望能帮助到有需要的小伙伴们。 python退出命令行模式 总结一下,共有三种…

Redis处理⾼并发 实现分布式锁

Redisson Redisson是架设在Redis基础上的⼀个Java驻内存数据⽹格(In-Memory Data Grid)。 Redisson在基于NIO的Netty框架上,充分的利⽤了Redis键值数据库提供的⼀系列优势,在Java实⽤⼯具包中常⽤ 接⼝的基础上,为使⽤…

高压功率放大器在光学测量中的应用有哪些

高压功率放大器在光学测量中有许多应用,例如在激光器和LED驱动、光电探测器和光电转换器中等。这些应用大多需要将输入信号放大到高电平输出,以便驱动高电压或大功率负载。 在激光器和LED驱动应用中,高压功率放大器可以将低电平的控制信号放大…

nginx纳入skywalking调用链监控

nginx纳入skywalking调用链监控 一、说明二、nginx部署2.1 OpenResty介绍2.2 准备SkyWalking Nginx Agent2.3 docker方式部署OpenResty2.3.1 修改配置文件2.3.2 启动OpenResty容器 2.4 验证 一、说明 服务器中已部署好skywalking,并将tomcat纳入skywalking监控(tom…

JavaSE基础语法--接口

接口在现实生活中比比皆是。比如电脑的USB接口,插座的接口。这些接口我们发现都是一样的规范。比如插座的有双孔插,有三孔插。那么对应就有双脚设备,和三脚的设备。从这我们就能摸清楚规律:接口就是统一规范的提供服务。Java中接口…

七年老Android推荐 : 日常开发中好用的工具 (二)

1. 前言 作为一名拥有七年经验的Android开发工程师,在日常开发中,总希望能提升自己的开发效率,对此也积累了一些工具,本文对此总结了一些好用的工具。 2. draw.io draw.io用来编写流程图非常好用,是一个免费的在线图…

Splunk Enterprise 9.1.0 (macOS, Linux, Windows) - 机器数据管理和分析

Splunk Enterprise 9.1.0 (macOS, Linux, Windows) - 机器数据管理和分析 请访问原文链接:https://sysin.org/blog/splunk-9/,查看最新版。原创作品,转载请保留出处。 作者主页:sysin.org 混合世界的数据平台 快速、大规模地从…

【海思SS528】MPP媒体处理软件V5.0 | 音频模块 - 学习笔记

目录 🎄一、概述🎄二、音频输入(AI) 和 音频输出(AO)✨2.1 音频接口和 AI、 AO 设备✨2.2 录音和播放原理✨2.3 AI、AO 通道✨2.4 重采样 🎄三、音频编码和解码✨3.1 音频编解码流程✨3.2 音频编解码协议✨3.3 语音帧结构 🎄四、总…

【Spring | 事件监听概述】

本篇主要对Spring 的 事件监听机制简单介绍下。 事件监听 概述 概述 ApplicationContext中的事件处理是通过ApplicationEvent 类和ApplicationListener接口提供的。如果将实现该 ApplicationListener 接口的 bean 部署到上下文中,那么每当 ApplicationEvent 发布到 …

Android Jetpack Compose - 深入了解 AlertDialog

在开发 Android 应用时,对话框是一个常见的 UI 元素,用于向用户显示信息或获取用户的反馈。在 Jetpack Compose 中,我们可以使用 AlertDialog 组件来创建对话框。在这篇博客中,我们将深入了解如何使用 Jetpack Compose 的 AlertDi…

【Python爬虫+数据分析】采集电商平台数据信息,并做可视化演示(带视频案例)

前言 随着电商平台的兴起,越来越多的人开始在网上购物。而对于电商平台来说,商品信息、价格、评论等数据是非常重要的。因此,抓取电商平台的商品信息、价格、评论等数据成为了一项非常有价值的工作。 接下来就让我来教你 如何使用Python编写…

互动酷投票平台网络投票链接做网络链接投票

关于微信投票,我们现在用的最多的就是小程序投票,今天的网络投票,在这里会教大家如何用“活动星投票”小程序来进行投票。 我们现在要以“垃悦享端午”为主题进行一次投票活动,我们可以在在微信小程序搜索,“活动星投票…

ProtoBuf—3

文章目录 1、默认值2、更新规则3、未知字段4、option字段5、通信录网络版6、总结 1、默认值 反序列化消息时,如果被反序列化的二进制序列中不包含某个字段,反序列化对象中相应字段时,就会设置为该字段的默认值。不同的类型对应的默认值不同&…

使用GeoPandas进行地理空间数据可视化

大家好,在当今数据驱动的世界中,将信息可视化到地图上可以提供有价值的见解,帮助有效地传达复杂的模式。GeoPandas是一个建立在pandas和shapely之上的Python库,使用户能够通过将地理空间数据与各种变量合并来创建令人惊叹的地图。…