利用JS實現一個同Excel表現的智能填充算法

前言

本文介紹了關于利用JS實現同Excel表現的智能填充算法的相關內容，分享出供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧

在使用Excel的時候，發現它的“智能填充”功能非常有趣，能夠智能地分析我當前的內容，然后準確預測出我期望得到的值。排除了AI的加成，發現這個功能其實也可以通過數學理論和簡單代碼來實現。經過一番折騰，終于用JS實現了大致的功能，然后我把它名為smart-predictor。

項目地址：https://github.com/jrainlau/s...（本地下載）

什么是“智能填充”？

首先我們來看兩張gif圖：

是不是很神奇？假設我有一組給定的數據[1, 3, 'aaa1', 'bbb2'] ，Excel的智能填充能夠給我返回[5, 7, 'aaa2', 'bbb3', 9, 11 'aaa3', 'bbb4']這一組數據。

更厲害的是，智能填充不是簡單地對數據進行遞增，而是會對數據進行分組，每個分組按照自己的規則去進行遞增，就比如說我們可以從[1, 2, 'x', 3]得到[3, 4, 'x', 4] 。

在明白這些結論之后，我們就可以去討論它到底是怎么實現的。

Separator

我們用數組[1, 2, 'a1c', 'a2c']作為例子。當我們拿到這樣一個數組的時候，第一步是要對其進行分析，分析數組內每個元素到底是一個數字，一段字符串，還是別的什么東西。分析完了，就要給他們都標注更詳細的信息，然后把這些信息都組合起來。

比如數組元素1，可以被處理成下面這個樣子：

{
 realValue: 1,
 numericValue: 1,
 splitParts: 'Number',
 index: 0
}

而數組元素a1c，則可以處理成這樣：

{
 realValue: 'a1c',
 numericValue: 1,
 splitParts: ['a', 'c'],
 index: 2
}

代碼請戳：separator.js

可以注意到，我會提取每一個元素的純數字部分出來，然后把其余部分通過一個數組儲存起來。這一切就是Separator所做的工作，我們最終會得到一個富含信息的新數組，然后繼續我們的工作吧！

Classifier

智能填充的最小單位是“組”。當我們通過上一步得到一個富含信息的新數組之后，接下來就應該對它們進行合理的分組。分組的動作包含了兩個細節：

• 同一組的數據應該擁有一致的“類型”，這里我們使用splitParts屬性去實現。
• 同一組的數據應該是連續的，否則的話就要把不連續的數據扔到一個新的組去。

假設有一個數組[1, 2, 'a1c', 'a2c', 6, 8]，元素1和2就應該被分配到名為Number的組去，a1c和a2c則會被分配到名為ac的組里面，而6和8則會被另外分配到名為Number1的新組里面去，最后結果如下：

{
 'Number': [{
 realValue: '1',
 ...
 }, {
 realValue: '2',
 ...
 }],
 'ac': [{
 realValue: 'a1c',
 ...
 }, {
 realValue: 'a2c',
 ...
 }],
 'Number1': [{
 realValue: '6',
 ...
 }, {
 realValue: '8',
 ...
 }]
}

代碼請戳：classifier.js

通過上述步驟，我們成功把數據進行分組，組與組之間的元素并不會相互干擾。接下來我們需要實現一個專門做“線性回歸”的方法，有了這個方法我們才能對數據進行“預測”。

Linear regression

“線性回歸”是一個數學理論，詳情請自己google之，這里我直接使用線性回歸的二元一次公式去求得回歸直線的斜率：

y = ax + b

a = ∑(x−x')(y−y') / ∑(x−x')(x−x')

其中x'是所有點x坐標的平均數，同樣的，y'是所有點y坐標的平均數。

代碼請戳：linearRegression.js

通過這條公式，我們可以輕易得到數組[1, 3]的斜率和偏移量為{ a: 2, b:1 }，然后就可以知道以后的數據走向將會是[5, 7, 9, ...]。

這就是整一個“智能填充”的核心原理，接下來我們就可以依靠這個原理去實現數據的預測了。

Predictor

借助線性回歸的力量，我們可以通過設置預測的次數，挨個挨個地對每一個分組數據進行預測，然后再把它們組合到一起形成一個新的結果數組。

以上文Classifier中的分組數據為例，對它預測一次，結果如下：

{
 '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

由于我們知道每一個數據的下標，所以我們可以簡單又準確地把它們放到正確的位置去，最后輸出如下：

[1, 2, 'a1c', 'a2c', 6, 8, 3, 4, 'a3c', 'a4c', 10, 12]

接下來我們可以來看看測試用例對比Excel表現：

More

當前的smart-predictor仍然不夠“smart”，它只能預測自然數字，或者自然數字與字符串的結合，但仍然不支持對日期格式，字母列表等數據的預測。如果各位讀者有興趣，也非常歡迎大家來貢獻腦洞，讓smart-predicotr變得更加智能。

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。