JS伪数组转真数组，Array.from使用教程

本文深入解析了 JavaScript 中将伪数组（如 arguments、NodeList、HTMLCollection 等具有 length 和数字索引但缺乏数组方法的对象）高效、安全转换为真数组的核心方案——Array.from() 方法，不仅强调其语法简洁、语义清晰、天然支持映射操作和迭代器，还对比了兼容性处理与传统替代方案（如 slice.call 和扩展运算符），帮助开发者在现代与兼容性需求间做出明智选择。

Array.from() 是 JavaScript 中将伪数组（类数组对象）转换为真数组最简洁、推荐的方式之一。它不仅能处理常见的伪数组（如 arguments、NodeList、HTMLCollection），还能对元素进行映射处理，且天然支持箭头函数和迭代器。

什么是伪数组？

伪数组是指具有 length 属性 和 数字索引，但**没有数组原型方法**（如 push、map、filter）的对象。常见例子包括：

• arguments 对象（函数内部）
• document.querySelectorAll('div') 返回的 NodeList（现代浏览器中部分是可迭代的，但旧环境仍需转换）
• document.getElementsByTagName('p') 返回的 HTMLCollection
• 手动创建的 {0: 'a', 1: 'b', length: 2} 对象

Array.from() 的基本用法

语法：Array.from(arrayLike, mapFn?, thisArg?)

只需传入伪数组对象，就能返回一个全新的真数组：

function example() {
  const arr = Array.from(arguments);
  return arr.map(x => x * 2);
}
example(1, 2, 3); // [2, 4, 6]

注意：即使 arguments 是函数内部的局部伪数组，Array.from(arguments) 也能安全转换，无需额外判断。

带映射的一步转换

第二个参数可以传入映射函数，在转换同时处理每个元素，省去后续调用 .map()：

// 获取所有按钮文字，并转为大写
const buttons = document.querySelectorAll('button');
const texts = Array.from(buttons, btn => btn.textContent.toUpperCase());
// ['SUBMIT', 'CANCEL', 'RESET']

这比 Array.from(buttons).map(...) 更高效，也更语义清晰。

兼容性与替代方案（简要说明）

Array.from() 在 ES6+ 环境中可用（Chrome 45+、Firefox 32+、Safari 9+、Edge 12+）。若需兼容老版本 IE（如 IE11 及以下），可：

• 使用 Array.prototype.slice.call(伪数组)（最常用传统方式）
• 使用扩展运算符：[...伪数组]（更现代，但要求伪数组是可迭代的；NodeList 在较新浏览器中默认可迭代，HTMLCollection 则不行）
• 引入 polyfill（如 core-js）

日常开发中，优先用 Array.from() —— 它语义明确、兼容主流环境、支持映射、且能正确处理空位（如稀疏数组）。

好了，本文到此结束，带大家了解了《JS伪数组转真数组，Array.from使用教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！