jstips 精讲：JavaScript 多维数组扁平化的五种解法与原理对比

教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载本篇技术指南基于 jstips 开源仓库第 38 期中文文档 多维数组扁平化 展开系统讲解将二维数组乃至更深层嵌套转换为单一扁平数组的五种实现方案并深入剖析每种方案的底层原理、适用场景与性能注意事项。读完本文你将掌握从concat apply、reduce、嵌套循环、ES6 展开运算符到 ES2019 原生flat()的完整解法谱系能够在实际项目中根据嵌套深度、数组规模与运行环境做出正确的选型。问题定义从二维数组到单一数组原文档给出了一个经典场景给定一个由多个子数组组成的二维数组需要把所有元素合并成一个一维数组。var myArray [[1, 2],[3, 4, 5], [6, 7, 8, 9]];期望得到的结果是[1, 2, 3, 4, 5, 6, 7, 8, 9]这个操作在 JavaScript 中被称为数组扁平化flatten常见于把分页/分组数据拼接为单一列表、将多个 API 返回的数组合并后统一处理等场景。原文档依次给出了三种经典解法随后补充了 ES6 展开运算符解法英文原版文档flattening-multidimensional-arrays-in-javascript还额外收录了 ES2019 的flat()解法本文一并整理共五种方案。方案一使用concat()与apply()原文档的第一种解法是借助Array.prototype.concat与Function.prototype.applyvar myNewArray [].concat.apply([], myArray); // [1, 2, 3, 4, 5, 6, 7, 8, 9]其原理可以拆解为两步apply(thisArg, argsArray)会把第二个参数——即myArray这个数组——展开成独立参数依次传入目标函数。这里等价于调用[].concat([1, 2], [3, 4, 5], [6, 7, 8, 9])concat接收多个数组参数后将每个参数中的元素逐一追加到新数组中从而把嵌套结构拉开一层。从仓库中英文对照文档看中文版、英文原版这是 ES6 之前最常见的一行扁平化写法没有任何循环代码。适用与限制该方法只能扁平化一层嵌套更关键的是apply在展开参数时会受引擎参数数量上限约束V8 等主流引擎约为 65535 个因此当子数组数量极大时可能抛出RangeError: Maximum call stack size exceeded之类的异常超大数组场景不宜采用此方案。方案二使用reduce()累加合并原文档的第二种解法利用reduce逐个把子数组合并进累积结果var myNewArray myArray.reduce(function(prev, curr) { return prev.concat(curr); }); // [1, 2, 3, 4, 5, 6, 7, 8, 9]reduce从左到右遍历数组每次回调返回的prev.concat(curr)会成为下一次回调的prev第一次合并得到[1, 2, 3, 4, 5]第二次得到[1, 2, 3, 4, 5, 6, 7, 8, 9]最终把二维数组收敛为单一数组。这一解法与仓库中第 48 期文档 怎样使用reduce()数组 的主题一脉相承——reduce接收一个累加器回调reducer以及可选的初值非常适合把数组折叠成单一结果。扁平化正是折叠的典型应用用空数组[]作为初值可写成更稳妥的形式var myNewArray myArray.reduce(function(prev, curr) { return prev.concat(curr); }, []);reduce方案没有apply的参数数量上限问题适合中等规模的二维数组代价是每次迭代都会新建数组存在一定的中间对象开销。方案三嵌套for循环原文档的第三种解法是零魔法的双重循环var myNewArray3 []; for (var i 0; i myArray.length; i) { for (var j 0; j myArray[i].length; j) myNewArray3.push(myArray[i][j]); } console.log(myNewArray3); // [1, 2, 3, 4, 5, 6, 7, 8, 9]外层循环遍历每个子数组内层循环把子数组的每个元素push进结果数组。它不依赖任何高阶函数或展开机制逻辑最直白、最容易被初学者理解也最便于通过break/continue或下标控制实现跳过某些元素等定制逻辑。缺点是需要手工管理两层下标代码量略大嵌套超过两层时循环层次会迅速膨胀。方案四ES6 展开运算符原文档补充的第四种解法使用 ES6 展开运算符是方案一的现代改写var myNewArray4 [].concat(...myArray); console.log(myNewArray4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]...myArray在函数调用位置会把数组元素就地展开为参数列表因此[].concat(...myArray)与方案一中的[].concat.apply([], myArray)语义等价但写法更直观、可读性更好也不需要额外理解apply的this传递细节。它同样只能扁平化一层并且同样受引擎参数数量上限影响——如果子数组数量非常大应避免使用该写法。仓库中的其他 jstips 文章如 向数组中插入元素也多次展示了concat在数组合并中的高效用法可与本方案相互印证。方案五ES2019 原生flat()英文原版文档en/flattening-multidimensional-arrays-in-javascript额外收录了 ES2019 的原生解法var myNewArray5 myArray.flat(); console.log(myNewArray5); // [1, 2, 3, 4, 5, 6, 7, 8, 9]Array.prototype.flat()是语言层面的内置扁平化方法默认深度为 1恰好覆盖本文的二维数组场景。与前面四种方案相比它语义最清晰、代码最简洁且不存在apply/展开运算符的参数数量限制是扁平化一层场景下的首选。深层嵌套递归与flat(Infinity)原文档明确指出对于无限嵌套的数组需要使用能够递归处理任意深度的方案例如 Lodash 的flattenDeep()以及适用于较大数组的 Underscoreflatten()两者均支持深层递归扁平化。在不需要引入第三方库的前提下可以用reduce配合Array.isArray自行实现等价的递归扁平化function flattenDeep(arr) { return arr.reduce(function(acc, val) { return Array.isArray(val) ? acc.concat(flattenDeep(val)) // 遇到子数组则递归展开 : acc.concat(val); }, []); } flattenDeep([[1, 2], [3, [4, [5]]]]); // [1, 2, 3, 4, 5]递归版reduce方案适用于任意嵌套深度是理解flattenDeep工作原理的最小实现。若运行环境支持 ES2019更简单的等价写法是arr.flat(Infinity)它把扁平化深度设置为正无穷同样能处理任意嵌套层级的数组。性能对比原文档的验证思路原文档为五种解法中的前几种附带了性能对比测试意在提醒读者不同方案在真实引擎中的执行效率并不相同选型前最好针对自己的数据规模做实测。由于各引擎V8、SpiderMonkey、JavaScriptCore 等对高阶函数、展开机制和循环的优化策略不同这里不给出任何绝对性能结论只说明验证方法在本地使用console.time()包裹各方案分别对同一份大型二维数组执行多次比较耗时或使用performance.now()记录单次执行时间多次取平均值测试时应覆盖不同规模如 10、1000、10000 个子数组与不同嵌套深度避免单一数据点误导结论。经验上双重循环方案避免了高阶函数调用与数组中间拷贝在超大规模数组上通常具备竞争力而reduce每次迭代都会生成新数组内存分配更频繁。需要强调这些是通用工程经验本文不替代你在目标引擎上的实测结果。本文方案总览方案核心语法扁平化深度主要限制1.concatapply[].concat.apply([], arr)1 层受apply参数数量上限影响2.reduce累加arr.reduce((p, c) p.concat(c), [])1 层每次迭代新建数组有中间开销3. 嵌套循环双重forpush1 层代码量大深层嵌套需手工加循环4. ES6 展开运算符[].concat(...arr)1 层受展开参数数量上限影响5. ES2019flat()arr.flat()/arr.flat(Infinity)默认 1 层可指定任意深度需要 ES2019 运行环境延伸阅读仓库内的相关 jstips怎样使用reduce()数组本方案二的原理基础详解reduce的累加器回调与初值语义数组去重扁平化后的数组常需配合去重该文给出了基于filter/indexOf与Set的两种实现向数组中插入元素本文多个方案依赖的concat/push的细节与效率说明英文原版 · Flattening multidimensional Arrays包含 ES2019flat()解法的完整原文繁体中文版 · 多维数组扁平化同一期 tips 的繁体翻译。本文对应文档编号为第 38 期tip-number: 38作者 loverajoel在 README 的 tips 列表 中登记为 Flattening multidimensional Arrays。当你需要把多层数组合并为单一数组时优先考虑flat()深层场景用flat(Infinity)在不支持 ES2019 的旧环境或需要兼容 IE 的场景中再退回到reduce或双重循环方案。赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐PaddleOCR EAST 文本检测算法全解析从论文原理到训练推理部署实战PaddleOCR EAST 文本检测算法全解析从论文原理到训练推理部署实战 导读 EASTEfficient and Accurate Scene Tex教程jstips 第 38 期JavaScript 多维数组扁平化的五种实用方案jstips 第 38 期JavaScript 多维数组扁平化的五种实用方案 导读 本文基于 jstips 仓库第 38 号技巧 西班牙语原文 https:教程jstips 精读深入理解 JavaScript 变量声明的五种写法Basics: Declarationsjstips 精读深入理解 JavaScript 变量声明的五种写法Basics: Declarations 导读 本篇文章基于 jstips 仓库的第教程上一篇React 渲染优化不要在 useMemo 中包裹简单表达式布尔/数字/字符串——mediago 项目实践指南下一篇3分钟上手roop-unleashed零训练AI换脸神器完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考