利用JS實(shí)現(xiàn)一個(gè)同Excel表現(xiàn)的智能填充算法
前言
本文介紹了關(guān)于利用JS實(shí)現(xiàn)同Excel表現(xiàn)的智能填充算法的相關(guān)內(nèi)容,分享出供大家參考學(xué)習(xí),下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
在使用Excel的時(shí)候,發(fā)現(xiàn)它的“智能填充”功能非常有趣,能夠智能地分析我當(dāng)前的內(nèi)容,然后準(zhǔn)確預(yù)測(cè)出我期望得到的值。排除了AI的加成,發(fā)現(xiàn)這個(gè)功能其實(shí)也可以通過(guò)數(shù)學(xué)理論和簡(jiǎn)單代碼來(lái)實(shí)現(xiàn)。經(jīng)過(guò)一番折騰,終于用JS實(shí)現(xiàn)了大致的功能,然后我把它名為smart-predictor。
項(xiàng)目地址:https://github.com/jrainlau/s...(本地下載)
什么是“智能填充”?
首先我們來(lái)看兩張gif圖:
是不是很神奇?假設(shè)我有一組給定的數(shù)據(jù)[1, 3, 'aaa1', 'bbb2']
,Excel的智能填充能夠給我返回[5, 7, 'aaa2', 'bbb3', 9, 11 'aaa3', 'bbb4']
這一組數(shù)據(jù)。
更厲害的是,智能填充不是簡(jiǎn)單地對(duì)數(shù)據(jù)進(jìn)行遞增,而是會(huì)對(duì)數(shù)據(jù)進(jìn)行分組,每個(gè)分組按照自己的規(guī)則去進(jìn)行遞增,就比如說(shuō)我們可以從[1, 2, 'x', 3]
得到[3, 4, 'x', 4]
。
在明白這些結(jié)論之后,我們就可以去討論它到底是怎么實(shí)現(xiàn)的。
Separator
我們用數(shù)組[1, 2, 'a1c', 'a2c']作為例子。當(dāng)我們拿到這樣一個(gè)數(shù)組的時(shí)候,第一步是要對(duì)其進(jìn)行分析,分析數(shù)組內(nèi)每個(gè)元素到底是一個(gè)數(shù)字,一段字符串,還是別的什么東西。分析完了,就要給他們都標(biāo)注更詳細(xì)的信息,然后把這些信息都組合起來(lái)。
比如數(shù)組元素1,可以被處理成下面這個(gè)樣子:
{ realValue: 1, numericValue: 1, splitParts: 'Number', index: 0 }
而數(shù)組元素a1c,則可以處理成這樣:
{ realValue: 'a1c', numericValue: 1, splitParts: ['a', 'c'], index: 2 }
代碼請(qǐng)戳:separator.js
可以注意到,我會(huì)提取每一個(gè)元素的純數(shù)字部分出來(lái),然后把其余部分通過(guò)一個(gè)數(shù)組儲(chǔ)存起來(lái)。這一切就是Separator所做的工作,我們最終會(huì)得到一個(gè)富含信息的新數(shù)組,然后繼續(xù)我們的工作吧!
Classifier
智能填充的最小單位是“組”。當(dāng)我們通過(guò)上一步得到一個(gè)富含信息的新數(shù)組之后,接下來(lái)就應(yīng)該對(duì)它們進(jìn)行合理的分組。分組的動(dòng)作包含了兩個(gè)細(xì)節(jié):
- 同一組的數(shù)據(jù)應(yīng)該擁有一致的“類型”,這里我們使用splitParts屬性去實(shí)現(xiàn)。
- 同一組的數(shù)據(jù)應(yīng)該是連續(xù)的,否則的話就要把不連續(xù)的數(shù)據(jù)扔到一個(gè)新的組去。
假設(shè)有一個(gè)數(shù)組[1, 2, 'a1c', 'a2c', 6, 8],元素1和2就應(yīng)該被分配到名為Number的組去,a1c和a2c則會(huì)被分配到名為ac的組里面,而6和8則會(huì)被另外分配到名為Number1的新組里面去,最后結(jié)果如下:
{ 'Number': [{ realValue: '1', ... }, { realValue: '2', ... }], 'ac': [{ realValue: 'a1c', ... }, { realValue: 'a2c', ... }], 'Number1': [{ realValue: '6', ... }, { realValue: '8', ... }] }
代碼請(qǐng)戳:classifier.js
通過(guò)上述步驟,我們成功把數(shù)據(jù)進(jìn)行分組,組與組之間的元素并不會(huì)相互干擾。接下來(lái)我們需要實(shí)現(xiàn)一個(gè)專門(mén)做“線性回歸”的方法,有了這個(gè)方法我們才能對(duì)數(shù)據(jù)進(jìn)行“預(yù)測(cè)”。
Linear regression
“線性回歸”是一個(gè)數(shù)學(xué)理論,詳情請(qǐng)自己google之,這里我直接使用線性回歸的二元一次公式去求得回歸直線的斜率:
y = ax + b
a = ∑(x−x')(y−y') / ∑(x−x')(x−x')
其中x'是所有點(diǎn)x坐標(biāo)的平均數(shù),同樣的,y'是所有點(diǎn)y坐標(biāo)的平均數(shù)。
代碼請(qǐng)戳:linearRegression.js
通過(guò)這條公式,我們可以輕易得到數(shù)組[1, 3]的斜率和偏移量為{ a: 2, b:1 },然后就可以知道以后的數(shù)據(jù)走向?qū)?huì)是[5, 7, 9, ...]。
這就是整一個(gè)“智能填充”的核心原理,接下來(lái)我們就可以依靠這個(gè)原理去實(shí)現(xiàn)數(shù)據(jù)的預(yù)測(cè)了。
Predictor
借助線性回歸的力量,我們可以通過(guò)設(shè)置預(yù)測(cè)的次數(shù),挨個(gè)挨個(gè)地對(duì)每一個(gè)分組數(shù)據(jù)進(jìn)行預(yù)測(cè),然后再把它們組合到一起形成一個(gè)新的結(jié)果數(shù)組。
以上文Classifier中的分組數(shù)據(jù)為例,對(duì)它預(yù)測(cè)一次,結(jié)果如下:
{ 'Number': [{ realValue: '1', index: 0, ... }, { realValue: '2', index: 1, ... }, { realValue: '3', index: 6, ... }, { realValue: '4', index: 7, ... }], 'ac': [{ realValue: 'a1c', index: 2, ... }, { realValue: 'a2c', index: 3, ... }, { realValue: 'a3c', index: 8, ... }, { realValue: 'a4c', index: 9, ... }], 'Number1': [{ realValue: '6', index: 4, ... }, { realValue: '8', index: 5 ... }, { realValue: '10', index: 10, ... }, { realValue: '12', index: 11 ... }] }
代碼請(qǐng)戳:predictor.js
由于我們知道每一個(gè)數(shù)據(jù)的下標(biāo),所以我們可以簡(jiǎn)單又準(zhǔn)確地把它們放到正確的位置去,最后輸出如下:
[1, 2, 'a1c', 'a2c', 6, 8, 3, 4, 'a3c', 'a4c', 10, 12]
接下來(lái)我們可以來(lái)看看測(cè)試用例對(duì)比Excel表現(xiàn):
More
當(dāng)前的smart-predictor仍然不夠“smart”,它只能預(yù)測(cè)自然數(shù)字,或者自然數(shù)字與字符串的結(jié)合,但仍然不支持對(duì)日期格式,字母列表等數(shù)據(jù)的預(yù)測(cè)。如果各位讀者有興趣,也非常歡迎大家來(lái)貢獻(xiàn)腦洞,讓smart-predicotr變得更加智能。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
js前端實(shí)現(xiàn)多圖圖片上傳預(yù)覽的兩個(gè)方法(推薦)
下面小編就為大家?guī)?lái)一篇js前端實(shí)現(xiàn)多圖圖片上傳預(yù)覽的兩個(gè)方法(推薦)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11JavaScript reduce和reduceRight詳解
這篇文章主要介紹了JavaScript reduce和reduceRight的高級(jí)用法詳解的相關(guān)資料,需要的朋友可以參考下2016-10-10javascript對(duì)下拉列表框(select)的操作實(shí)例講解
這篇文章主要介紹了javascript對(duì)下拉列表框(select)的操作。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能的兩種方法
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能的兩種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07JavaScript保存并運(yùn)算頁(yè)面中數(shù)字類型變量的寫(xiě)法
這篇文章主要介紹了JavaScript保存并運(yùn)算頁(yè)面中數(shù)字類型變量的寫(xiě)法,當(dāng)你在頁(yè)面中需要不停運(yùn)算一個(gè)數(shù)字變量時(shí)非常有用,普通的寫(xiě)法不能正常運(yùn)算,使用本文方法就可以,需要的朋友可以參考下2015-07-07