当前位置:首页 > 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>

注意事项

js实现统计

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

标签: js
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现计算器

js实现计算器

实现基础计算器功能 使用JavaScript创建一个基础计算器需要处理数字输入、运算符逻辑和结果显示。以下是一个简单的实现示例: let currentInput = '0'; let previo…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现防洪

js实现防洪

防抖(Debounce)实现 防抖的核心思想是在事件触发后延迟执行回调函数,若在延迟时间内再次触发事件,则重新计时。适用于输入框搜索、窗口调整等场景。 function debounce(func,…