JavaScript 数组怎么通过 `Array.from` 将类数组对象转为真数组-js教程-PHP中文网

array.from 是将类数组对象（如 arguments、nodelist、字符串等）转换为真数组的推荐方法，支持映射函数，语义清晰且兼容性好。

javascript 数组怎么通过 `array.from` 将类数组对象转为真数组

Array.from 是 JavaScript 中将类数组对象（如 arguments、NodeList、字符串等）转换为真正数组的最直接、推荐的方式之一。

什么是类数组对象？

类数组对象是指具有 length 属性和若干索引属性（如 0、1），但**没有数组原型方法**（如 push、map、forEach）的对象。常见例子：

函数内部的 arguments
document.querySelectorAll('div') 返回的 NodeList
'hello' 字符串（每个字符可按索引访问）
手动创建的 {0: 'a', 1: 'b', length: 2}

基本用法：Array.from(类数组)

只需把类数组对象传给 Array.from，它会自动读取 length 和索引属性，生成新数组：

// 示例1：arguments
function demo() {
  const arr = Array.from(arguments);
  return arr.map(x => x * 2); // ✅ 可以用 map
}
demo(1, 2, 3); // [2, 4, 6]
<p>// 示例2：NodeList
const divs = document.querySelectorAll('div');
const divArray = Array.from(divs); // ✅ 真数组，可调用 forEach、filter 等
divArray.forEach(el => el.classList.add('processed'));</p><p>// 示例3：字符串
Array.from('abc'); // ['a', 'b', 'c']
</p>

进阶用法：映射 + 转换

Array.from 支持第二个参数——一个映射函数，相当于在转换的同时执行 map：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

// 一步完成：转数组 + 处理每个元素
const numbers = Array.from('123', x => Number(x)); // [1, 2, 3]
const squares = Array.from({length: 4}, (_, i) => i * i); // [0, 1, 4, 9]
<p>// 对 NodeList 提取文本内容
const texts = Array.from(document.querySelectorAll('p'), p => p.textContent);
</p>

注意：第二个参数是 mapFn，第一个参数是当前项，第二个是索引（可省略），第三个是原类数组对象（极少用）。