适用场景前端高精度计算、科学计算、公式解析、金融运算、数据可视化数值处理阅读收获掌握Math.js核心用法、解决JS原生计算精度丢失问题、实现复杂数学公式运算一、前言为什么要用 Math.js在 JavaScript 开发中我们经常使用原生Math对象做数学运算但原生 Math 存在三大致命短板精度丢失严重经典的 0.1 0.2 0.30000000000000004金融、计量场景完全不可用不支持表达式解析无法直接计算字符串公式如3*(52)-8需手动解析功能单一缺少矩阵运算、复数、分数、高精度小数、统计运算等专业数学能力Math.js是一款专为 JavaScript 设计的开源、高性能数学计算库完美解决以上问题支持浏览器、Node.js 双环境是前端科学计算、金融运算、公式编辑器的首选工具库。核心优势解决浮点数精度丢失问题支持字符串数学表达式直接解析计算支持分数、复数、矩阵、向量、大数运算内置三角函数、统计函数、代数运算方法轻量易用、兼容性强、可按需引入二、Math.js 安装与环境配置Math.js 支持Node.js和浏览器两种使用方式安装方式简单。1. NPM 安装项目开发常用npm install mathjsyarn yarn add mathjspnpm pnpm add mathjs2. 浏览器 CDN 引入快速测试直接在HTML中引入适合demo、静态页面使用script srchttps://cdn.jsdelivr.net/npm/mathjs11.8.0/lib/browser/math.min.js/script3. 项目引入方式ES6 模块化Vue/React/原生工程import * as math from mathjsimport { evaluate, add, sqrt, sum } from mathjs // 按需引用CommonJSNode.js 项目const math require(mathjs)三、核心基础1. 高精度基础四则运算解决 JS 浮点数精度问题对比原生 Math 与 Math.js 的差异// 原生JS精度丢失 console.log(0.1 0.2) // 0.30000000000000004// Math.js 高精度运算 console.log(math.add(0.1, 0.2)) // 0.3// 完整四则运算 console.log(math.subtract(1.5, 0.6)) // 0.9减法 console.log(math.multiply(0.7, 0.8)) // 0.56乘法 console.log(math.divide(1, 3)) // 0.33333333333333332. 字符串表达式解析例如console.log(math.evaluate(3 5 * 2 - 8 / 2)) // 9 // 带括号优先级 console.log(math.evaluate((10 2) * (8 - 3) / 4)) // 15 // 支持变量代入 console.log(math.evaluate(2 * x 3 * y, { x: 5, y: 2 })) // 16 // 支持平方、开方混合运算console.log(math.evaluate(sqrt(16) 3^2)) // 133. 取整、绝对值、最值处理console.log(math.abs(-9.8)) // 9.8console.log(math.ceil(3.2)) // 4console.log(math.floor(3.8)) // 3console.log(math.round(3.56, 1)) // 3.6console.log(math.max(12, 5, 28, 9)) // 28console.log(math.min(12, 5, 28, 9)) // 54. 次方、开方、对数运算console.log(math.pow(2, 10)) // 1024console.log(math.square(8)) // 64console.log(math.sqrt(81)) // 9console.log(math.cbrt(27)) // 3console.log(math.log(100, 10)) // 2console.log(math.log(8, 2)) // 35. 内置数学常量内置精准数学常量无需手动定义console.log(math.pi) // 圆周率π console.log(math.e) // 自然常数e console.log(math.phi) // 黄金比例 console.log(math.sqrt2) // 根号2四、进阶常用功能科学计算/数据统计1. 数组批量统计运算日常数据统计、报表计算必备支持数组一键求和、平均值、方差、标准差const arr [12, 25, 18, 30, 22]// 求和、平均值 console.log(math.sum(arr))// console.log(math.mean(arr)) // 21.4// 中位数、众数 console.log(math.median(arr))// console.log(math.mode(arr)) // [12, 25, 18, 30, 22]// 方差、标准差 console.log(math.variance(arr)) // 40.3console.log(math.std(arr)) // 6.3482. 全套三角函数运算支持角度、弧度切换满足图形计算、可视化、GIS场景需求// 三角函数默认弧度 console.log(math.sin(math.pi / 2)) // 1 console.log(math.cos(0)) // 1 console.log(math.tan(math.pi / 4)) // 1 // 角度转换 console.log(math.degrees(math.pi)) // 180 弧度转角度 console.log(math.radians(180)) // 3.141592653589793 角度转弧度3. 分数精准运算金融、分数计算场景保留分数形态const a math.fraction(0.25)const b math.fraction(0.5)const res math.add(a, b) console.log(res) // Fraction { n: 3, d: 4 } console.log(math.format(res)) // 3/4 格式化输出分数4. 矩阵运算高阶数学支持矩阵加减乘、转置、求逆适合机器学习、图形矩阵变换场景// 定义矩阵 const m1 math.matrix([[1, 2], [3, 4]])const m2 math.matrix([[5, 6], [7, 8]])// 矩阵加法 console.log(math.add(m1, m2))// 矩阵转置 console.log(math.transpose(m1))五、前端常用场景1金融高精度计算金额计算解决商品价格、折扣、运费计算精度丢失问题// 商品单价、数量、折扣const price 99.9const count 3const discount 0.8 // 精准计算折后总价const total math.multiply(math.multiply(price, count), discount)console.log(total) // 239.76 精准无误差2动态公式计算器自定义变量实现前端自定义公式、动态传参计算适用于表单计算公式、测评分值/** * 通用公式计算函数 * param {String} formula - 数学公式字符串* param {Object} params - 变量对象* returns {Number} 计算结果*/function calcFormula(formula, params) {return math.evaluate(formula, params)} // 使用总分语文*0.4 数学*0.5 英语*0.1const score calcFormula(chinese*0.4 math*0.5 english*0.1, { chinese: 120, math: 135, english: 110 })console.log(score) // 126.5六、常见问题1. 结果为对象无法直接比较部分运算分数、矩阵返回的是对象不是基础数值需要通过math.number()转换const res math.sqrt(16)console.log(math.number(res)) // 4 转为普通数字2. 表达式变量不存在报错使用evaluate传入未定义变量会报错使用前必须在参数对象中声明所有变量。3. 打包体积过大优化全局引入import math from mathjs体积较大生产环境推荐按需引入大幅减小打包体积。
