JS实现数组扁平化的方法分享
前言
当我们遇到一个 树形结构的数据，或者 多层嵌套 的数组，如果想拿到数组项的 某一个 字段值，操作起来将会很麻烦，这个时候就需要我们将数组 扁平化 之后，通过 map 方法直接就可以拿到。
过程
什么是扁平化
数组扁平化指的是：将一个多层嵌套的数组，处理成只有一层的数组，如下代码：
const arr = [
{ id:1,title:"文章管理",children:[
{ id:2,title:"文章列表",children:[
{ id:3,title:"文章新增" },
{ id:4,title:"文章删除" },
] }
] }
]
// 转换之后
[
{ id:1,title:"文章管理" },
{ id:2,title:"文章列表" },
{ id:3,title:"文章新增" },
{ id:4,title:"文章删除" },
]通过上面的结果我们就可以很方便地拿出所有的 id 。
方法一：flat
flat：这是ES6中Array对象新增的一个方法，可以很方便的把多维数组转换为一维数组。MDN文档参考此处。
flat方法的参数是深度，默认是 1，表示展开几层。
假设我们是 三维数组 ，那展开的深度就应该是 3-1。
这样做确实有些麻烦，JavaScript 也贴心地为我们提供了 Infinity，可在此处查看介绍。
所以我们可以将 arr.flat(2) 修改为 arr.flat(Infinity)。
但是使用 flat 存在个 弊端 ，当我们 数组项 是 对象，且 无限下钻 时，就不能很好的帮我们展开了，这个时候就引入第二种方法。
方法二：递归
递归：是一种 算法，表示在一个 函数 内 return自身 ，当满足 指定条件 时 return值 跳出循环。
这里我们定义一个递归方法 flatArr，方法接收源数组 data 和 子集key childField：
function flatArr(data = [],childField = ""){}
定义一个结果集 result ，并最终返回：
function flatArr(data = [],childField = ""){
const result = [];
return result;
}
接下来定义一个递归方法 deepFn，接收一个数组参数 arr ，并循环 arr 执行递归，将循环出来的每一项push 给 result，并调用这个递归方法 ：
function flatArr(data = [],childField = ""){
const result = [];
const deepFn = (arr) => {
arr.forEach(e => {
if(e[childField] && e[childField].length > 0 ){
deepFn(e[childField])
}else{
result.push(e)
}
})
}
deepFn(data);
return result;
}至此，这个递归方法就这样实现了，接下来我们测试一下：
好嘞，确实没什么问题，大功告成！
到此这篇关于JS实现数组扁平化的方法分享的文章就介绍到这了,更多相关JS数组扁平化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要对原生JS获取元素集合的子元素宽度的实现方法进行介绍，代码详细，具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
TypeScript是一种由微软开发的开源、跨平台的编程语言。这篇文章主要介绍了TypeScript的安装、使用、自动编译的实现方法,需要的朋友可以参考下2020-04-04
这篇文章主要介绍了JS实现页面长时间不操作退出到登录页面的示例代码,通过在head标签中引入jquey和页面长时间不操作的js页面,结合实例代码讲解的非常详细,需要的朋友可以参考下2024-03-03
这篇文章主要为大家详细介绍了JavaScript如何使用前缀树(trie树)实现文本高亮效果,文中的示例代码讲解详细,有需要的小伙伴可以参考下2024-04-04
本文为大家详细介绍下禁止截屏，通过清除剪切板实现、禁止复制、禁止右键菜单、禁止网页另存为等等，感兴趣的朋友可以参考下哈，希望对大家有所帮助2013-07-07
本文主要介绍了js获取ip和地区的方法，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
这篇文章主要介绍了js正则表达式惰性匹配和贪婪匹配用法,结合实例形式详细分析了正则表达式的基本概念以及惰性匹配和贪婪匹配的使用方法,需要的朋友可以参考下2016-12-12
动态添加option在某些特殊的情况下还是比较实用的，本文有个小示例为大家介绍下createElement使用，感兴趣的朋友可以参考下2014-01-01
有时候你会发现设首页为失效，那么来一个js强制设置首页的代码，不过为了绿色上网，尽量不要强迫你的用户意志，弄不好网站用户体验会降低。感兴趣的小伙伴可以参考一下2015-09-09![js判断IE6/IE7/FF的代码[XMLHttpRequest]](//img.jbzj.com/images/xgimg/bcimg9.png)
js判断IE6/IE7/FF的代码[XMLHttpRequest]
js下通过XMLHttpRequest判断IE6/IE7/FF的代码，需要的朋友可以参考下。2011-02-02
![js判断IE6/IE7/FF的代码[XMLHttpRequest]](http://img.jbzj.com/images/xgimg/bcimg9.png)
最新评论