利用JS实现一个同Excel表现的智能填充算法


Posted in Javascript onAugust 13, 2018

前言

本文介绍了关于利用JS实现同Excel表现的智能填充算法的相关内容,分享出供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

利用JS实现一个同Excel表现的智能填充算法

在使用Excel的时候,发现它的“智能填充”功能非常有趣,能够智能地分析我当前的内容,然后准确预测出我期望得到的值。排除了AI的加成,发现这个功能其实也可以通过数学理论和简单代码来实现。经过一番折腾,终于用JS实现了大致的功能,然后我把它名为smart-predictor。

项目地址:https://github.com/jrainlau/s...(本地下载)

什么是“智能填充”?

首先我们来看两张gif图:

利用JS实现一个同Excel表现的智能填充算法

利用JS实现一个同Excel表现的智能填充算法

是不是很神奇?假设我有一组给定的数据[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表现:

利用JS实现一个同Excel表现的智能填充算法

More

当前的smart-predictor仍然不够“smart”,它只能预测自然数字,或者自然数字与字符串的结合,但仍然不支持对日期格式,字母列表等数据的预测。如果各位读者有兴趣,也非常欢迎大家来贡献脑洞,让smart-predicotr变得更加智能。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js获取当前select 元素值的代码
Apr 19 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
javascript的日期对象、数组对象、二维数组使用说明
Dec 22 Javascript
jQuery中ajax的load()方法用法实例
Dec 26 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
Mar 16 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
vue接口请求加密实例
Aug 11 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
Vue自定义弹窗指令的实现代码
Aug 13 #Javascript
深入Vue-Router路由嵌套理解
Aug 13 #Javascript
AngularJS与后端php的数据交互方法
Aug 13 #Javascript
Vue Promise的axios请求封装详解
Aug 13 #Javascript
Angular6封装http请求的步骤详解
Aug 13 #Javascript
解决angularjs中同步执行http请求的方法
Aug 13 #Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
Aug 13 #Javascript
You might like
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php 冒泡排序 交换排序法
2011/05/10 PHP
php和数据库结合的一个简单的web实例 代码分析 (php初学者)
2011/07/28 PHP
如何用php获取文件名后缀
2013/06/09 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
js菜单点击显示或隐藏效果的简单实例
2014/01/13 Javascript
javascript闭包的理解
2015/04/01 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
iframe中子父类窗口调用JS的方法及注意事项
2015/08/25 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python 自动重连wifi windows的方法
2018/12/18 Python
Python3.8中使用f-strings调试
2019/05/22 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
pycharm实现print输出保存到txt文件
2020/06/01 Python
如何清空python的变量
2020/07/05 Python
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
材料加工硕士生求职信
2013/10/10 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
小学社会实践活动总结
2014/07/03 职场文书
运动会稿件100字
2014/09/24 职场文书
公安机关查摆剖析材料
2014/10/10 职场文书
2014全年工作总结
2014/11/27 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
四年级语文教学反思
2016/03/03 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书