概述
大家都知道ES6的解構,有時也會在解構的時候進行賦值默認值。
不過不知道大家是不是注意到,有時候的賦值是不生效的。
看個例子:
const user = {name: 'xiaohesong', age: null, sex: ''}
const {name, age = 18, sex = 'man', gf = 'lzl'} = user
console.log(name, age, sex, gf)
大家都知道上面由于規范的原因會輸出什么內容。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
然而大多數的時候,其實更想對falsly
的值進行賦值。
也就是想要他的行為變成下面這樣:
const user = {name: 'xiaohesong', age: null, sex: ''}
const {name, age = 18, sex = 'man', gf = 'lzl'} = user
console.log(name, age, sex, gf) // xiaohesong 18 man lzl
很早之前就有這個想法,不過沒有去嘗試。
起因
hao
由于前段時間看dan寫了發了個推說關于匿名導出的:
https://twitter.com/dan_abramov/status/1255229440860262400
If you write "export default () => { ... }" to declare components, they:
- will show up as Anonymous in stack traces
- will show up as Unknown in DevTools
- won't be checked by React-specific lint rules
- won't work with some features like Fast Refresh
Give components names!
所以就想著給項目中的匿名導出移除,考慮到可能有不少的模塊,就尋思著寫個插件給對應的ExportDefaultDeclaration
ast節點替換下當做練手。
不過最終沒有帶到線上,不是很有必要,項目用到的匿名導出不是很多,最主要的還是慫,出一個故障可不好玩。。
對應的匿名導出變更的插件地址:babel-plugin-assign-name-for-anonymous-default
基于這個插件的輸出,對于解構賦值默認值產生了想法。因為在項目中有不少的解構賦值默認值是達不到預期的,有些字段后端會返回成null
等。
開動
對于babel的ast就不過多的介紹了,網上也有很多的文章。
由于明確了我們的目標,只需要找到對應的節點就可以了。
https://astexplorer.net/ 這里可以找到對應的節點:
const fields = ['first', '']
const [firstField, secondField = 'second'] = fields
這里主要的節點就是ArrayPattern
。
const {name = 'asd'} = {name: '', age: 18, friend: {fName: ''}}
這里主要的節點就是ObjectPattern
。
如果有賦默認值的行為,這兩個下面都有一個AssignmentPattern
。
在這個ast里可以模擬出你想到的行為(ast打開,js默認選中的就是acorn解析器),然后配合babel-types來對節點進行操作。
其實babel知道了基本的行為再配合ast和types就能做到你想做的操作。
https://github.com/jamiebuilds/babel-handbook 這個作為入門很好的資料。
主要的操作就是在AssignmentPattern
這一步,有興趣可以看下源碼。
當時是想給babel提個pr加個options,但是考慮到違背規范,會產生副作用,便放棄了這個想法。
解構賦默認值的時候會對
falsly
的值進行處理,效果類似于||
操作符。
和團隊商討之后,同事認為沒什么必要,需要處理的時候自己處理下就好,因此開源出來。
插件地址: babel-plugin-use-or-operator-for-destructuring-default-value
不求大家在項目中用到,但求各位大佬的個人項目中使用下試試。在下不勝感激。