前端开发必备：JavaScript工具函数分类与reduce方法详解

1. 前端工具函数的重要性与分类

在日常前端开发中，工具函数就像瑞士军刀一样不可或缺。它们能帮我们避免重复造轮子，提高代码复用率，让开发效率成倍提升。根据我的经验，前端工具函数大致可以分为以下几类：

• 数据处理类：数组/对象操作、数据类型判断、数据格式化等
• DOM操作类：元素查找、样式操作、事件处理等
• 字符串处理类：正则校验、截取替换、编码解码等
• 数学计算类：精度处理、随机数生成、数值转换等
• 浏览器相关：Cookie操作、存储处理、UA判断等

今天我们就重点探讨数据处理和数学计算这两个类别中的几个高频使用工具函数。

2. 数组处理的利器：reduce方法详解

2.1 reduce的基本用法

reduce是JavaScript数组最强大的方法之一，但很多开发者对它望而生畏。其实它的核心逻辑很简单：把数组缩减为单个值。基本语法如下：

javascript复制array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

一个经典用例是数组求和：

javascript复制const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 10

提示：始终提供初始值是个好习惯，可以避免空数组报错和类型意外转换的问题。

2.2 高级应用场景

2.2.1 数组转对象

处理API响应时，经常需要把数组转为以ID为key的对象：

javascript复制const users = [
  {id: 1, name: 'Alice'},
  {id: 2, name: 'Bob'}
];

const userMap = users.reduce((obj, user) => {
  obj[user.id] = user;
  return obj;
}, {});

// 结果: {1: {id: 1, name: 'Alice'}, 2: {id: 2, name: 'Bob'}}

2.2.2 复合数据统计

统计商品分类和子分类的数量：

javascript复制const products = [
  {category: '电子', subCategory: '手机'},
  {category: '电子', subCategory: '电脑'},
  {category: '服装', subCategory: '男装'}
];

const stats = products.reduce((result, product) => {
  // 初始化分类
  if(!result[product.category]) {
    result[product.category] = {total: 0, subCategories: {}};
  }
  
  // 初始化子分类
  if(!result[product.category].subCategories[product.subCategory]) {
    result[product.category].subCategories[product.subCategory] = 0;
  }
  
  // 计数
  result[product.category].t