【译】Javascript中你需要知道的最出色的新特性:Optional Chaining

简介: 对于使用Javascript的每个人来说,可选链(Optional chaining)是游戏的规则的改变者。它与箭头函数或let和const一样重要。我们讨论下它可以解决什么问题,它如何工作,以及它如何使得你的生活更加轻松。

对于使用Javascript的每个人来说,可选链(Optional chaining)是游戏的规则的改变者。它与箭头函数或letconst一样重要。我们讨论下它可以解决什么问题,它如何工作,以及它如何使得你的生活更加轻松。


问题


想象以下场景:


你正在使用片段代码来从一个API加载数据。返回数据是深度嵌套的对象,这就意味着你需要遍历很长的对象属性。


// API response object
const person = {
    details: {
        name: {
            firstName: "Michael",
            lastName: "Lampe",
        }
    },
    jobs: [
        "Senior Full Stack Web Developer",
        "Freelancer"
    ]
}
// Getting the firstName
const personFirstName = person.details.name.firstName;


现在,保留这样的代码也是不错的。不过,有个更好的解决方法,如下:


// Checking if firstName exists
if( person &&
    person.details &&
    person.details.name ) {
        const personFirstName = person.details.name.firstName || 'stranger';
}


正如示例中你所看到的,即使是简单的事情,比如获取一个人的名字,也很难正确获取。


所以,这就是为什么我们使用类似lodash库去处理这样的事情:


_.get(person, 'details.name.firstName', 'stranger');


lodash使得代码更具可读性,但是你得在你的代码库中引入很多的依赖。你需要更新它,然后,如果你在一个团队中工作,你需要在团队中推广使用它。所以,这也不是一个理想的解决方案。


解决方案


可选链为这些(除了团队的问题)提供了一个解决方案。


它是怎么工作的


初次看到可选链的新语法,你可能会感到陌生,但是,几分钟后你会习惯它的。


const personFirstName = person?.details?.name?.firstName;


好了,现在你脑子可能有很多问号(双关语义)。上面语法的?是个新的事物。这就是你要想想的地方了。在属性前(原文应该改为属性后比较准确)有?.,就是在问你属性person存在吗?或者,更加javascript的表达方式--person属性的值是nullundefined吗?如果是,将不会返回一个错误,而是返回undefined。所以personFirstName将返回undefined。对details?name?会进行重复的询问。如果任意一个的值为nullundefined,之后personFirstName都会返回undefined。这被称为Short-circuiting(短路)。一旦javascript找到值为nullundefined,它就会短路并不会再深入查询下去。


默认值


我们还需要学学Nullish coalescing operator(空位合并运算符)。好吧,这听起来很难学。但是实际上,一点也不难。我们看看下面的例子:


const personFirstName = person?.details?.name?.firstName ?? 'stranger';


Nullish coalescing operator??来表示。它也很容易去解读。如果??左侧返回的内容是undefined,那么personFirstName会将??右侧的值赋值给它。这太容易了。


动态属性


有时候你需要获取动态的值。它可能是一个数组的值,或者是一个对象的动态属性。


const jobNumber = 1;
const secondJob = person?.jobs?.[jobNumber] ?? 'none';


这里需要重点理解的地方是jobs?.[jobNumber],它和jobs[jobNumber]表达的一样,但是不会抛出一个错误;相反,它会返回none值。


函数或方法调用


有时候,你会处理对象,而你不知道它们是否带有方法。这里我们可以使用?.()语法或带参数?.({ some: 'args'})语法。它会根据你的需求运行。如果在那个对象中不存在这个方法,它会返回值undefined


const currentJob = person?.jobs.getCurrentJob?.() ?? 'none';


上面的例子中,如果没有getCurrentJob方法,那么currentJob将会返回none


今天开始使用它


目前没有浏览器支持此功能--Babel做转换了。


这里已经有一个babel.js插件,如果你已经有了Babel设置,那就很容易集成了。


相关文章
|
12月前
|
自然语言处理 JavaScript 前端开发
ECMAScript 6 的出现为 JavaScript 带来了许多新的特性和改进
这些只是ES6的一些主要特性,它们极大地增强了JavaScript的功能和表现力,使得JavaScript在大型应用开发、前端框架等领域能够更加高效地编写复杂的应用程序。
|
10月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
231 11
|
12月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
1330 4
|
12月前
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
178 5
|
JavaScript 前端开发 索引
JavaScript ES6及后续版本:新增的常用特性与亮点解析
JavaScript ES6及后续版本:新增的常用特性与亮点解析
448 4
|
JavaScript 前端开发 编译器
掌握现代化JavaScript:ECMAScript提案与特性
【10月更文挑战第13天】本文介绍了ECMAScript(ES)的最新提案与特性,包括可选链、空值合并运算符、类字段和顶层Await等。通过跟踪TC39提案、使用Babel或TypeScript、测试兼容性以及逐步迁移,开发者可以高效地采用这些新特性,简化代码、提高开发效率并增强应用功能。文章还提供了实战技巧,帮助开发者在现代Web开发中充分利用这些现代化的特性。
|
JavaScript 前端开发 Oracle
软件工程师,学习下JavaScript ES6新特性吧
软件工程师,学习下JavaScript ES6新特性吧
129 9
|
前端开发 JavaScript
JavaScript新纪元:ES6+特性深度解析与实战应用
【10月更文挑战第29天】本文深入解析ES6+的核心特性,包括箭头函数、模板字符串、解构赋值、Promise、模块化和类等,结合实战应用,展示如何利用这些新特性编写更加高效和优雅的代码。
320 0
|
Rust JavaScript 前端开发
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性
Rust! 无VDom! 尤雨溪解析 Vue.js 2024 新特性

热门文章

最新文章