js中Array.from的用法-js教程-PHP中文网

js中Array.from的用法

舞夢輝影

发布： 2025-11-17 14:49:16

原创

540人浏览过

Array.from 可将类数组或可迭代对象转为数组，支持映射函数和指定长度初始化，适用于 arguments、NodeList、字符串等场景，且兼容不可迭代的类数组对象，功能较扩展运算符更强大。

js中array.from的用法

Array.from 是 JavaScript 中用于将类数组对象或可迭代对象转换为真正数组的方法。它也可以用来创建指定长度的数组，并支持通过映射函数处理每个元素。

Array.from(arrayLike, mapFn, thisArg)

常见的类数组对象是函数中的 arguments 或 DOM 中的 NodeList。

function example() { return Array.from(arguments); } example(1, 2, 3); // [1, 2, 3]

// 获取所有 div 元素并转为数组 const divs = Array.from(document.querySelectorAll('div'));

字符串是可迭代对象，Array.from 可将其拆分为字符数组。

Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']

结合 length 属性，可以生成固定长度的空数组，并配合 mapFn 初始化值。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

// 创建长度为 5 的数组，每一项是索引的平方 Array.from({ length: 5 }, (v, i) => i * i); // [0, 1, 4, 9, 16]

// 创建 [1, 2, 3, 4, 5] Array.from({ length: 5 }, (v, i) => i + 1);

扩展运算符（...）也能将可迭代对象转为数组，但只适用于可迭代对象。Array.from 更强大，能处理类数组对象（即使不可迭代）。

// NodeList 在某些环境中不可用扩展运算符 Array.from(document.querySelectorAll('div')); // 安全 [...document.querySelectorAll('div')]; // 通常也可行，但依赖 Symbol.iterator

对于类数组但不可迭代的对象，只有 Array.from 能处理。

基本上就这些。Array.from 简洁且功能强，适合数据转换和初始化数组场景。

以上就是js中Array.from的用法的详细内容，更多请关注php中文网其它相关文章！

大家都在看：