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

JavaScript中的?.和??的用法

1、?.(可选链运算符)

在JavaScript中,"?.“是一种叫做"Optional Chaining”(可选链)的新操作符。它允许我们在访问一个可能为null或undefined的属性或调用一个可能不存在的方法时,避免出现错误。
使用?.操作符可以安全地访问对象的属性和方法,而不会发生错误并导致程序停止执行。当对象的属性或方法不存在时,表达式返回undefined,而不是抛出TypeError异常。

1.1 访问对象属性

	const person = {name: 'John',address: {city: 'New York'}};console.log(person.address?.city); // 输出:'New York'// 输出:undefined,因为person对象没有age属性console.log(person.age?.toString()); 

1.2 调用对象方法

	const calculator = {add: function(a, b) {return a + b;}};console.log(calculator.add?.(2, 3)); // 输出:5// 输出:undefined,因为calculator对象没有subtract方法console.log(calculator.subtract?.(5, 2)); 

1.3 链式使用?.

	const user = {profile: {name: 'Alice',email: 'alice@example.com'}};console.log(user?.profile?.name); // 输出:'Alice'// 输出:undefined,因为user对象没有address属性console.log(user?.address?.city); 

注意事项:

  • 使用?.操作符时,如果目标属性或方法存在且可调用,它们将按照正常方式执行。
  • 如果目标为null或undefined,则表达式将立即返回undefined,不会继续尝试访问后续的属性或方法。
  • 操作符不能与[](方括号)一起使用。例如:obj?.[index] 是无效的语法。

2、??(空值合并运算符)

在JavaScript中,"??"是空值合并运算符的用法。它用于判断一个表达式是否为null或undefined,并返回一个默认值。

	const name = null; /*使用??运算符来判断name的值是否为空,如果为空,则赋予默认值"Unknown"*/const displayName = name ??  "Unknown"; console.log(displayName); // 输出: Unknown/*经常在表格或者数据渲染时可以用到,当表格数据为空时,直接显示 - const data = null?? '-'*/

相关文章:

JavaScript中的?.和??的用法

1、?.(可选链运算符) 在JavaScript中,"?.“是一种叫做"Optional Chaining”(可选链)的新操作符。它允许我们在访问一个可能为null或undefined的属性或调用一个可能不存在的方法时,避免出现错误…...

Git for linux

<1> linux 安装git sudo apt-get install git-all <2> 创建git&#xff0c;分为两部分&#xff0c;远程网络部分和本地主机部分 远程网路&#xff1a;登录GitHub: Let’s build from here GitHub 注册帐号&#xff0c;创建登录密码&#xff0c;此密码很长&a…...

uniapp小程序,根据小程序的环境版本,控制的显页面功能按钮的示隐藏

需求&#xff1a;根据小程序环境控制控制页面某个功能按钮的显示隐藏&#xff1b; 下面是官方文档和功能实现的相关代码&#xff1a; 实现上面需要&#xff0c;用到了uni.getAccountInfoSync()&#xff1a; uni.getAccountInfoSync() 是一个 Uniapp 提供的同步方法&#xff0c…...

kotlin 编写一个简单的天气预报app(二)增加搜索城市功能

增加界面显示openweathermap返回的信息。 在activity_main.xml里增加输入框来输入城市&#xff0c;在输入款旁边增加搜索按钮来进行查询。 然后原来显示helloworld的TextView用来显示结果。 1. 增加输入城市名字的EditText <EditTextandroid:id"id/editTextCity"…...

【分布鲁棒、状态估计】分布式鲁棒优化电力系统状态估计研究[几种算法进行比较](Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

vue中的require

vue中的require 一、基本概念二、具体演示1.引入json2.引入图片 三、require.context引入图片&#xff1a;引入json引入模块js&#xff1a;引入vue文件&#xff1a; 一、基本概念 require 是 node 中的一个方法&#xff0c;他的作用是 用于引入模块、 JSON、或本地静态文件。r…...

Linux进程间共享内存通信时如何同步?(附源码)

今天我们来讲讲进程间使用共享内存通信时为了确保数据的正确&#xff0c;如何进行同步? 在Linux中&#xff0c;进程间的共享内存通信需要通过同步机制来保证数据的正确性和一致性&#xff0c;常用的同步机制包括信号量、互斥锁、条件变量等。 其中&#xff0c;使用信号量来同…...

spring注解驱动开发(二)

17、Bean的生命周期 bean的生命周期&#xff1a;bean的创建—初始化—销毁的过程 容器负责管理bean的生命周期 我们可以自定义初始化和销毁方法&#xff0c;容器在bean进行到当前生命周期的时候来调用我们自定义的初始化和销毁方法 构造&#xff08;对象创建&#xff09; 单…...

【C++】——类和对象

目录 面向过程和面向对象的初步认识类的引入类的定义类的访问限定符及封装类的作用域类的实例化this指针类的6个默认成员函数构造函数析构函数 面向过程和面向对象的初步认识 C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析求解问题的步骤&#xff0c;通过函数调用…...

【Docker】使用docker-maven-plugin插件构建发布推镜像到私有仓库

文章目录 1. 用docker-maven-plugin插件推送项目到私服docker1.1. 构建镜像 v1.01.2. 构建镜像 v2.01.3. 推送到镜像仓库 2. 拉取私服docker镜像运行3. 参考资料 本文描述了在Spring Boot项目中通过docker-maven-plugin插件把项目推送到私有docker仓库中&#xff0c;随后拉取仓…...

区块链学习笔记

区块链技术与应用 数组 列表 二叉树 哈希函数 BTC中的密码学原理 cryptographic hash function collsion resistance(碰撞抵抗) 碰撞指的是找到两个不同的输入值&#xff0c;使得它们的哈希值相同。也就是说&#xff0c;如果存在任意两个输入x和y&#xff0c;满足x ≠ y…...

实用上位机--QT

实用上位机–QT 通信协议如下 上位机设计界面 #------------------------------------------------- # # Project created by QtCreator 2023-07-29T21:22:32 # #-------------------------------------------------QT += core gui serialportgreaterThan(QT_MAJOR_V…...

os.signal golang中的信号处理

在程序进行重启等操作时&#xff0c;我们需要让程序完成一些重要的任务之后&#xff0c;优雅地退出&#xff0c;Golang为我们提供了signal包&#xff0c;实现信号处理机制&#xff0c;允许Go 程序与传入的信号进行交互。 Go语言标准库中signal包的核心功能主要包含以下几个方面…...

Python源码:Tkinter组件布局管理的3种方式

Tkinter组件布局管理可以使用pack()方法、grid()方法和place()方法。pack()方法将组件放置在窗口中&#xff0c;grid()方法将组件放置在网格布局中&#xff0c;place()方法将组件放置在指定位置。 01使用pack()方法布局&#xff1a; 在Tkinter中&#xff0c;pack方法用于将控…...

网络防御之VPN

配置IKE 第一阶段 [r1]ike proposal 1 [r1-ike-proposal-1]encryption-algorithm aes-cbc-128 [r1-ike-proposal-1]authentication-algorithm sha1 [r1-ike-proposal-1]dh group2 [r1-ike-proposal-1]authentication-method pre-share[r1]ike peer aaa v1 [r1-ike-peer-aaa…...

VUE使用docxtemplater导出word(带图片) 踩坑 表格循环空格 ,canvas.toDataURL图片失真模糊问题

参考&#xff1a;https://www.codetd.com/article/15219743 安装 // 安装 docxtemplater npm install docxtemplater pizzip --save // 安装 jszip-utils npm install jszip-utils --save // 安装 jszip npm install jszip --save // 安装 FileSaver npm install file-save…...

ubuntu 安装 Pycharm社区版

在Ubuntu中安装pycharm社区版_上玄下纁的博客-CSDN博客 里面可以创建快捷方式&#xff0c;蛮好用的...

IP 监控软件

IP 监控软件可帮助管理员主动监控网络资源。随着各种设备连接到网络&#xff0c;监控设备和接口可能很复杂&#xff0c;为管理员提供这些设备的IP监控&#xff0c;了解其各种性能指标和问题。 使用有效的 IP 监控软件的优势 使用有效的 IP 监控系统和一套全面的 IP 监控工具&…...

C#实现读写CSV文件的方法详解

目录 CSV文件标准 文件示例RFC 4180简化标准读写CSV文件 使用CsvHelper使用自定义方法总结 项目中经常遇到CSV文件的读写需求&#xff0c;其中的难点主要是CSV文件的解析。本文会介绍CsvHelper、TextFieldParser、正则表达式三种解析CSV文件的方法&#xff0c;顺带也会介绍一…...

04 http连接处理(上)

基础知识&#xff1a;epoll、http报文格式、状态码和有限状态机 代码&#xff1a;对服务端处理http请求的全部流程进行简要介绍&#xff0c;然后结合代码对http类及请求接收进行详细分析。 epoll epoll_create函数 #include <sys/epoll.h> int epoll_create(int size)…...

阿里云省钱攻略:优惠券领取与使用一看就会

阿里云是阿里巴巴集团旗下云计算品牌&#xff0c;凭借其强大的计算能力和丰富的云服务产品&#xff0c;成为众多企业和个人开发者的首选。然而&#xff0c;如何在享受云服务的同时有效控制成本&#xff0c;成为大家关注的焦点。本文将详细介绍阿里云优惠券的领取与使用技巧&…...

项目管理和技术管理的区别

在单位从事管理岗快2年了&#xff0c;负责单位内的研发项目管理和技术管理工作。感觉这是两个不同的管理赛道。其中项目管理侧重进度、资源、风险、责任人、排期等要素推进和汇报。技术管理则侧重研发环节的技术深度、技术方向、技术领先性、技术栈&#xff0c;以及项目产出的质…...

Voron 2.4 3D打印机进阶调试与故障排除指南

Voron 2.4 3D打印机进阶调试与故障排除指南 【免费下载链接】Voron-2 Voron 2 CoreXY 3D Printer design 项目地址: https://gitcode.com/gh_mirrors/vo/Voron-2 机械系统精调&#xff1a;从结构应力到运动精度 问题导向&#xff1a;框架组装后出现对角线偏差超过2mm&a…...

基于python的演唱会门票演出购票系统的设计与实现

目录同行可拿货,招校园代理 ,本人源头供货商用户管理模块演出信息管理购票与选座功能支付系统集成订单与票务管理数据分析与报表高并发优化项目技术支持源码获取详细视频演示 &#xff1a;文章底部获取博主联系方式&#xff01;同行可合作同行可拿货,招校园代理 ,本人源头供货商…...

Java八股文面试题,堪称2026最强!!!

1、什么是 java 序列化&#xff0c;如何实现 java 序列化 难度系数&#xff1a;⭐ 序列化是一种用来处理对象流的机制&#xff0c;所谓对象流也就是将对象的内容进行流化。可以对流化后的对象进行读写操作&#xff0c;也可将流化后的对象传输于网络之间。序列化是为了解决在…...

Lychee Rerank在遥感影像分析中的应用:多源地理数据关联

Lychee Rerank在遥感影像分析中的应用&#xff1a;多源地理数据关联 1. 引言 每天&#xff0c;卫星和无人机都在产生海量的遥感影像数据。地质勘探团队需要从数万张卫星图片中找出可能的矿藏迹象&#xff0c;环境监测人员要追踪森林覆盖变化&#xff0c;城市规划者则要分析城…...

ROBLEX嵌入式驱动库技术解析与机器人控制实践

1. ROBLEX开发套件底层驱动库技术解析ROBLEX开发套件是一套面向教育与原型验证的嵌入式硬件平台&#xff0c;其核心由主控底板&#xff08;通常基于STM32F4系列MCU&#xff09;与可插拔功能模块&#xff08;如电机驱动、红外测距、超声波测距、环境传感器、LED阵列、蜂鸣器、编…...

一步步教你获取ADNI影像数据:从搜索到下载全流程解析

1. ADNI数据库简介与准备工作 ADNI&#xff08;Alzheimers Disease Neuroimaging Initiative&#xff09;是全球最权威的阿尔茨海默病研究数据库之一&#xff0c;包含了大量脑部影像数据和临床信息。第一次接触这个数据库的研究者可能会被复杂的界面和操作流程吓到&#xff0c;…...

Wan2.2-I2V-A14B私有部署镜像优势:零依赖冲突、开箱即用、免编译安装

Wan2.2-I2V-A14B私有部署镜像优势&#xff1a;零依赖冲突、开箱即用、免编译安装 1. 镜像核心价值与定位 Wan2.2-I2V-A14B私有部署镜像是专为文生视频场景打造的一站式解决方案。这个镜像最大的特点就是解决了AI模型部署中最让人头疼的环境配置问题&#xff0c;真正做到下载即…...

Phi-4-mini-reasoning部署教程:Nginx反向代理+Basic Auth安全加固

Phi-4-mini-reasoning部署教程&#xff1a;Nginx反向代理Basic Auth安全加固 1. 项目介绍 Phi-4-mini-reasoning是一款由微软开源的轻量级AI模型&#xff0c;专注于数学推理、逻辑推导和多步解题等强逻辑任务。这个3.8B参数的模型虽然体积小巧&#xff0c;但在推理能力上表现…...