前端 math.js 快速上手入门教程

3.2 高精度运算

// 高精度计算
const preciseResult = math.evaluate('0.1 + 0.2'); // 0.3 (不是 0.30000000000000004)

3.3 常用数学函数

4. 矩阵运算

4.1 创建矩阵

// 创建矩阵
const matrixA = math.matrix([[1, 2], [3, 4]]);
const matrixB = math.matrix([[5, 6], [7, 8]]);

4.2 矩阵运算

// 矩阵加法
const matrixSum = math.add(matrixA, matrixB);
console.log(math.format(matrixSum)); // [[6, 8], [10, 12]]

// 矩阵乘法
const matrixProduct = math.multiply(matrixA, matrixB);
console.log(math.format(matrixProduct)); // [[19, 22], [43, 50]]

4.3 矩阵操作

5. 复数运算

5.1 创建复数

// 创建复数
const complex1 = math.complex(3, 4); // 3 + 4i
const complex2 = math.complex('2 + 5i'); // 2 + 5i

5.2 复数运算

// 复数运算
const complexSum = math.add(complex1, complex2);
console.log(math.format(complexSum)); // 5 + 9i

const complexProduct = math.multiply(complex1, complex2);
console.log(math.format(complexProduct)); // -14 + 23i

5.3 复数属性

6. 表达式解析

6.1 基本表达式解析

// 表达式解析
const result = math.evaluate('sqrt(3^2 + 4^2)');
console.log(result); // 5

// 变量支持
const scope = { x: 2, y: 3 };
const result2 = math.evaluate('x^2 + y^2', scope);
console.log(result2); // 13

6.2 函数定义

// 自定义函数
math.evaluate('f(x) = x^2 + 2*x + 1');
const result3 = math.evaluate('f(3)');
console.log(result3); // 16

6.3 表达式编译

// 表达式编译以提高性能
const expr = math.compile('x^2 + 2*x + 1');
const result4 = expr.evaluate({ x: 3 });
console.log(result4); // 16

7. 绘图与可视化

虽然 math.js 本身不提供绘图功能，但它可以与绘图库（如 Chart.js）结合使用：

// 生成数据点
const xValues = math.range(-10, 10, 0.1).toArray();
const yValues = xValues.map(x => math.evaluate('x^2', { x }));

// 使用 Chart.js 绘制图表
// const ctx = document.getElementById('myChart').getContext('2d');
// new Chart(ctx, {
//   type: 'line',
//   data: {
//     labels: xValues,
//     datasets: [{
//       label: 'y = x^2',
//       data: yValues,
//       borderColor: 'rgb(75, 192, 192)',
//       tension: 0.1
//     }]
//   }
// });

结合 Three.js 等 3D 库可以实现更复杂的可视化：

// 生成 3D 数据点
const data = [];
for (let x = -5; x <= 5; x += 0.5) {
  for (let y = -5; y <= 5; y += 0.5) {
    const z = math.evaluate('sin(sqrt(x^2 + y^2))', { x, y });
    data.push([x, y, z]);
  }
}

8. 单元测试

8.1 测试框架集成

使用 Jest 进行单元测试：

// math.test.js
const math = require('mathjs');

test('addition works correctly', () => {
  expect(math.add(2, 3)).toBe(5);
});

test('matrix multiplication works correctly', () => {
  const A = math.matrix([[1, 2], [3, 4]]);
  const B = math.matrix([[5, 6], [7, 8]]);
  const result = math.multiply(A, B);
  const expected = math.matrix([[19, 22], [43, 50]]);
  expect(math.deepEqual(result, expected)).toBe(true);
});

8.2 边界条件测试

test('division by zero throws error', () => {
  expect(() => math.divide(1, 0)).toThrow();
});

test('sqrt of negative number returns complex', () => {
  const result = math.sqrt(-4);
  expect(result).toBeInstanceOf(math.Complex);
  expect(result.re).toBe(0);
  expect(result.im).toBe(2);
});

9. 常见踩坑与解决方案

9.1 精度问题

问题：以为用了 math.js 就不会有精度问题 解决方案：使用 math.bignumber 进行高精度计算

// 错误做法
const result1 = math.evaluate('0.1 + 0.2'); // 0.30000000000000004

// 正确做法
const result2 = math.add(math.bignumber(0.1), math.bignumber(0.2)); // 0.3

9.2 类型混淆

问题：JavaScript Number 与 math.js 类型混用 解决方案：统一使用 math.js 类型

// 错误做法
const result1 = math.add(0.1, math.bignumber(0.2)); // 类型不匹配

// 正确做法
const result2 = math.add(math.bignumber(0.1), math.bignumber(0.2));

9.3 矩阵索引

问题：忘记 math.js 矩阵索引从 0 开始 解决方案：注意索引范围

// 错误做法
const matrix = math.matrix([[1, 2], [3, 4]]);
const value = matrix.get([1, 1]); // 实际获取的是第 2 行第 2 列

// 正确做法
const value = matrix.get([0, 0]); // 获取第 1 行第 1 列

9.4 表达式作用域

问题：表达式中变量未定义 解决方案：正确传递作用域

// 错误做法
const result = math.evaluate('x + y'); // ReferenceError: x is not defined

// 正确做法
const scope = { x: 1, y: 2 };
const result = math.evaluate('x + y', scope);

9.5 函数覆盖

问题：自定义函数覆盖了内置函数 解决方案：避免使用内置函数名

// 错误做法
math.evaluate('sin(x) = x^2'); // 覆盖了内置 sin 函数

// 正确做法
math.evaluate('mysin(x) = x^2');

9.6 异步操作

问题：在异步操作中使用 math.js 解决方案：确保在正确上下文中使用

// 错误做法
setTimeout(() => {
  const result = math.add(1, 2); // 可能出现上下文问题
}, 1000);

// 正确做法
setTimeout(() => {
  const math = require('mathjs');
  const result = math.add(1, 2);
}, 1000);

9.7 内存泄漏

问题：大量创建 math.js 对象未释放 解决方案：合理管理对象生命周期

// 错误做法
for (let i = 0; i < 1000000; i++) {
  const matrix = math.matrix([...]); // 可能导致内存泄漏
}

// 正确做法
// 使用完后确保对象可以被垃圾回收

9.8 性能问题

问题：频繁使用 math.evaluate 解决方案：使用 math.compile 预编译表达式

// 错误做法
for (let i = 0; i < 10000; i++) {
  const result = math.evaluate('x^2 + 2*x + 1', { x: i }); // 性能差
}

// 正确做法
const expr = math.compile('x^2 + 2*x + 1');
for (let i = 0; i < 10000; i++) {
  const result = expr.evaluate({ x: i }); // 性能好
}

9.9 单位混淆

问题：角度单位混淆（度 vs 弧度） 解决方案：明确指定单位

// 错误做法
const result1 = math.sin(90); // 90 弧度，不是 90 度

// 正确做法
const result2 = math.sin(math.unit(90, 'deg')); // 90 度

9.10 导入方式错误

问题：导入方式不正确导致功能缺失 解决方案：使用正确的导入方式

// 错误做法
import math from 'mathjs'; // 可能导入不完整

// 正确做法
import * as math from 'mathjs'; // 导入所有功能

10. 功能对比表格

11. 算法步骤思路详解

11.1 表达式求值算法

1. 词法分析：将表达式字符串分解为标记（tokens）
2. 语法分析：构建抽象语法树（AST）
3. 语义分析：检查类型和作用域
4. 优化：对 AST 进行优化
5. 执行：遍历 AST 计算结果

// 示例：表达式 '2 + 3 * 4' 的处理过程
// 1. 词法分析：['2', '+', '3', '*', '4']
// 2. 语法分析：AST (加法节点，左子树是 2，右子树是乘法节点)
// 3. 语义分析：检查操作数类型
// 4. 优化：无
// 5. 执行：先计算 3*4=12，再计算 2+12=14

11.2 矩阵乘法算法

1. 维度检查：确保矩阵可以相乘
2. 初始化结果矩阵：创建适当大小的结果矩阵
3. 三重循环计算：
   • 外层循环遍历结果矩阵行
   • 中层循环遍历结果矩阵列
   • 内层循环计算点积
4. 返回结果

// 伪代码示例
function multiplyMatrix(A, B) {
  // 1. 维度检查
  if (A.columns !== B.rows) throw new Error('矩阵维度不匹配');

  // 2. 初始化结果矩阵
  const result = createMatrix(A.rows, B.columns);

  // 3. 三重循环
  for (let i = 0; i < A.rows; i++) {
    for (let j = 0; j < B.columns; j++) {
      let sum = 0;
      for (let k = 0; k < A.columns; k++) {
        sum += A.get([i, k]) * B.get([k, j]);
      }
      result.set([i, j], sum);
    }
  }

  // 4. 返回结果
  return result;
}

11.3 数值积分算法（梯形法则）

1. 区间分割：将积分区间 [a,b] 分割为 n 个子区间
2. 计算节点值：在每个节点处计算函数值
3. 应用梯形公式：对每个子区间应用梯形公式
4. 求和：将所有子区间的积分值相加

// 梯形法则实现
function trapezoidalRule(func, a, b, n) {
  const h = (b - a) / n; // 步长
  let sum = (func(a) + func(b)) / 2; // 端点值
  for (let i = 1; i < n; i++) {
    sum += func(a + i * h); // 中间点值
  }
  return sum * h; // 乘以步长
}

12. 总结与最佳实践

12.1 核心要点回顾

1. 精度优先：始终使用 math.js 的高精度计算功能
2. 类型一致：避免混用 JavaScript 原生类型和 math.js 类型
3. 性能优化：对于重复计算，使用 math.compile 预编译表达式
4. 错误处理：妥善处理边界条件和异常情况
5. 单元测试：为数学计算编写充分的测试用例

12.2 最佳实践清单

12.3 未来学习方向

1. 深入学习线性代数：掌握更高级的矩阵运算
2. 数值分析：了解数值计算的稳定性和收敛性
3. 符号计算：探索 math.js 的符号计算功能
4. 性能调优：学习如何优化大规模数学计算
5. 可视化应用：结合图形库创建数学可视化应用