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

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