JavaScript 中数组 API 怎么将类数组对象转换成真实数组-js教程-PHP中文网

最推荐用 array.from()，它专为转换类数组设计，语义清晰、兼容性好，支持映射和过滤；展开运算符[...]简洁但要求可迭代；slice.call()兼容最好但写法冗长；array.apply()因栈溢出等问题已被淘汰。

javascript 中数组 api 怎么将类数组对象转换成真实数组

最常用、最推荐的方式是用 Array.from()，它专为这类转换设计，语义清晰、兼容性好（ES6+），还能顺便处理映射和过滤。

用 Array.from() 转换（推荐）

它能识别类数组对象（有 length 属性、索引为数字键），自动提取 0 到 length-1 的元素：

普通类数组：如 arguments、NodeList、HTMLCollection
支持映射回调：第二个参数可传函数，对每个元素做处理再放入新数组
可选的 this 值：第三个参数指定回调中的 this（较少用）

示例：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

function demo() {
  const arr = Array.from(arguments); // [1, 2, 3]
  return arr;
}
demo(1, 2, 3);

// NodeList 转数组并转成大写
const lis = document.querySelectorAll('li');
const texts = Array.from(lis, el => el.textContent.toUpperCase());

用展开运算符 [...]

简洁直观，但要求类数组对象是可迭代的（即具有 [Symbol.iterator]）。多数 DOM 类数组（如 NodeList）满足，但 arguments 在旧引擎中可能不支持（ES2015+ 环境基本没问题）：

写法短：[...类数组]
不能直接处理非可迭代类数组（如老版本 arguments 或自定义无 Symbol.iterator 的对象）
无法在展开时做映射，需配合 .map() 等链式调用

示例：

const divs = document.getElementsByTagName('div'); // HTMLCollection
const divArray = [...divs]; // ✅ 多数现代环境可用

function f() {
  return [...arguments]; // ✅ ES2015+ 支持
}

用 Array.prototype.slice.call()

ES5 时代的经典写法，兼容性最好（IE6+ 都行），原理是借用数组的 slice 方法并绑定类数组的 this：

适用于所有符合类数组结构的对象（哪怕没有 Symbol.iterator）
写法略冗长，语义不如 Array.from 直观
不能直接映射，需额外调用 .map()

示例：

function oldStyle() {
  const args = Array.prototype.slice.call(arguments);
  return args;
}

// 也可简写为：
const slice = Array.prototype.slice;
const arr = slice.call(arguments);