JavaScript 数组方法在 MDN 文档中的标准用法示例

设想这样一个常见场景：在一个电商列表组件中，需要将传入的购物车商品按照价格从低到高排序，并过滤出有库存的条目。如果直接调用 cart.sort((a, b) => a.price - b.price).filter(item => item.inStock)，代码往往在短期内能正常显示，却会在后续引发偶发性 Bug——原本传入的 cart 数据已被隐蔽篡改，导致其他依赖该数组原始顺序的组件渲染紊乱。这一问题的本质，是开发者未清晰区分 JavaScript 数组方法的原地修改（Mutating）与非变异副本返回（Non-mutating）特性。

Mozilla 开发者网络（MDN Web Docs）作为 JavaScript 事实上的标准文档参考，对每一个数组方法的原型签名、参数含义、返回值以及 ECMAScript 规范边界做出了严谨定义。本文紧扣 MDN 文档规范，系统梳理数组方法的标准语法解读方式、各类方法的规范用法、现代 ECMAScript 副本升级方法以及工程落地中的核心注意事项。

一、如何精准解读 MDN 数组方法的规范语法签名

打开 MDN 文档的任一数组方法页面（如 Array.prototype.map() 或 Array.prototype.slice()），首先映入眼帘的是其形式化的语法签名。掌握阅读这些签名的规则，是正确调用方法的第一步：

• 方括号 [ , ] 表示可选参数：例如 arr.slice([start[, end]]) 表示 start 和 end 均为可选参数；而 arr.reduce(callbackFn[, initialValue]) 说明 initialValue 虽可省略，但在绝大多数场景下应当明确传入。
• 回调函数签名 callbackFn(element, index, array)：MDN 规范中绝大部分迭代方法（如 forEach、map、filter、some、every）均向回调函数依次注入三个参数：当前处理项 element、当前索引 index 和被调用的原始数组 array。
• 执行上下文 thisArg：在语法签名的末尾经常能看到 callbackFn, thisArg，用于在回调函数内部显式绑定 this 的指向。在现代 ES6 普及后，通常优先推荐词法作用域更明确的箭头函数，而非传递 thisArg。

二、原地修改（Mutating）方法的标准用法与副作用控制

所谓原地修改方法，是指在执行时直接修改原数组内存中的元素排列或长度，而不是创建新数组。MDN 明确记录的原地变异方法包括：push、pop、shift、unshift、splice、sort、reverse、fill、copyWithin。

1. Array.prototype.splice() 的标准用法

splice() 是 JavaScript 中功能最丰富也最容易用错的原地修改方法。MDN 定义的标准签名如下：

splice(start, deleteCount, item1, item2, /* …, */ itemN)

它从 start 索引开始，删除 deleteCount 个元素，并在该位置插入后续指定的项目。返回值是被删除的元素组成的新数组（若未删除则返回空数组），而调用它的原数组已被就地修改：

// 示例：移除特定条目并在原处插入新条目
const inventory = ["apple", "banana", "cherry", "date"];

// 从索引 1 开始删除 2 个元素（"banana", "cherry"），并插入 "blueberry"
const removed = inventory.splice(1, 2, "blueberry");

console.log(removed);   // 示例输出: ["banana", "cherry"]
console.log(inventory); // 示例输出: ["apple", "blueberry", "date"]（原数组改变）

2. Array.prototype.sort() 的关键避坑点

MDN 文档在 sort() 的描述中给出了极其关键的提示：默认排序是将元素转换为字符串后，比较其 UTF-16 码元值。因此对数字数组调用无参 sort() 会发生 [1, 10, 2] 的荒谬排序结果。标准用法必须明确传递比较函数：

const scores = [100, 25, 5, 80, 1];

// 错误示范：scores.sort() 会得到 [1, 100, 25, 5, 80]
// 标准 MDN 用法：提供确定性的升序比较器
scores.sort((a, b) => a - b);

console.log(scores); // 示例输出: [1, 5, 25, 80, 100]

三、非变异迭代与函数式数据流的标准用法

现代前端开发中，数据流推崇纯函数（Pure Function）。MDN 文档中收录的高阶迭代方法不修改调用它的原数组，而是返回计算结果或全新数组。

1. Array.prototype.map() 与 Array.prototype.filter()

map() 生成一个与原数组长度严格一致的新数组，每个位置为对应回调函数的返回值；filter() 则依据回调返回的布尔真假值决定是否保留元素：

const users = [
  { id: 101, name: "Alice", active: true },
  { id: 102, name: "Bob", active: false },
  { id: 103, name: "Charlie", active: true }
];

// 提取活跃用户的姓名列表
const activeUserNames = users
  .filter(user => user.active)
  .map(user => user.name);

console.log(activeUserNames); // 示例输出: ["Alice", "Charlie"]
console.log(users.length);     // 示例输出: 3（原数组毫发无损）

2. Array.prototype.reduce() 的标准规范要求

MDN 文档对于 reduce() 给出了强烈的规范指引：永远显式传入 initialValue。语法签名如下：

reduce(callbackFn, initialValue)

如果未提供 initialValue，reduce() 会将数组索引 0 的元素作为初始累加器，并从索引 1 开始遍历。一旦遇到空数组且未提供初始值，运行时会直接抛出 TypeError: Reduce of empty array with no initial value。因此，标准用法必须显式提供初始类型：

// 场景：按分类统计商品总价值
const cartItems = [
  { category: "book", price: 35 },
  { category: "food", price: 15 },
  { category: "book", price: 42 }
];

// 标准示范：初始累加器对象 {} 必须显式声明
const categoryTotal = cartItems.reduce((acc, item) => {
  acc[item.category] = (acc[item.category] || 0) + item.price;
  return acc;
}, {});

console.log(categoryTotal); // 示例输出: { book: 77, food: 15 }

四、现代 ECMAScript (ES2023) 新增的“副本变更”方法

长期以来，由于 sort()、reverse() 和 splice() 的原地变异特性，开发者必须先手动进行浅拷贝（例如 [...arr].sort(...)）。为了彻底解决该语法痛点，ECMAScript 2023 引入并由 MDN 完整收录了一组“Change Array by Copy”的标准方法：

传统原地修改方法	ES2023 现代对应方法	返回值特性与内存影响
arr.sort(compareFn)	arr.toSorted(compareFn)	返回已排序的新数组，原数组保持原样
arr.reverse()	arr.toReversed()	返回已逆序的新数组，原数组保持原样
arr.splice(start, count, ...items)	arr.toSpliced(start, count, ...items)	返回替换/删除后的新数组，原数组保持原样
arr[index] = value（直接赋值修改）	arr.with(index, value)	返回特定索引被替换后的新数组，原数组保持原样

现代不可变方法的标准使用范例：

const original = ["Vue", "React", "Angular"];

// 1. 无损排序
const sorted = original.toSorted();
console.log(sorted);   // 示例输出: ["Angular", "React", "Vue"]
console.log(original); // 示例输出: ["Vue", "React", "Angular"]（原数组未变）

// 2. 无损单项更新
const updated = original.with(1, "SolidJS");
console.log(updated);  // 示例输出: ["Vue", "SolidJS", "Angular"]
console.log(original); // 示例输出: ["Vue", "React", "Angular"]（完全安全）

五、MDN 文档提示的特殊边界：稀疏数组与类数组处理

在阅读 MDN 文档时，有两个经常在高级使用中引发意料之外行为的特殊机制：

1. 稀疏数组（Sparse Arrays）的空槽表现

使用 new Array(3) 或 [1, , 3] 创建的数组包含空槽（Empty Slots），空槽不同于包含值 undefined 的索引位：

• 迭代跳过空槽：forEach()、map()、filter() 等方法在执行时会直接跳过未分配内存的空槽，回调函数根本不会被触发。
• 全项读取空槽：includes()、find()、entries() 等方法则会将空槽视作 undefined 进行处理。

2. 类数组对象（Array-like Objects）的标准转换

DOM 查询返回的 NodeList 或函数的 arguments 对象并非真正的 Array 实例，不能直接调用 map 或 filter。MDN 推荐的标准做法是使用 Array.from() 进行转换：

// 标准做法：将类数组转换为标准 Array 实例
const domElements = document.querySelectorAll(".item");
const activeElements = Array.from(domElements).filter(el => el.classList.contains("active"));

六、数组方法选型全景与查阅决策

面对业务需求，如何快速在 MDN 文档中定位最恰当的数组方法？可以通过以下决策全景图进行路径判断：