当前位置:首页 > JavaScript

js实现统计

2026-02-01 14:33:36JavaScript

使用 JavaScript 实现基础统计计算

计算平均值
通过数组的 reduce 方法求和后除以元素数量:

const data = [1, 2, 3, 4, 5];
const mean = data.reduce((sum, val) => sum + val, 0) / data.length;
console.log(mean); // 输出 3

计算中位数
排序后取中间值(或中间两值的平均):

const sorted = [...data].sort((a, b) => a - b);
const mid = Math.floor(sorted.length / 2);
const median = sorted.length % 2 !== 0 
  ? sorted[mid] 
  : (sorted[mid - 1] + sorted[mid]) / 2;
console.log(median); // 输出 3

计算标准差
先求平均值,再计算方差后开平方:

const squaredDiffs = data.map(val => Math.pow(val - mean, 2));
const variance = squaredDiffs.reduce((sum, val) => sum + val, 0) / data.length;
const stdDev = Math.sqrt(variance);
console.log(stdDev); // 输出 1.4142

使用现成统计库(简化开发)

引入 simple-statistics
安装后直接调用统计函数:

js实现统计

npm install simple-statistics
const ss = require('simple-statistics');
console.log(ss.mean(data)); // 平均值
console.log(ss.median(data)); // 中位数

使用 mathjs 进行复杂运算
支持矩阵运算和高级统计:

const math = require('mathjs');
console.log(math.std(data)); // 标准差

数据分组统计实现

按条件分组计数
使用 reduce 实现分类统计:

js实现统计

const categories = ['A', 'B', 'A', 'C', 'B'];
const count = categories.reduce((acc, val) => {
  acc[val] = (acc[val] || 0) + 1;
  return acc;
}, {});
console.log(count); // 输出 { A: 2, B: 2, C: 1 }

计算分位数
使用排序后的百分比位置取值:

const percentile = (arr, p) => {
  const sorted = [...arr].sort((a, b) => a - b);
  const index = p * (sorted.length - 1);
  return sorted[Math.floor(index)];
};
console.log(percentile(data, 0.25)); // 输出第25百分位数

可视化统计结果

结合 Chart.js 展示
将统计结果以图表形式呈现:

<canvas id="chart"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
  new Chart(document.getElementById('chart'), {
    type: 'bar',
    data: {
      labels: ['均值', '中位数', '标准差'],
      datasets: [{
        data: [mean, median, stdDev]
      }]
    }
  });
</script>

注意事项

  • 处理空数组时需添加防御性判断
  • 大数据量考虑使用 Web Worker 避免阻塞
  • 浮点数计算注意精度问题(如使用 toFixed()

标签: js
分享给朋友:

相关文章

js实现验证码

js实现验证码

使用Canvas生成图形验证码 在HTML中创建一个Canvas元素用于绘制验证码。通过JavaScript随机生成数字或字母组合,并添加干扰线、噪点等干扰元素增强安全性。 <canvas i…

js类实现

js类实现

使用类实现 JavaScript 功能 在 JavaScript 中,类(Class)是一种语法糖,基于原型继承机制。通过 class 关键字可以更直观地定义对象模板。 基本类定义 class…

使用js实现

使用js实现

使用JavaScript实现 JavaScript可以通过Math.random()函数生成随机数,结合其他方法可以实现多种随机数生成需求。 // 生成0到1之间的随机小数 const random…

js画图实现

js画图实现

使用Canvas API绘制图形 Canvas是HTML5提供的绘图API,通过JavaScript操作Canvas元素可以绘制各种图形。以下是一个简单的示例: <canvas id="myC…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数:…

js实现代码雨

js实现代码雨

实现代码雨效果 使用HTML5 Canvas和JavaScript可以轻松实现经典的代码雨效果。以下是完整的实现代码和说明: HTML结构 <!DOCTYPE html> <…