纯前端实现类Excel智能填充：基于线性回归的JS算法解析

前言

引言

文章阐述了基于JavaScript开发具备Excel风格智能填充功能的算法，旨在提供技术参考与实现思路，下文将展开详细解析。

观察Excel的“智能填充”特性，其能依据当前内容智能分析并精准预测目标值。剔除AI因素后，该功能可通过数学模型与基础代码实现。经调试，已使用JS完成核心功能开发，项目命名为smart-predictor。

项目仓库：https://github.com/jrainlau/s...（支持本地下载）

智能填充原理概述

何谓“智能填充”？

首先展示两组动态示意图：

效果显著。若给定初始数据[1, 3, 'aaa1', 'bbb2'] ，智能填充机制可生成[5, 7, 'aaa2', 'bbb3', 9, 11 'aaa3', 'bbb4']对应的结果序列。

其优势在于非简单递增，而是对数据进行分组处理，各组依自身规则递增，例如从[1, 2, 'x', 3]推导至[3, 4, 'x', 4]。

明确上述机制后，即可探讨其具体实现路径。

数据预处理：Separator模块

分隔符处理（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模块

分类器（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

经上述步骤完成数据分组，组间元素互不干扰。接下来需实现“线性回归”方法以支持数据预测。

核心算法：线性回归与Predictor

线性回归（Linear regression）

线性回归属数学理论范畴，具体细节可参考相关资料。此处直接应用线性回归二元一次公式计算回归直线斜率：

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-predictor的智能程度。

总结

结语

本文完整介绍了上述内容，期望对读者的学习或工作具有参考价值。如有疑问欢迎留言交流，感谢支持。