当前位置:首页 > 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
安装后直接调用统计函数:

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 实现分类统计:

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实现轮播图

js实现轮播图

轮播图实现方法 基础HTML结构 <div class="slider"> <div class="slides"> <img src="image1.jpg…

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

js实现验证码

js实现验证码

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

js实现全屏

js实现全屏

实现全屏的基本方法 使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API,但不同浏览器可能需要添加前缀。 // 触发全屏…

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm…