记一次JavaScript数组扁平化学习

简介:

云栖号资讯:【点击查看更多行业资讯
在这里您可以找到不同行业的第一手的上云资讯,还在等什么,快来!


在写项目的时候遇到了多级目录的树状结构,需要将这些嵌套的数组转换成只有一层的数组进行展示,因而有了这次数组扁平化常用方法的学习总结,在此记录。

什么是数组扁平化?

数组扁平化是指将多维数组转换为一维数组,即将内部嵌套着别的数组的数组提炼成没有嵌套的一维数组。举个栗子:

1

如何实现数组扁平化?

Array.prototype.flat()

这是ES6提供的方法,用于数组扁平化,这个方法返回一个新的数组,并不会改变原数组:

2

值得注意的是 flat() 默认扁平一层嵌套:

3

可以带一个整数参数表示扁平的层数:

4

如果对于无论多少层嵌套的数组都想转成一维数组,可以用Infinity关键字作为参数:

5

使用扩展运算符和concat()

可以使用扩展运算符可以展开数组,再用concat()可以合并数组,但只操作一次的结果只能展开一层:

6

要完全展开需要对嵌套的数组遍历再进行展开:

7

递归

定义目标空数组,然后我们对原有数组的每一项进行处理,若这一项为数组,则用concat()将这个子项数组合并到目标数组,若这一项不为数组,则直接push到目标数组里。

8

toString()

当元素是字符串或者是数字的时候,toString()可以把数组转为字符串,然后用split()就可以重新获得一个数组,但这个方法是有受限条件的,所以要酌情使用。下面举例一个全是数字的数组使用toString()扁平化:

10

写在最后

这就是本次记录学习数组扁平化的几个方法,数组扁平化的方法还有很多,可能还可以用for循环等方法实现,但Array.prototype.flat()是最方便的hhh。

【云栖号在线课堂】每天都有产品技术专家分享!
课程地址:https://yqh.aliyun.com/live

立即加入社群,与专家面对面,及时了解课程最新动态!
【云栖号在线课堂 社群】https://c.tb.cn/F3.Z8gvnK

原文发布时间:2020-06-02
本文作者:Mia不是大米虫
本文来自:“掘金”,了解相关信息可以关注“掘金”

相关文章
|
11月前
|
JavaScript 数据可视化 前端开发
three.js简单实现一个3D三角函数学习理解
1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
395 0
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
Web App开发 JavaScript 前端开发
如何学习JavaScript?
如何学习JavaScript?
370 5
|
JavaScript 前端开发 索引
JavaScript学习第二章--字符串
本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
209 2
|
存储 JavaScript 前端开发
JavaScript学习第一章
本文档介绍了JavaScript的基础知识,包括其在网页中的作用、如何通过JavaScript动态设置HTML元素的CSS属性,以及JavaScript中的变量类型(`var`、`let`、`const`)和数据类型(基本数据类型与引用数据类型)。通过实例代码详细解释了JavaScript的核心概念,适合初学者入门学习。
221 1
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南:20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧,涵盖了从基本的添加、移除元素,到数组转换和去重等高级操作。强调了不可变性的重要性,提供了清晰的代码示例,帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者,这些技巧都将显著提升您的编码能力,使您在项目中更具竞争力。
331 2
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
530 3
|
JavaScript
js学习--商品列表商品详情
js学习--商品列表商品详情
212 2
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
248 1

热门文章

最新文章

下一篇
开通oss服务