js的一些骚操作，纯粹闹着玩，开开眼界吧
1. 可选链?.
在开始之前先来看一波什么是可选链吧
console.log( obj?.a?.b?.c?.d?.e ) obj?.f?.() obj?.arr[0]
::: tip
你可能见过这样的代码，但是大部分是不知道的。
没错，他就是我们要讲的可选链。那么这个代表着什么呢，且听我为你娓娓道来。
:::
1.1 为什么会出现可选链
let obj = { a: null } /** * 假设obj是后端给我们的返回的数据 * 正常情况下应该是 obj = { a: { b: ... } } 但是不知道什么原因，可能是用户越权访问了，或者是其他， 反正后端就是给了我们脏数据 * */ // 正常情况下，我们可以这样使用的， // 但是为了代码的鲁棒性 // console.log(obj.a.b) // 我们被迫这样 console.log(obj && obj.a && obj.a.b) // 或者这样 console.log( obj? obj.a ? obj.a.b: 'hello' : 'world' ) /* null hello */
这样虽然，解决了问题，但是，毫无以为的是，这样的代码是不够优雅的，因为重复写了很多无用的代码。
这个时候我们的可选链就闪亮登场了。
console.log(obj?.a?.b)
obj依然是上述的样子。
::: note
可以看到使用了可选链的代码真的很好看，有木有。
:::
1.2 怎么使用可选链
talk is cheap, show me the code
let obj = { a:{ b: 99 }, arr: [1,2,3,4,5], f: function(...args){ console.log(...args) }, } console.log(obj?.a?.b) console.log(obj ?. arr ?.[1]) obj?.f?.('hello','world') /* 99 2 hello world */
::: note
更多信息请查看 可选链操作符 - JavaScript | MDN (mozilla.org)
:::
2. 空值合并操作符??
- 嗯，我感觉目前用处不大，可能还存在兼容性问题，直接上个代码了解一下算了吧
const { log } = console; const o = { aa:1 } const obj = {} log(o.aa ?? 'hello') log(o.bb ?? 'hello') log(obj.aa ?? 'hello') log('----') log(o.aa || 'hello') log(o.bb || 'hello') log(obj.aa || 'hello') /* 1 hello hello ---- 1 hello hello */
可以看到，
??与||的结果一样，官方文档也说了是为了解决||的某些不足才提出来的，具体看【文档空值合并运算符 - JavaScript | MDN (mozilla.org)】吧哈哈。
- 原文发表于【CSJerry的个人博客】
