利用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 相关文章推荐
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
js实现继承的5种方式
Dec 01 Javascript
javascript 将共享属性迁移到原型中去的实现方法
Aug 31 Javascript
Jquery树插件zTree实现菜单树
Jan 24 Javascript
javascript简单链式调用案例分析
May 10 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 Javascript
浅谈React高阶组件
Mar 28 Javascript
推荐一个基于Node.js的表单验证库
Feb 15 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
php 在线打包_支持子目录
2008/06/28 PHP
is_uploaded_file函数引发的不能上传文件问题
2013/10/29 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
jquery实现图片水平滚动效果代码分享
2015/08/26 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
vue里面v-bind和Props 利用props绑定动态数据的方法
2018/08/27 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
2019/11/10 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
浅析Python中的for 循环
2016/06/09 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python对excel文档的操作方法详解
2018/12/10 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
Python使用re模块验证危险字符
2020/05/21 Python
Python中无限循环需要什么条件
2020/05/27 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
同学聚会欢迎辞
2014/01/14 职场文书
十八届三中全会报告学习材料
2014/02/17 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
公司年会晚会开幕词
2019/04/02 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
如何自己动手写SQL执行引擎
2021/06/02 MySQL
python flappy bird小游戏分步实现流程
2022/02/15 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS