前言

当我们遇到一个 树形结构的数据，或者 多层嵌套 的数组，如果想拿到数组项的 某一个 字段值，操作起来将会很麻烦，这个时候就需要我们将数组 扁平化 之后，通过 map 方法直接就可以拿到。

过程

什么是扁平化

数组扁平化指的是：将一个多层嵌套的数组，处理成只有一层的数组，如下代码：

通过上面的结果我们就可以很方便地拿出所有的 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：

定义一个结果集 result ，并最终返回：

接下来定义一个递归方法 deepFn，接收一个数组参数 arr ，并循环 arr 执行递归，将循环出来的每一项push 给 result，并调用这个递归方法 ：

至此，这个递归方法就这样实现了，接下来我们测试一下：

好嘞，确实没什么问题，大功告成！

到此这篇关于JS实现数组扁平化的方法分享的文章就介绍到这了,更多相关JS数组扁平化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

原文链接：https://juejin.cn/post/7223679441900683320

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 reterry123@163.com 进行投诉反馈，一经查实，立即处理！

最新评论