Array.prototype.slice高性能用法解析

`Array.prototype.slice.call()` 是一种零依赖、高性能且兼容 IE6+ 的类数组转真数组技巧，它不校验调用对象是否为 Array 实例，仅需满足拥有 `length` 属性和数字索引属性两个条件，即可安全、高效地将 `arguments`、`NodeList`、`HTMLCollection` 等类数组对象转换为可直接使用数组方法的真数组；相比 `Array.from()` 和展开运算符，它无需 polyfill、不依赖迭代器、无额外类型检查开销，且在各大浏览器中均被深度优化，是兼顾兼容性、性能与简洁性的经典解决方案。

直接用 Array.prototype.slice.call(arrayLike) 即可将类数组对象（如 arguments、NodeList、HTMLCollection）转为真数组，无需引入任何外部库，性能接近原生循环，且兼容性极佳（IE6+ 支持）。

为什么 slice 能“零依赖”转换类数组？

slice 方法本身不校验调用者是否为 Array 实例，只依赖两个关键条件：存在 length 属性 和 拥有按数字索引排列的可读属性。只要类数组满足这两点（例如 {0: 'a', 1: 'b', length: 2}），slice 就能按索引逐个读取并装入新数组。

它不修改原对象，也不依赖 Symbol.iterator 或 Array.from 的 polyfill，因此真正“零依赖”。

最简写法与常见调用方式

推荐以下三种稳定写法（按优先级排序）：

• Array.prototype.slice.call(obj) —— 兼容性最好，适用于所有 ES3+ 环境
• [].slice.call(obj) —— 更短，本质相同，但需注意空数组字面量在严格模式下无副作用
• Array.prototype.slice.apply(obj) —— 等价，但不如 call 直观，一般不推荐

示例：

function foo() {
  const args = Array.prototype.slice.call(arguments); // → ['a', 'b', 'c']
  return args.map(x => x + '!'); 
}
foo('a', 'b', 'c');

对比现代替代方案的取舍

虽然 Array.from() 和展开运算符（[...obj]）更语义化，但有明确限制：

• Array.from 需要 polyfill 才能在 IE 中运行，且内部做了额外类型检查和映射逻辑，开销略高
• 展开运算符要求对象具有 Symbol.iterator，而原生 NodeList（尤其旧版 DOM）可能不实现迭代器，导致报错
• slice.call 在 Chrome/Firefox/Edge/IE 中均被高度优化，V8 甚至对常见类数组（如 arguments）做了内联快路径

注意事项与边界情况

不是所有“像数组”的对象都适用：

• 必须有 length，且为非负整数；若 length === 0 或 undefined，结果为空数组或 TypeError
• 索引属性必须是字符串化的自然数（'0'、'1'），'-1' 或 '01' 不会被识别
• 稀疏类数组（如 {0: 'a', 2: 'c', length: 3}）会生成 ['a', undefined, 'c']，符合预期
• 避免对超大类数组（如百万级 getElementsByClassName 结果）频繁调用，可考虑分片或流式处理

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。