概述
大家都知道ES6的解構(gòu)，有時(shí)也會(huì)在解構(gòu)的時(shí)候進(jìn)行賦值默認(rèn)值。
不過(guò)不知道大家是不是注意到，有時(shí)候的賦值是不生效的。
看個(gè)例子：
const user = {name: 'xiaohesong', age: null, sex: ''}
const {name, age = 18, sex = 'man', gf = 'lzl'} = user
console.log(name, age, sex, gf)
大家都知道上面由于規(guī)范的原因會(huì)輸出什么內(nèi)容。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
然而大多數(shù)的時(shí)候，其實(shí)更想對(duì)falsly的值進(jìn)行賦值。
也就是想要他的行為變成下面這樣：
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
很早之前就有這個(gè)想法，不過(guò)沒(méi)有去嘗試。
起因
hao
由于前段時(shí)間看dan寫(xiě)了發(fā)了個(gè)推說(shuō)關(guān)于匿名導(dǎo)出的：
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!
所以就想著給項(xiàng)目中的匿名導(dǎo)出移除，考慮到可能有不少的模塊，就尋思著寫(xiě)個(gè)插件給對(duì)應(yīng)的ExportDefaultDeclaration ast節(jié)點(diǎn)替換下當(dāng)做練手。
不過(guò)最終沒(méi)有帶到線上，不是很有必要，項(xiàng)目用到的匿名導(dǎo)出不是很多，最主要的還是慫，出一個(gè)故障可不好玩。。
對(duì)應(yīng)的匿名導(dǎo)出變更的插件地址：babel-plugin-assign-name-for-anonymous-default
基于這個(gè)插件的輸出，對(duì)于解構(gòu)賦值默認(rèn)值產(chǎn)生了想法。因?yàn)樵陧?xiàng)目中有不少的解構(gòu)賦值默認(rèn)值是達(dá)不到預(yù)期的，有些字段后端會(huì)返回成null等。
開(kāi)動(dòng)
對(duì)于babel的ast就不過(guò)多的介紹了，網(wǎng)上也有很多的文章。
由于明確了我們的目標(biāo)，只需要找到對(duì)應(yīng)的節(jié)點(diǎn)就可以了。
https://astexplorer.net/ 這里可以找到對(duì)應(yīng)的節(jié)點(diǎn)：
const fields = ['first', '']
const [firstField, secondField = 'second'] = fields
這里主要的節(jié)點(diǎn)就是ArrayPattern。
const {name = 'asd'} = {name: '', age: 18, friend: {fName: ''}}
這里主要的節(jié)點(diǎn)就是ObjectPattern。
如果有賦默認(rèn)值的行為，這兩個(gè)下面都有一個(gè)AssignmentPattern。
在這個(gè)ast里可以模擬出你想到的行為(ast打開(kāi)，js默認(rèn)選中的就是acorn解析器)，然后配合babel-types來(lái)對(duì)節(jié)點(diǎn)進(jìn)行操作。
其實(shí)babel知道了基本的行為再配合ast和types就能做到你想做的操作。
https://github.com/jamiebuilds/babel-handbook 這個(gè)作為入門(mén)很好的資料。
主要的操作就是在AssignmentPattern這一步，有興趣可以看下源碼。
當(dāng)時(shí)是想給babel提個(gè)pr加個(gè)options，但是考慮到違背規(guī)范，會(huì)產(chǎn)生副作用，便放棄了這個(gè)想法。
解構(gòu)賦默認(rèn)值的時(shí)候會(huì)對(duì)
falsly的值進(jìn)行處理，效果類似于||操作符。
和團(tuán)隊(duì)商討之后，同事認(rèn)為沒(méi)什么必要，需要處理的時(shí)候自己處理下就好，因此開(kāi)源出來(lái)。
插件地址： babel-plugin-use-or-operator-for-destructuring-default-value
不求大家在項(xiàng)目中用到，但求各位大佬的個(gè)人項(xiàng)目中使用下試試。在下不勝感激。
