ES6链判断运算符(?.)的正确打开方式

news/2025/2/21 4:31:17/

在实际应用中,如果读取对象内部 的某个属性,往往需要判断一下,属性的上层对象是否存在。比如,读取message.body.user.firstName这个属性,安全的写法是写成下下面这样:

// 错误的写法
const firstName = message.body.user.firstName || 'default'// 正确的写法
const firstName = (message && message.body && message.body.user && messaage.body.user.firstName) || 'default'

上面的例子,firstName属性在对象的第四层,所以需要判断四次,每一层是否有值。三元运算符也常用于判断对象是否存在

const fooInput = myForm.querySelector('input[name=foo]')
const footVal = fooInput ?footInput.value : undefined

上面的例子,必须先判断fooInput是否存在,才能读取fooInput.value

这样层层判断非常麻烦,因此ES2020引入了“链式判断运算符”---?.,简化上面的写法 

const firstName = message?.body?.user?.firstName || 'default'
const fooVal = myForm.querySelector('input[name=foo]')?.value

上面代码中使用了?.运算符,直接在链式调用的时候判断,左侧的对象是否为null或者undefined,如果是的,就不再往下运算,而是返回undefined

下面是判断 对象方法是否存在,如果存在就立即执行的例子

iterator.return?.()

上面的代码中,iterator.return如果有定义,就会调用该方法,否则iterator.return直接返回undefined,不再执行?.后面的部分

对于那些可能没有实现的方法,这个运算符尤其有用

if(myForm.checkValidity?.()===false){return
}

上面代码中,老式浏览器的表单对象可能没有checkValidity()这个方法,这时?.运算符就会返回undefined,判断语句就变成了undefined===false,所以就会跳过下面的代码

链式判断运算符?.有是那种写法

  •  obj?.prop :对象属性是否存在
  • obj?.[expr]:同上
  •  func?.(...args):函数或者对象方法是否存在

下面是obj?.[expr]用法的一个例子

let hex = "#C0FFEE".match(/#([A-Z]+)/i)?.[1];

上面代码中,字符串match()方法,如果没有发现匹配会返回null,如果发现匹配会返回一个数组,?.运算符起到了判断作用

下面?.运算符常见形式,以及不实用运算符时的等价形式

a?.b
// 等同于
a ===  null ? undefined : a.ba?.[x]
a === null ? undefined :a[x]a?.b()
a === null ? undefined :a.b()a?.()
a === null ? undefined : a()

上面的代码 中,特别注意后面两种形式, a?.b()a?.(),如果a?.b()里面的a.b有值,但不是函数,不可调用。那么a?.b()是会报错的。a?.()也是如此,如果a不是nullundefined,但也不是函数,那么a?.()会报错

使用这个运算符,有几个注意点:

1)短路机制

本质上,?.运算符相当于一个短路机制,只要不满足条件,就不会往下执行

a?.[++x]
// 
a === null ? undefined : a[++x]

上面代码中,如果a是undefined或者null,那么x不会进行递增运算。也就是说,链式判断运算符一旦不为真,右侧的表达式就不再求值。

2)括号的影响

如果属性链有圆括号,链判断运算符对圆括号外部没有影响 ,只对圆括号内部有影响

(a?.b).c
//
(a === null ? undefined : a.b).c

上面代码中,?.对圆括号外部没有影响,不管a对象是否存在,圆括号后面的.c总是会执行。

一般来说,使用?.运算符的场合,不应该使用圆括号。

3)报错场合

以下写法是错误的,会报错

// 构造函数
new a?.()
new a?.b()// 链判断运算符的右侧有模板字符串
a?.`{b}`
a?.b`{c}`// 链判断运算符的左侧是 super
super?.()
super?.foo// 链运算符用于赋值运算符左侧
a?.b = c


http://www.ppmy.cn/news/1026677.html

相关文章

springboot异步任务

在Service类声明一个注解Async作为异步方法的标识 package com.qf.sping09test.service;import org.springframework.scheduling.annotation.Async; import org.springframework.stereotype.Service;Service public class AsyncService {//告诉spring这是一个异步的方法Asyncp…

WPS-0DAY-20230809的分析和利用复现

WPS-0DAY-20230809的分析和初步复现 一、漏洞学习1、本地复现环境过程 2、代码解析1.htmlexp.py 3、通过修改shellcode拿shell曲折的学习msf生成sc 二、疑点1、问题2、我的测试测试方法测试结果 一、漏洞学习 强调:以下内容仅供学习和测试,一切行为均在…

Mahout教程_编程入门自学教程_菜鸟教程-免费教程分享

教程简介 Mahout 是 Apache Software Foundation(ASF) 旗下的一个开源项目,提供一些可扩展的机器学习领域经典算法的实现,旨在帮助开发人员更加方便快捷地创建智能应用程序。Mahout包含许多实现,包括聚类、分类、推荐…

题目大解析(3)

前言 这里的题目大多是用c写的。 题目 字符串中的第一个唯一字符翻转字符串验证回文串把字符串转换成整数 字符串中的第一个唯一字符 原题链接:字符串中的第一个唯一字符 计数法: class Solution { public:int firstUniqChar(string s) {int arr[130] …

高数作业啊

出函数 f ( x ) x 3 − 3 x 2 f(x)x^3-3 x^2 f(x)x3−3x2 ,确定其单调性区间、极值点以及凹凸性。如果 y u 2 yu^2 yu2 且 u 3 x 7 u3 x7 u3x7 ,求 d y d x \frac{d y}{d x} dxdy​ 。(链式法则)对于函数 f ( x , y ) x…

STM32 F103C8T6学习笔记2:GPIO的认识—GPIO的基本输入输出—点亮一个LED

今日继续学习使用 STM32 F103C8T6开发板 点亮一个LED灯,文章提供源码,测试工程,实验效果图,希望我的归纳总结会对大家有帮助~ 目录 GPIO的认识与分类 : 引脚安排整理: 定时器的引脚例举: …

Scractch3.0_Arduino_ESP32_学习随记_IO中断(六)

IO中断 目的器材程序联系我们 目的 ESP32 IO中断的使用。 中断: 当IO中断事件发生时,MCU将优先执行中断的程序。 打个比方: 你正在读一本书,突然手机收到一条紧急消息。你不想错过这个重要的消息,所以你立即停下手中的…

【深度学习_TensorFlow】调用keras高层API重写手写数字识别项目

写在前面 上一阶段我们完成了手写数字识别项目的构建,了解了网络构建、训练、测试的基本流程,但是对于一些常见的操作,因其使用过于频繁,实际上并无必要手动实现,而早已被封装为函数了。 这篇文章我们将了解keras高层…