JS数组扁平化_多种方法性能对比

数组扁平化方法包括:1. flat()语法简洁但兼容性差;2. reduce+concat逻辑直观但内存开销大;3. 扩展运算符+循环适合中等深度但性能随层数下降;4. 模拟法避免递归,适合深层结构;5. toString+split仅限数字且最快。性能上,小数组用flat(),大数组用栈模拟,纯数字优选toString+split,深层嵌套避免递归。

js数组扁平化_多种方法性能对比

数组扁平化是将多维数组转换为一维数组的过程,在 JavaScript 中有多种实现方式。不同方法在性能上有明显差异,尤其在处理大数组或深层嵌套结构时表现不一。下面介绍几种常见的扁平化方法,并结合实际场景分析其性能表现。

1. 使用 flat() 方法

flat() 是 ES2019 提供的原生数组方法,语法简洁,支持指定展开深度。

示例:

const arr = [1, [2, [3, [4]], 5]]; const result = arr.flat(Infinity); // 深度展开

优点:代码清晰,无需额外逻辑。缺点:兼容性有限(IE 不支持),且在 V8 引擎中底层使用递归实现,深层嵌套可能影响性能。

2. reduce + concat

利用 reduce 遍历数组,结合 concat 合并子项。

示例:

const flatten = arr => arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), [] );

优点:兼容性好,逻辑直观。缺点:concat 会创建新数组,频繁调用导致内存开销大;递归深度大时可能出现栈溢出。

3. 扩展运算符 + concat + 循环

通过 while 循环结合扩展运算符逐层展开。

示例:

const flatten = arr => { while (arr.some(Array.isArray)) { arr = [].concat(…arr); } return arr; };

优点:避免递归,适合中等深度数组。缺点:每轮 concat 都生成新数组,性能随层数增加显著下降。

4. 栈模拟迭代法

使用栈结构手动模拟遍历过程,避免递归调用开销。

示例:

const flatten = arr => { const stack = […arr]; const result = []; while (stack.length) { const val = stack.pop(); if (Array.isArray(val)) { stack.push(…val); } else { result.unshift(val); } } return result; };

注意:unshift 影响性能,可改为 reverse 或从头部入栈、尾部出栈优化。此方法空间利用率高,适合深层结构。

5. toString + split(仅限数字)

适用于纯数字数组,通过字符串转换后拆分。

示例:

const flatten = arr => arr.toString().split(‘,’).map(Number);

优点:速度极快,特别适合大规模数字扁平化。缺点:仅适用于数字,其他类型会丢失信息(如对象、null 等)。

性能对比总结

在不同场景下的表现:

小数组、浅层嵌套:flat() 和 reduce+concat 差距不大,推荐 flat() 大数组、中等深度:栈模拟法优于递归方案,避免爆栈 纯数字数组:toString + split 性能最优,但需确保数据类型安全 极端深层嵌套:避免递归,优先选择迭代式方案

基本上就这些。选择方法时要权衡兼容性、数据类型和性能需求,没有绝对最优解,但了解底层机制有助于做出合理决策。

以上就是JS数组扁平化_多种方法性能对比的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1539220.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 05:47:29
下一篇 2025年12月21日 05:47:40

相关推荐

  • html里js怎么使用

    html里js的使用方法:1、在HTML中使用【】嵌入JavaScript,在使用【】包含外部文件时使用src属性;2、所有【】元素都应该放在页面的元素中。 本教程操作环境:windows7系统、html 4.01版,DELL G3电脑。 html里js的使用方法: 1、元素 在HTML中使用嵌入J…

    2025年12月21日
    000
  • 快速使用svg画出精美动画!

    经常在Codepen上看到大侠们用SVG画出不可思议的动画,我一直很好奇他们是怎么运作的,总觉得这需要对SVG有足够透彻的了解,并且自己画出那些SVG图案,才有办法让他动起来。 但其实不然,今天教大家一个简单的小技巧,让你快速实现一个svg动画! 打开Codepen,点击界面中的build按钮,就可…

    2025年12月21日 好文分享
    000
  • H5+JS实现页面加载动画

    本篇文章给大家介绍一下html5+javascript实现页面加载动画的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 (相关教程推荐:html教程 ) 1.使用定时器,每次都要等待。 2.根据页面加载是否完成,来判断加载动画是否退出。 document.onreadysta…

    2025年12月21日 好文分享
    000
  • 在html中嵌入js代码的方法

    如何在HTML页面中嵌入javascript代码 (学习视频分享:html视频教程) document.write(“Hello World!”); 上面的代码会在 HTML 页面中产生这样的输出: Hello World! 实例解释: 立即学习“前端免费学习笔记(深入)”; 如果需要把一段 Jav…

    2025年12月21日
    000
  • html获取javascript变量值的方法有哪些

    html获取javascript变量值有如下三种方法: (免费学习视频分享:html视频教程) 方法一:嵌入到html句子中,当html元素使用 var df=newDate(); var year= df.getFullYear() ; document.write(“”+year+” J2EE开…

    2025年12月21日
    000
  • 利用html+css+js实现简单的点赞效果

    我们在浏览其他网站的文章时,经常可以看到文章尾部有点赞收藏效果,非常有趣。今天我们自己动手来实现该效果。 (学习视频推荐:html视频教程) css样式 .like{ font-size:66px; color:#ccc; cursor:pointer;}.cs{color:#f00;} html内…

    2025年12月21日
    000
  • 一起了解script标签中的async和defer属性

    前端当然要从 HTML 开始,我们来聊聊在 script 标签中加上 async/defer 时的功能及差异。 都明白的道理 我们都知道,浏览器解析 HTML 是一行一行按照顺序向后读取的,在传统的写法中,当浏览器读到 时,便会暂停解析 DOM,同时立即开始下载 中定义的资源,并在下载完成后立刻执行…

    2025年12月21日
    000
  • 在html页面中加入js可以用什么方法

    方法一:在head标签内引入JS文件 (推荐教程:html教程) 方法二:在body标签内写JS代码 //在这里面写你的js代码 </html 以上就是在html页面中加入js可以用什么方法的详细内容,更多请关注创想鸟其它相关文章!

    2025年12月21日
    000
  • 网页开发中实用的11个文本输入和6个按钮操作特效

    文本输入特效 1.power-mode-input PowerModeInput 可以让你的文本输入框更引人注目。 地址:https://github.com/lindelof/power-mode-input 2.TextInputEffects 简单的样式和效果,可增强文本输入交互。 地址:ht…

    2025年12月21日 好文分享
    000
  • 手把手教你如何在HTML中引入外部JS文件

    在学习前端的时候,小伙伴们一定对于在HTML中如何引入外部JS文件感到困惑,下面小编教你HTML引入外部JS文件的方法。 在引入外部JS文件的情况下,不能在之间插入代码,插入的代码不执行,只执行引入的外部文件。 attack.html 代码: 系好安全带,准备启航 attack.js 代码 func…

    2025年12月21日
    000
  • 了解一下HTML中的script标签

    稍微学习过一点网页编写的同学都知道,网页中的js代码应该写在 script 标签中,但是为什么要这么做呢?本文就介绍一下script标签。 script 标签 最初,网景公司想要在浏览器中展示使用js的html文件,但是又不想影响这个文件在其他浏览器中的显示效果,于是创造了 script 标签 我们…

    2025年12月21日
    000
  • 自学 HTML5 要多久

    自学 HTML5 要多久 前端除了HTML5之外还有JavaScript和Css,如果只学习HTML5的话半个月到一个月之间就能学会,但是仅仅HTML5是不够的,还需要学习JavaScript和CSS这些,基础学习一个月也足够了。 JavaScript JavaScript(简称“JS”) 是一种具…

    2025年12月21日
    000
  • 使用html+css+js实现弹球游戏

    使用html+css+js实现弹球游戏  代码如下,复制即可使用: .panel{ position: relative; z-index: 0; top:0px; left: 400px; width: 300px; height: 500px; } .console{ position: abs…

    2025年12月21日
    000
  • html实现自动清理js、css文件的缓存

    方法如下: 1、手动清除浏览器缓存; 2、添加版本号(如 layout.css?v=1) 个人认为方法2更快,因为清除浏览器缓存还要等浏览器响应。但是每次更改版本号也很麻烦,所以需要想办法自动添加版本号。 (推荐教程:html教程) 立即学习“前端免费学习笔记(深入)”; 方法一:可以通过js自动给…

    2025年12月21日
    000
  • web开发之文件上传的多种实现方式(附代码)

    文件上传是 web 开发常见需求,上传文件需要用到文件输入框,如果给文件输入框添加一个 multiple 属性则可以一次选择多个文件(不支持的浏览器会自动忽略这个属性) 点击这个输入框就可以打开浏览文件对话框选择文件了,一般一个输入框上传一个文件就行,要上传多个文件也可以用多个输入框来处理,这样做是…

    2025年12月21日
    000
  • HTML怎么引入js文件?

    在html中可以使用标签,通过 src 属性来引入js文件。 标签用于定义客户端脚本,比如 javascript。 script标签元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。必需的 type 属性规定脚本的 MIME 类型。 示例: 建立一个外部的js文件(hello.js)…

    2025年12月21日
    000
  • 学会html能做什么工作

    很多朋友发现自己学了html之后不知道自己能够做什么,未来能从事什么工作,实际上这也是很正常的事情,很多朋友在学过html之后都会有这样的困惑,下面我将和大家一起谈谈。 在经过一系列的演变之后,HTML逐渐开始向商业智能、贸易、游戏、娱乐以及移动互联网等不同领域多样化地发展。因此你学习HTML可以从…

    2025年12月21日
    000
  • html css js是什么?

    html称为超文本标记语言,是一种标识性的语言;css表示层叠样式表,是一种用来表现HTML或XML等文件样式的计算机语言;js全称为JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的高级编程语言。 在现今的互联网生活中,我们经常能看见CSS,HTML,js放在一起,却有很多人都…

    2025年12月21日
    000
  • js为什么那么难

    这个问题我就不等大家的回答了,相信大家也明白,我并不是闲的无聊这么问。js本身语法并不难,它困难的地方在哪呢?主要在于以下几点: 1,怎么样去把具象的问题抽象化 就是面对一个很具体的需求时,例如时,,一个网上商城吧,它内部的各种交互纷繁复杂。那么你是如何入手去写呢?前端架构也是需要设计的,这就看你是…

    2025年12月21日
    000
  • html5中怎么用js?

    在html5中可以直接在页面中嵌入JavaScript代码和包含外部JavaScript文件,嵌入脚本的语法是“”,外部脚本的语法是“”。 在html5中可以通过标签以两种方式(嵌入脚本和外部脚本)来使用js代码。下面本篇文章给大家介绍一下,希望对大家有所帮助。 在html5中使用js的两种方法: …

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信