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