array.from 是 javascript 中用于将类数组或可迭代对象转为数组、支持浅拷贝与映射操作的实用方法,语义清晰、兼容性好,但仅支持浅拷贝。

Array.from 是 JavaScript 中一个非常实用的方法,它不仅能将类数组对象或可迭代对象转为真正的数组,还能在转换过程中完成拷贝、映射甚至类型转换,是实现数组快速拷贝与结构化转换的简洁方案。
快速浅拷贝数组
对普通数组做浅层拷贝,Array.from 比 slice() 或展开运算符更显语义清晰,尤其适合需要后续链式操作的场景。
- 写法简洁:Array.from(arr) 直接生成新数组,原数组不受影响
- 兼容性好:支持所有 ES6+ 环境,比展开运算符([...arr])在某些旧版 transpile 配置下更稳定
- 不修改原数组,也不依赖 Array.prototype 方法,适合函数式风格
拷贝同时做映射处理
Array.from 的第二个参数是一个映射函数,可在创建新数组时直接变换每个元素,避免先拷贝再 map 的两步操作。
- 例如将数字数组转为字符串并加前缀:Array.from([1, 2, 3], x => `item-${x}`) → ['item-1', 'item-2', 'item-3']
- 支持访问索引和原数组:Array.from(arr, (val, i, src) => `${i}:${val}`)
- 比 arr.map(...).slice() 更高效,只遍历一次
从类数组或可迭代对象构造新数组
DOM 节点列表、arguments、Set、Map 的键/值等非数组对象,都能用 Array.from 统一转为标准数组,便于使用数组方法。
- 获取所有按钮并绑定事件:Array.from(document.querySelectorAll('button')).forEach(btn => btn.addEventListener(...))
- 去重后转数组:Array.from(new Set([1, 2, 2, 3])) → [1, 2, 3]
- Map 的键转数组:Array.from(myMap.keys())
注意浅拷贝限制与替代方案
Array.from 默认执行浅拷贝,嵌套对象或数组仍共享引用。如需深拷贝,不能仅靠它解决。
- 简单嵌套可组合 JSON 方法(仅限纯数据):JSON.parse(JSON.stringify(arr))
- 复杂结构推荐 structuredClone(现代环境)或专用库如 lodash.cloneDeep
- 若只需拷贝并过滤/筛选,建议配合 filter 使用:Array.from(arr).filter(x => x > 0)
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











