news 2026/4/20 13:11:14

什么是数组扁平化

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
什么是数组扁平化

数组扁平化(Array Flattening) 是指将一个多维数组(嵌套数组)转换成一个一维数组的过程。例如,将 [1, [2, [3, 4]], 5] 扁平化为 [1, 2, 3, 4, 5]。

1. 为什么需要数组扁平化?

在数据处理中,数组可能包含多层嵌套结构(如从 API 获取的 JSON 数据),但某些操作(如 map、filter、reduce 或直接遍历)通常需要一维数组。扁平化可以简化数据结构,便于后续处理。

2. 数组扁平化的方法

方法 1:使用 Array.flat()(ES2019+ 原生方法)

constarr=[1,[2,[3,4]],5];constflattenedArr=arr.flat(2);// 指定扁平化的深度(2层嵌套)console.log(flattenedArr);// [1, 2, 3, 4, 5]
  • 参数:flat() 接受一个可选参数 depth(默认 1),表示要扁平化的嵌套层数。
    • flat():扁平化 1 层。
    • flat(Infinity):完全扁平化所有嵌套。

方法 2:递归实现

如果环境不支持 flat(),可以用递归手动实现:

functionflatten(arr){letresult=[];for(constitemofarr){if(Array.isArray(item)){result.push(...flatten(item));// 递归处理嵌套数组}else{result.push(item);}}returnresult;}constarr=[1,[2,[3,4]],5];console.log(flatten(arr));// [1, 2, 3, 4, 5]

方法 3:使用 reduce() + 递归

结合 reduce() 和递归实现:

functionflatten(arr){returnarr.reduce((acc,val)=>{returnacc.concat(Array.isArray(val)?flatten(val):val);},[]);}constarr=[1,[2,[3,4]],5];console.log(flatten(arr));// [1, 2, 3, 4, 5]

方法 4:使用 toString()(仅适用于数组元素均为数字或字符串)

如果数组元素都是数字或字符串,可以通过 toString() 或 join() 转换后拆分:

constarr=[1,[2,[3,4]],5];constflattenedArr=arr.toString().split(',').map(Number);// 注意:需处理类型console.log(flattenedArr);// [1, 2, 3, 4, 5]
  • 缺点:仅适用于简单数据类型,复杂对象会变成 [object Object]。

方法 5:使用 Generator 函数(ES6+)

通过生成器函数实现惰性扁平化:

function*flattenGenerator(arr){for(constitemofarr){if(Array.isArray(item)){yield*flattenGenerator(item);// 递归生成}else{yielditem;}}}constarr=[1,[2,[3,4]],5];constflattenedArr=[...flattenGenerator(arr)];console.log(flattenedArr);// [1, 2, 3, 4, 5]

3. 实际应用场景

  1. 处理 API 返回的嵌套数据:
    constapiData=[{id:1,tags:['js','vue']},{id:2,tags:['react','node']}];constallTags=apiData.flatMap(item=>item.tags);// [ 'js', 'vue', 'react', 'node' ]
  2. 合并多个数组:
    constarr1=[1,2];constarr2=[3,[4,5]];constmerged=[...arr1,...flatten(arr2)];// [1, 2, 3, 4, 5]
  3. 数据清洗:
    • 去除嵌套结构中的空数组或无效值。

4. 性能对比

方法适用场景
flat()现代浏览器/Node.js 环境
递归通用,但需注意堆栈溢出
reduce() + 递归函数式编程风格
toString()仅简单数据类型
Generator惰性求值,大数据量时节省内存

5. 总结

  • 推荐方法:优先使用原生 flat(),简单高效。
  • 兼容性处理:如果环境不支持 flat(),用递归或 reduce() 实现。
  • 特殊需求:如需惰性求值或处理大数据量,考虑 Generator。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/4/20 13:11:10

构建GLM-TTS移动端App:React Native开发路线图

构建GLM-TTS移动端App:React Native开发路线图 在智能手机成为信息交互核心入口的今天,语音不再只是通信工具,而是人机对话的桥梁。从智能助手到有声内容创作,用户对“个性化声音”的需求正悄然爆发。试想一下,一位老…

作者头像 李华
网站建设 2026/4/18 19:09:12

逻辑题:解析为什么在处理极长序列任务时,将大图拆分为多个‘短命’子图比维护一个‘长寿’大图更稳定?

各位同仁,各位技术爱好者,大家好!今天,我们来探讨一个在深度学习,特别是处理极长序列和大规模图结构任务时,一个至关重要且屡次被实践证明的策略:为什么将一个庞大的“长寿大图”拆分为多个“短…

作者头像 李华
网站建设 2026/4/18 3:25:33

GLM-TTS与Figma无关?但UI设计同样重要!

GLM-TTS:让声音克隆变得简单,但别忽视交互设计的力量 在虚拟主播一夜爆红、AI有声书批量生成的今天,个性化语音合成早已不再是实验室里的概念。真正让人兴奋的是,我们只需要几秒钟的录音,就能让机器“学会”一个人的声…

作者头像 李华
网站建设 2026/4/19 19:18:27

P值校正:Bonferroni与Benjamini-Hochberg方法详解

Bonferroni与Benjamini-Hochberg:选择你的P值校正方法 P值可能是一个敏感的话题。或许初次与统计学家接触时最好避免讨论它。对这个话题的态度导致大家默认α 0.05是黄金标准——实际上,这只是罗纳德费舍尔本人设定的一个“方便的惯例”,一个…

作者头像 李华
网站建设 2026/4/18 0:01:27

如何用GLM-TTS生成在线考试听力材料自动化命题

如何用GLM-TTS生成在线考试听力材料自动化命题 在一场全国性英语等级考试的命题现场,以往需要数名录音员反复录制、剪辑、校对整整三天才能完成的听力音频,如今只需一位教师提供一段8秒的朗读样本,配合一个自动化脚本——不到两小时&#xff…

作者头像 李华
网站建设 2026/4/18 15:17:07

如何用GLM-TTS生成企业培训资料语音版提升学习效果

如何用GLM-TTS生成企业培训资料语音版提升学习效果 在快节奏的企业环境中,员工的学习时间越来越碎片化。通勤路上、午休间隙、出差途中——这些原本被忽略的时间窗口,正成为知识吸收的新战场。然而,传统的培训文档多以文字或视频形式存在&…

作者头像 李华