如何用现代JavaScript语法替代Array.prototype.slice.call(arguments)这种传统写法

ES5时代的Array.prototype.slice.call(arguments)已成为历史，现代JS开发应优先采用语义清晰、性能更优的剩余参数语法...args。

在ES5时代，开发者常用Array.prototype.slice.call(arguments)处理函数参数，如今这种写法已经过时。判断其是否属于老旧代码，主要观察三个特征：是否在传统函数中手动转换arguments、是否使用.call()借用方法、以及是否完全未使用ES6+语法特性。若发现此类代码，通常意味着需要进行现代化改造。

一眼识别老旧写法的特征

这种传统写法通常具备以下特点：

1. 函数起始处存在const args = Array.prototype.slice.call(arguments)或[].slice.call(arguments)
2. 使用function声明而非箭头函数，且内部依赖arguments对象
3. 代码中未出现...、Array.from、for...of等现代语法特性
4. 项目已支持ES2015+规范，但仍保留这种兼容老旧浏览器的写法

最直接的现代替代：剩余参数（...args）

剩余参数语法是目前最推荐、性能最优的替代方案，它能直接生成真正的数组对象。

1. 将function sum() { const args = Array.prototype.slice.call(arguments); ... }
2. 改写为function sum(...args) { /* args可直接使用 */ }
3. 箭头函数同样适用：const sum = (...args) => args.reduce((a, b) => a + b, 0);

其他合理替代方案（按优先级）

当无法直接修改参数签名时（如封装现有函数或处理非arguments的类数组对象），可考虑以下方案：

1. Array.from(arrayLike)：安全性高、语义明确，能处理length: undefined等特殊情况，支持NodeList、HTMLCollection甚至Map/Set的键值转换
2. [...arrayLike]：语法简洁，但要求对象实现Symbol.iterator；注意旧版DOM中部分HTMLCollection不可迭代可能报错
3. 扩展运算符结合数组字面量：如[...document.querySelectorAll('div')]，相比Array.from()更加轻量，适合日常DOM操作场景

为什么不该再用 slice.call？

这种写法虽非错误，但已不合时宜：

1. 仅适用于具有length属性和数字索引的类数组对象，无法处理真正的可迭代对象（如Set）
2. 当arguments.length为NaN时会静默返回空数组，行为不可预测
3. 在箭头函数中完全失效（不存在arguments对象）
4. 现代引擎已对...和Array.from进行深度优化，性能差异可忽略不计

升级老旧写法不仅能提升代码可读性，还能避免潜在兼容性问题，是每个现代JS开发者的必备技能。