array.from()是es6提供的静态方法,用于将类数组对象(如arguments、nodelist)和可迭代对象(如string、set、map)转换为真正的数组,支持映射函数和this绑定,语法更清晰且兼容性更好。

Array.from() 是 ES6 提供的静态方法,专门用于将类数组对象(如 arguments、NodeList)和可迭代对象(如 Set、Map、String、自定义迭代器)转换为真正的 Array 实例。它比传统写法(如 [...obj] 或 Array.prototype.slice.call(obj))更语义清晰、兼容性更好,且支持映射处理。
转换类数组对象
类数组对象拥有 length 属性和按数字索引存储的元素,但没有数组原型方法(如 map、filter)。常见例子包括函数内的 arguments、DOM 查询结果 document.querySelectorAll() 返回的 NodeList。
- 直接传入类数组对象即可生成新数组:
const args = Array.from(arguments);(在函数内) -
const divs = Array.from(document.querySelectorAll('div'));
这样得到的就是真数组,能直接调用.forEach()、.map()等方法 - 注意:普通对象(如
{0: 'a', 1: 'b', length: 2})只要满足“有 length + 数字键”,也能被正确转换
转换可迭代对象
任何实现了 [Symbol.iterator] 接口的对象都属于可迭代对象。Array.from() 会自动调用其迭代器获取值。
Java JDK 25 来自 OpenJDK 官方归档,版本为 JDK 25,本条下载地址已指向官方 Windows x64 zip 安装包直链,适合调试旧项目或兼容旧版 Java 运行环境。
-
Array.from('hello')→['h', 'e', 'l', 'l', 'o'] -
Array.from(new Set([1, 2, 2, 3]))→[1, 2, 3] -
Array.from(new Map([['a', 1], ['b', 2]]))→[['a', 1], ['b', 2]](转为二维数组) - 自定义可迭代对象也适用,只要返回符合迭代协议的对象(含
next()方法)
带映射函数的转换(第二个参数)
Array.from() 支持传入一个映射函数作为第二个参数,类似 Array.prototype.map(),在构造新数组时对每个元素做处理,避免额外调用 .map()。
-
Array.from('abc', x => x.toUpperCase())→['A', 'B', 'C'] -
Array.from({length: 3}, (_, i) => i * 2)→[0, 2, 4](生成指定长度的数组并填充计算值) - 第二个参数中的回调接收三个参数:
item、index、array,与map一致
与展开运算符的区别
[...iterable] 功能类似,但有几点不同:
-
Array.from()可以处理类数组对象([...arguments]在非箭头函数中可用,但某些环境或严格模式下可能受限) -
Array.from()支持映射函数,展开运算符需链式调用.map() -
Array.from()第一个参数为null或undefined时抛错;展开运算符对不可迭代值会报TypeError - 两者都不修改原对象,都创建新数组
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










