JavaScript 数组方法深度解析：从链式调用到性能权衡

数组方法是 JavaScript 日常开发中使用频率最高的 API 之一。但大多数开发者停留在”能用”的层面，对背后的性能特征和函数式设计模式理解不深。

链式调用的隐藏成本

链式调用（.filter().map().sort()）确实优雅，但每次中间操作都会创建一个新数组：

// 链式调用：创建 3 个中间数组
const result = users
  .filter(u => u.active)       // 中间数组 1
  .map(u => ({ name: u.name })) // 中间数组 2
  .sort((a, b) => a.name.localeCompare(b.name)); // 中间数组 3

// 对于几百条数据，这完全不是问题。对于十万条数据，GC 压力就开始显现了。

对于大数据集，reduce 可以一次遍历完成多个操作：

const result = users.reduce((acc, u) => {
  if (u.active) {
    acc.push({ name: u.name });
  }
  return acc;
}, []).sort((a, b) => a.name.localeCompare(b.name));

但不要过早优化。大部分场景下，数据量在几百到几千条，链式调用的可读性优势远大于微小的性能差异。只有在 profiler 明确显示数组操作是瓶颈时才考虑合并。

reduce 的合理使用边界

reduce 是最强大也最容易被滥用的数组方法。判断标准：

// ✅ reduce 的合理场景：需要同时遍历和聚合
const grouped = users.reduce((acc, u) => {
  (acc[u.role] ||= []).push(u);
  return acc;
}, {});

// ❌ 滥用：用 reduce 代替 map
const names = users.reduce((acc, u) => {
  acc.push(u.name);
  return acc;
}, []); // 应该用 users.map(u => u.name)

// ❌ 滥用：用 reduce 代替 filter
const active = users.reduce((acc, u) => {
  if (u.active) acc.push(u);
  return acc;
}, []); // 应该用 users.filter(u => u.active)

原则：如果 map、filter 或 find 能直接表达意图，就不要用 reduce。 代码被阅读的次数远多于被编写的次数，可读性优先于简洁性。

不可变操作与性能

在 React 等框架中，不可变更新是常态。但创建新数组有成本：

// 不可变添加：创建新数组
const newUsers = [...users, newUser];

// 不可变更新：找到并替换
const updated = users.map(u => u.id === targetId ? { ...u, active: true } : u);

// 不可变删除：
const filtered = users.filter(u => u.id !== targetId);

对于小型数组（< 1000 项），这些操作的开销可以忽略。对于大型列表，考虑使用 Immer 或数据结构库（如 immutable.js）来优化。

几个容易被忽略的方法

Array.from() 的第二个参数

Array.from() 接受一个 map 函数作为第二个参数，比 Array.from().map() 少一次遍历：

// 生成 1-100 的数组
const nums = Array.from({ length: 100 }, (_, i) => i + 1);

// 将 NodeList 转为数组并同时提取属性
const hrefs = Array.from(document.querySelectorAll('a'), el => el.href);

at() 支持负索引

at() 方法让负索引访问变得直观，不需要 arr[arr.length - 1] 这种写法：

const last = users.at(-1);   // 最后一项
const secondLast = users.at(-2); // 倒数第二项

Object.groupBy() 分组

ES2024 引入了原生的 Object.groupBy()，不再需要手写 reduce 分组：

const byRole = Object.groupBy(users, u => u.role);
// { admin: [...], user: [...], guest: [...] }

数组方法是声明式编程在 JavaScript 中的最佳体现。掌握它们不是为了炫技，而是为了用更少的代码表达更清晰的意图——这本身就是代码质量的提升。