javascript的N大优雅写法

日常代码的堆砌罗列很不优雅,下面看看如何优雅

1、可选链“?."

这是一种访问嵌套对象属性的安全方式,即使中间属性不存在,也不会出现错误。

如下:

let user = {}

console.log(user.userInfo.name) // Cannot read property 'name' of undefined

我们通常会使用下面几种方式解决:

console.log(user.userInfo ? user.userInfo.name : '')

console.log(user.address ? user.address.street ? user.address.street.name : null : null)

console.log(user.address && user.address.street && user.address.street.name)

这样写出来的代码让人很难理解,对于嵌套层次更深的属性就会出现更多次这样的重复,不够优雅

所以下面有了可选链 ”?.“

如果可选链 ?. 前面的部分是 undefined 或者 null,它会停止运算并返回该部分。

let user = {}

console.log(user.userInf?.name)  // undefined

let info = null

console.log(info?.address.street.name) // undefined

使用注意事项:

1、不要过度使用可选链,我们只将?.用在一些可以不存在的地方

例如,如果根据我们的代码逻辑,user 对象必须存在,但 address 是可选的,那么我们应该这样写 user.address?.street,而不是这样 user?.address?.street。

2、?.前的变量必须已经声明

3、短路效应,如上面所说?.左边部分不存在,就会立即停止运算,后面有任何函数调用或者其它均不会执行


其它变体:?.[ ]  ?.()

可选链 ?. 不是一个运算符,而是一个特殊的语法结构。它还可以与函数和方括号一起使用

将 ?.() 用于调用一个可能不存在的函数

let userAdmin = { admin() { alert("I am admin") }}

let userGuest = {}

userAdmin.admin?.() // I am admin

userGuest.admin?.() // 啥也没有

?.[ ]它允许从一个可能不存在的对象上安全地读取属性

let user1 = { firstName: "John"}

let user2 = null

let key = "firstName" 

alert( user1?.[key] ) // John

alert( user2?.[key] ) // undefined

delete user?.name

我们可以使用 ?. 来安全地读取或删除,但不能写入

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 夜莺2517阅读 127,779评论 1 9
  • 版本:ios 1.2.1 亮点: 1.app角标可以实时更新天气温度或选择空气质量,建议处女座就不要选了,不然老想...
    我就是沉沉阅读 6,999评论 1 6
  • 我是黑夜里大雨纷飞的人啊 1 “又到一年六月,有人笑有人哭,有人欢乐有人忧愁,有人惊喜有人失落,有的觉得收获满满有...
    陌忘宇阅读 8,634评论 28 53
  • 兔子虽然是枚小硕 但学校的硕士四人寝不够 就被分到了博士楼里 两人一间 在学校的最西边 靠山 兔子的室友身体不好 ...
    待业的兔子阅读 2,683评论 2 9