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实现简单的点名器随机色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
其实浏览器也自带了返回的功能，也就是说，自带了返回定位的功能，返回定位到具体位置有两种方法，下面通过场景分析给大家详细讲解，需要的的朋友参考下2016-12-12
这篇文章主要介绍了微信小程序填写用户头像和昵称实现方法，我们使用小程序往往能碰到提示允许获取用户头像昵称，这种功能怎么实现呢？本篇文章带你探索2023-02-02
表格翻页的实现方式有很多，下面以js为例为大家详细介绍下表格翻页效果的具体实现，感兴趣的朋友可以参考下2013-08-08
postMessage Api 想必大家都不陌生,WebWorker 通信会用到,iframe 窗口之间通信也会用到,那么我们能不能将 postMessage 进行一次转化,把他变成类似 Promise 的使用方式,所以本文给大家介绍了postMessage消息通信Promise化的方法实现,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了JavaScript高阶函数，详细讲解了什么是高阶函数和高阶函数的用法，有兴趣的可以了解下2017-06-06
js中经常会使用foreach这个方法来遍历数组,这篇文章主要给大家介绍了关于JS面试题之forEach能否跳出循环的相关资料,需要的朋友可以参考下2021-06-06
这篇文章主要为大家详细介绍了基于JavaScript实现带缩略图的轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要介绍了asp.net+js实现金额格式化的相关资料,需要的朋友可以参考下2015-02-02
JavaScript判断浏览器类型一般有两种办法，一种是根据各种浏览器独有的属性来分辨，另 一种是通过分析浏览器的userAgent属性来判断的2014-03-03
最新评论