JavaScript 中利用 Array.from 进行多维数组的扁平化操作-js教程-PHP中文网

array.from本身不直接支持多维数组扁平化，但可配合flat、扩展运算符或递归实现灵活扁平化，尤其适合需自定义转换或兼容旧环境的场景。

javascript 中利用 array.from 进行多维数组的扁平化操作

Array.from 本身不直接支持多维数组扁平化，但它可以配合其他方法（如递归、扩展运算符或 flat）实现灵活的扁平化逻辑，尤其适合需要自定义转换或兼容旧环境的场景。

用 Array.from + 扩展运算符处理固定层级

对于已知深度的二维数组，可结合扩展运算符展开后转为数组：

写法简洁：Array.from([...arr].flat()) 或直接 Array.from(arr).flat()（若 arr 是类数组）
注意：flat() 是 ES2019 新增方法，若需兼容低版本，可用 [].concat(...arr) 替代 flat(1)
示例：const matrix = [[1, 2], [3, 4], [5]]; const flat = Array.from([].concat(...matrix)); // [1, 2, 3, 4, 5]

用 Array.from + 递归实现任意深度扁平化

当数组嵌套层数不确定时，Array.from 可作为“安全转换器”，把类数组或非标准可迭代对象统一转为真数组，再递归处理：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

先用 Array.from 确保输入是数组（比如 NodeList、arguments 或 Set），避免 map/filter 报错
再用递归遍历每个元素：遇到数组就继续展开，否则保留原值
示例：function deepFlatten(input) { return Array.from(input).reduce((acc, val) => Array.isArray(val) ? acc.concat(deepFlatten(val)) : acc.concat(val), []); }

用 Array.from + 映射函数做带转换的扁平化

如果扁平化同时要加工数据（如提取属性、过滤空项），Array.from 的第二个参数（映射函数）很实用：

它会在创建新数组时对每个元素执行一次回调，天然支持“边展平边处理”
适合处理含 null/undefined 或混合结构的数据，例如：Array.from(arr, item => item?.children || []) 提取所有子节点
搭配 flat 使用更清晰：Array.from(data, x => x.items).flat()（从对象列表中提取 items 并展平）

和原生 flat 对比的关键差异

Array.from 不是扁平化工具，而是数组构造工具；它的价值在于“可控转换”：

flat() 只作用于数组，对类数组或 Set 会报错；Array.from 能先统一转成数组再 flat
Array.from 支持 length 属性截断或补位（如 Array.from({length: 3}, (_, i) => i) → [0,1,2]），可用于生成扁平索引结构
在需要类型校验或预处理的场景下，Array.from 比直接调用 flat() 更健壮

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南