如何在 ES10 中使用可选链操作符和 nullish coalescing 操作符来简化代码
随着前端开发的不断发展,JavaScript的版本也不断更新。ES10是JavaScript的最新版本,它又增加了两个新的操作符,分别是可选链操作符和nullish coalescing操作符。这两个操作符可以极大地简化代码,提高开发效率。本文将详细介绍在ES10中如何使用可选链操作符和nullish coalescing操作符来简化代码,并提供相应的示例代码。
一、可选链操作符
在ES10之前,要操作一个对象嵌套层次很深的属性时,需要使用很多个判断语句来确保这些属性都存在,如下所示:
if (person && person.contact && person.contact.address) { console.log(person.contact.address) }
这样的代码非常冗长,而ES10中引入了可选链操作符?t来解决这个问题,如下所示:
console.log(person?.contact?.address)
这样的代码简洁明了,我们只需要加上可选链操作符?t,就可以避免嵌套层次很深而导致的代码经常出错的情况。如果person不存在或者contact不存在或者address不存在,返回undefined,不会出现任何错误。
二、nullish coalescing操作符
在ES10之前,我们常常使用 || 操作符来设置默认值。当变量为undefined或者null时,我们可以设置一个默认值。例如:
const name = person.name || 'defaultName'
但是,当变量的值为0或者''时,||操作符会认为这个值为false并设置默认值,这会导致一些错误的结果。例如:
const amount = 0 const newAmount = amount || 100 console.log(newAmount) // 结果是100,而不是0
为了解决这个问题,ES10中引入了nullish coalescing操作符??,如下所示:
const newAmount = amount ?? 100 console.log(newAmount) //结果是0
nullish coalescing操作符??只有在变量的值是null或者undefined时,才会设置默认值,如上面的代码中,当amount的值为0时,nullish coalescing不会将0视为null或者undefined,所以不会设置默认值。而当变量的值是null或者undefined时,nullish coalescing操作符才会设置默认值,如下所示:
const address = null const defaultAddress = 'defaultAddress' const newAddress = address ?? defaultAddress console.log(newAddress) // 结果是'defaultAddress'
三、如何使用可选链操作符和nullish coalescing操作符
可选链操作符和nullish coalescing操作符可以在一起使用,以便处理深层嵌套的对象,并提供默认值。例如:
-- -------------------- ---- ------- ----- ------ - - ----- ------ -------- - -------- ----- ------ --------------- - - ----- ------- - ------------------------ -- ---------------- -------------------- -- -------------------
在上面的代码中,如果address的值为null或者undefined时,我们会设置一个默认值。这样的代码结构非常简洁,同时对于深层嵌套的对象也非常友好。
结论
在ES10中,可选链操作符和nullish coalescing操作符被引入来简化代码并提高开发效率。通过这两个新操作符,我们可以轻松地避免意外的错误,例如undefined的属性,将0或者空字符串视为有意义的值等。当我们使用这两个操作符时,代码会更加清晰,并且更易于维护。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6750b891050cf9039c154c22