首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Javascript ES2020中有没有optionalChaining的等价物?

在Javascript ES2020中,optional chaining的等价物是使用条件判断和短路运算符来实现类似的功能。optional chaining是一种简化代码的语法,用于在访问对象的属性或调用方法时,避免因为中间属性或方法不存在而导致的错误。

在ES2020之前,可以使用条件判断和短路运算符来模拟optional chaining的效果。例如,假设我们有一个对象person,它有一个属性address,address又有一个属性city,我们想要获取person.address.city的值,但是如果person或address不存在,就会导致错误。

使用条件判断和短路运算符,可以这样实现:

代码语言:txt
复制
const city = person && person.address && person.address.city;

上述代码中,通过使用&&运算符,当person存在时才会继续访问address属性,当address存在时才会继续访问city属性。如果任何一个属性不存在,整个表达式就会短路,返回undefined。

然而,这种方式相对繁琐且不够简洁。ES2020引入了optional chaining语法,可以更方便地实现相同的功能。使用optional chaining,可以将上述代码简化为:

代码语言:txt
复制
const city = person?.address?.city;

上述代码中,使用?.语法,当person、address或city任何一个属性不存在时,整个表达式会返回undefined,而不会导致错误。

需要注意的是,optional chaining语法在ES2020中才被引入,因此在之前的Javascript版本中是不支持的。如果需要在旧版本的Javascript中使用类似的功能,仍然需要使用条件判断和短路运算符来模拟optional chaining的效果。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Vue3工具函数源码踩坑记

一、学习前的准备 下面内容来自若川-源码共读群~~ 本期相对第一期简单些,上期没有完成笔记的可以继续完成笔记学习,也可以在群里交流。...好了, 之前运行的npm install --global yarn 的yarn也没有了,需要重新安装下, 巴拉巴拉一顿操作后迎接我的又是一片终端报错红彤彤,逐渐失去耐心,回头猛然想起,我的macos啊...默认情况下,我们启用计划的提案 *以下都是针对ES2020新特性做babel转换用的。...通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。...babel中的三个都是用于转换ES2020新增特性用的。其中详细看了下对应几个babel插件作用,以及复习下TS断言的作用,一步一步操作理解,印象比较深刻。

58620

ES2020 中 Javascript 10 个你应该知道的新功能

这就意味着,现在对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让我们来看看都有哪些改变。 1、BigInt BigInt,Javascript 中最期待的新功能终于落地。...它允许开发者在 JS 中使用更大的整数进行数据处理。 之前,Javascript 中最大的整数是 pow(2, 53) - 1。但是,BigInt 不受此限制。 ?...在 Javascript 中有很多值都是 falsely。比如:空字符串、数字 0、undefined 、null、 false 、NaN 等。.../utils.mjs' export { utils } 9、明确定义 for-in 的顺序 ECMA 规范中并没有明确定义 for (x in y) 的顺序。...我正在开发一个全新的开发者平台 ,现在可以试下! ES2020 中功能哪个是你喜欢的呢?可以在留言区给我们留言。

62731
  • ES11 来了,还学得动吗?

    写在前面 ES2020(即 ES11)上周(2020 年 6 月)已经正式发布,在此之前进入 Stage 4 的 10 项提案均已纳入规范,成为 JavaScript 语言的新特性 一.特性一览 ES...能够在属性访问、方法调用前检查其是否存在 Nullish coalescing Operator:用来提供默认值的新运算符??...script 标签 import.meta.scriptElement 但需要注意的是,规范并没有明确定义具体的属性名和含义,都由具体实现来定,所以特性提案里的希望浏览器支持的这两个属性将来可能支持也可能不支持...,在函数调用中有些奇怪alert?.(),这是为了与三目运算符中的?...for-in 遍历机制 JavaScript 中通过for-in遍历对象时 key 的顺序是不确定的,因为规范没有明确定义,并且能够遍历原型属性让for-in的实现机制变得相当复杂,不同 JavaScript

    56510

    ES2020

    ES2020 写在前面 ES2020(即 ES11)2020 年 6 月已经正式发布,在此之前进入 Stage 4 的 10 项提案均已纳入规范,成为 JavaScript 语言的新特性 一.特性一览...能够在属性访问、方法调用前检查其是否存在 Nullish coalescing Operator:用来提供默认值的新运算符??...script 标签 import.meta.scriptElement 但需要注意的是,规范并没有明确定义具体的属性名和含义,都由具体实现来定,所以特性提案里的希望浏览器支持的这两个属性将来可能支持也可能不支持...,在函数调用中有些奇怪alert?.(),这是为了与三目运算符中的?...for-in 遍历机制 JavaScript 中通过for-in遍历对象时 key 的顺序是不确定的,因为规范没有明确定义,并且能够遍历原型属性让for-in的实现机制变得相当复杂,不同 JavaScript

    52920

    javascript ES2020 已经来了

    在ES6(也就是ECMAScript 2015)推出之前,JavaScript的发展一直是比较缓慢的。...现在,在2020年,最新的JavaScript功能已经被敲定,并作为ECMAScript 2020(或ES2020)发布。...虽然ES2020并没有像在ES6中引入那么多的功能,但它引入了许多有用的新增功能。在本文中,我将讨论ES2020中我最喜欢的新功能。...下面是在Node.js中使用globalThis使用setTimeout函数的例子: 下面,在web 浏览器中使用同样的方法。 动态导入 动态导入是我最喜欢的ES2020的功能之一。...结束语 ES2020新功能的引入,为不断发展的JavaScript增加了更多的灵活性和力量。本文探讨了我最喜欢的一些功能,但还有一些其他的功能,我建议你去研究一下,看看哪些功能最适合你。

    1.3K40

    ES2020的这些新功能令人期待

    在空值合并之前 我最近在做一个项目,其中需要增加暗夜模式的切换功能。我必须检查输入是否为 true或者false。如果用户没有设置任何值,默认它应该为true。...动态导入 此功能将帮助你的应用更高效地运行。动态导入允许你实时地在应用中以模块的形式按需导入JS文件。在ES2020之前,无论你是否使用了该模块,都应该提前导入它。...但是在ES2020中我们以原生的方式来实现这个功能,不再需要模块打包工具等其他方式减少开销了。...其他也很令人期待的功能 BigInt 允许你使用比Javascript中允许的最大值大的数字。这个数字是pow(2,53)-1。...总结 本文中有些功能是我以个人角度总结梳理的,如果缺少了哪个功能或有我理解有误的地方,欢迎大家在评论中指出,谢谢!

    90920

    使用Typescript和ES模块发布Node模块

    TypeScript已经成为一种非常流行的JavaScript语言,这是有原因的。...如果没有,您应该什么也看不到——但是请注意,你有一个新的 lib 目录,其中有文件!TypeScript编译时不会将任何文件合并在一起,而是将每个模块转换成对应的JavaScript。.../subtract.js'; export { add, subtract }; 它们看起来和我们的输入非常相似,但没有我们添加的类型注释。...如果我们使用了比ES2015更新的任何JavaScript功能,TypeScript会将它们转换为ES2015友好的语法,但是在我们的案例中,我们没有使用它,因此TypeScript在很大程度上仅保留了所有内容...因为我们要发布 lib 目录,所以需要确保在运行 npm publish 时 lib 目录是最新的。npm文档中有一节是关于如何做到这一点的——我们可以使用 prepublishOnly 脚本。

    2.7K20

    vue2项目中如何使用es2020

    ECMAScript 规范史 ECMAScript 基于多种原始技术,最著名的是 JavaScript (Netscape) 和 JScript (Microsoft)。...异常处理、更严格的错误定义、数字输出格式以及对未来语言增长预期的微小变化被引入标准,第三版发布; 第四版并没有完成,没有发布; 2009年12月,第五版发布。...语法在模块中使用; 增加 for-in 枚举顺序的标准化; import.meta,模块中可用的主机填充对象,可能包含有关模块的上下文信息; 以及添加两个新的语法功能以改进对“空”值(空或未定义)的处理...=, &&=, ||=); WeakRef,用于引用目标对象而不将其从垃圾收集中保留; FinalizationRegistry,用于管理在目标对象被垃圾收集时执行的清理操作的注册和注销; 数字文字的分隔符...JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

    1K10

    vue2项目中如何使用es2020

    ECMAScript 规范史 ECMAScript 基于多种原始技术,最著名的是 JavaScript (Netscape) 和 JScript (Microsoft)。...异常处理、更严格的错误定义、数字输出格式以及对未来语言增长预期的微小变化被引入标准,第三版发布; 第四版并没有完成,没有发布; 2009年12月,第五版发布。...语法在模块中使用; 增加 for-in 枚举顺序的标准化; import.meta,模块中可用的主机填充对象,可能包含有关模块的上下文信息; 以及添加两个新的语法功能以改进对“空”值(空或未定义)的处理...=, &&=, ||=); WeakRef,用于引用目标对象而不将其从垃圾收集中保留; FinalizationRegistry,用于管理在目标对象被垃圾收集时执行的清理操作的注册和注销; 数字文字的分隔符...JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。

    1.9K20

    Dart-类(上)

    前言在 Dart 中,类(Class)是一种用于创建对象的模板它可以封装数据和方法JavaScript 也有类的概念,虽然它在 ES6(ECMAScript 2015)之前是以不同的方式实现的类的定义与使用...来访问对象的属性和方法JavaScript 中的类在 JavaScript (ES6 及以后) 中,类的定义方式如下:class Person { constructor(name, age) {...中的静态方法和属性在 JavaScript 中,ES6 引入了静态方法的概念通过在方法名前添加 static 关键字,可以创建静态方法对于静态属性,直到最近(ES2020)才得到正式支持,但在此之前你可以在类外部定义静态属性...Dart 和 JavaScript (ES6 及以后) 中,静态方法的定义方式相同,都是在方法名前加上 static 关键字静态属性在 Dart 中也是使用 static 关键字,而在 JavaScript...中直到 ES2020 才正式支持这种语法属性定义:Dart 允许在类内部直接定义静态属性在 JavaScript 的早期版本中,静态属性通常在类定义之外单独设置类型系统:Dart 中静态成员可以拥有显式的类型

    18410

    盘点 ES2020 的新功能

    Ecma International 负责对 JavaScript 的标准化。是他们制定了 ECMAScript 规范。...ECMAScript 2020/ES2020/ES11 于 6 月发布,并且已经在现代浏览器中实现。让我们看看这会带来什么好处。 太长不看版 如果你不想看细节,那么只看这张图就够了。 ?...可选链 如果要使用多级嵌套在对象中的属性,在以前必须要检查它们是否为 null 或 undefined,以避免代码崩溃。现在可以在访问这些属性之前使用 ?....const module = await import('module'); 模块命名空间导出 在大多数情况下,我们能够通过导入导出 JavaScript 模块来重命名模块的名称,就像这样: import...* as values from 'module'; import { value as v } from 'module';export { v as value }; 但是没有办法直接从名称被更改的另一个模块中重新导出某些内容

    43740

    JavaScript空值合并运算符

    今年ECMAScript[1] 2020(ES2020)将发布!自 2015 年 ECMAScript 2015(ES6)发布以来,我们每年都对 JavaScript 语言进行更新。...❝「目录」 使用 JavaScript 空值合并运算符 使用实例 空值合并运算符与逻辑或( ||) 浏览器支持 总结 ❞ 在ES2020中,我们获得了在其他语言中( 如 C# 和 PHP)早已可用的功能...true // false 链接 JavaScript 的空值合并运算符 JavaScript 的空值合并运算符的妙处在于,我们可以根据需要将其进行多次链接。...浏览器支持 在撰写本文时,最新版本的 Chrome、Firefox、Edge 和 Safari 可以使用空值合并运算符。 ? 总结 空值合并运算符是该 JavaScript 语言不错的补充。...拥有更多检查值的选择并没有什么坏处。

    1.5K50

    ES2020新特性

    2020年4月2日,TC39确定了ES2020的新特性,虽然现在还是 candidate 阶段,需要等到 Ecma GA 的最后确认。...按照惯例每年3月份在TC39委员会上,Stage 4的特性会被确定,新的语法特性已被认可;也就是说,因为Stage 4的特性都是确定会作为新版特性发布的,所以基本上在每年3月份的时候,当前年度版本的新特性已经确定下来了.../utils.mjs'; 可是一直没有对应的导出语法,所以2020加上了: export * as utils from '....详见:https://v8.dev/features/globalthis 7.Optional chaining 在JavaScript中获取嵌套的属性时容易产生错误,同时代码也冗长不易阅读: //...在 JavaScript 中,null、undefined、false、0、NaN 和 '' 都代表假值,既然我们已经有&& 和 || 来处理了,那为何还要新增一个 ?? 呢?

    70730

    React-Native 开发中的小技巧

    这样的层层判断非常麻烦,因此 ES2020 引入了“链判断运算符”(optional chaining operator)?.,简化上面的写法。...为了避免这种情况,ES2020 引入了一个新的 Null 判断运算符??。它的行为类似||,但是只有运算符左侧的值为null或undefined时,才会返回右侧的值。...箭头函数中的 this(见:ES6语法函数的扩展) 在JavaScript 中this对象的指向是可变的,但是在箭头函数中,它是固定化的,也可以称为静态的。...this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。...ES5 版本清楚地说明了,箭头函数里面根本没有自己的this,而是引用外层的this。

    2.3K10

    JavaScript:ECMAScript 2020中的新增功能

    JavaScript即将推出令人兴奋的新功能! 即使新ECMAScript 2020(ES2020)语言规范的最终批准已经在六月,您也可以立即开始尝试一下! ? 处理模块 一些重要的创新涉及模块。...例如,在上面的代码中,如果fetch("/users")失败并且相应的诺言被拒绝,您将没有一个简单的方法来知道的诺言fetch("/roles")是兑现还是被拒绝。...使用新功能 在整篇文章中,您对ES2020的新功能进行了概述,并且您可能想知道何时才能使用它们。...最后,Babel和TypeScript等最受欢迎的编译器的最新版本也使您可以使用最新的ES2020功能。...现在,在您的JavaScript项目中,如下安装auth0-spa-js库: npm install @auth0/auth0-spa-js 然后,在您的JavaScript应用中实现以下内容: import

    1.9K31

    Swift4.2:Nil cannot be assigned to type UnsafeMutablePointer与Optional chaining

    由于直接抱着对其他语言的认识来使用swift,这个问题苦恼了我很久,当我用关键词“swift 空指针”搜索也没有得到有用信息,直到我发现swift一定要对可能为空的变量做标记——Optional(?...Optional Chaining(可选类型) https://docs.swift.org/swift-book/LanguageGuide/OptionalChaining.html 在C和Objective-C...中不存在可选类型,可以也只能用传统方式处理空值,Swift引入可选类型专为处理值可能为空的情况。...,他们的主要区别是用?更优雅。。。...,如果运行中访问没有值的变量,程序就会崩溃。 用?声明的Optional变量在传值时有两种选择:使用时后面加??提供默认值以替代值可能为nil的情况,或者使用的时候后面加上!

    1.7K20
    领券