es6数组的flat(),flatMap()函数用法实例分析


Posted in Javascript onApril 18, 2020

本文实例讲述了es6数组的flat(),flatMap()函数用法。分享给大家供大家参考,具体如下:

数组的成员有时还是数组,Array.prototype.flat()用于将嵌套的数组“拉平”,变成一维数组。该方法返回一个新数组,对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

上面代码中,原数组的成员里面有一个数组,flat()方法将子数组的成员取出来,添加在原来的位置。

flat()默认只会“拉平”一层,如果想要“拉平”多层的嵌套数组,可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]
[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中,flat()的参数为2,表示要拉平两层的嵌套数组。

如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原数组有空位,flat()方法会跳过空位。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()方法对原数组的每个成员执行一个函数,相当于执行Array.prototype.map(),然后对返回值组成的数组执行flat()方法。该方法返回一个新数组,不改变原数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

flatMap()只能展开一层数组。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jquery radio 操作代码
Mar 16 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
javascript中错误使用var造成undefined
Mar 31 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
js实现下拉框二级联动
Dec 04 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
es6函数中的作用域实例分析
Apr 18 #Javascript
es6函数之rest参数用法实例分析
Apr 18 #Javascript
vue实现短信验证码输入框
Apr 17 #Javascript
JS监听组合按键思路及实现过程
Apr 17 #Javascript
javascript canvas检测小球碰撞
Apr 17 #Javascript
Vue实现浏览器打印功能的代码
Apr 17 #Javascript
基于JavaScript获取url参数2种方法
Apr 17 #Javascript
You might like
叶罗丽:为什么大家对颜冰这对CP非常关心,却对金茉两人十分冷漠
2020/03/17 国漫
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
php实现数据库的增删改查
2017/02/26 PHP
Javascript中eval函数的使用方法与示例
2007/04/09 Javascript
JavaScript实现的in_array函数
2014/08/27 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
详谈LABJS按需动态加载js文件
2015/05/07 Javascript
jquery使用each方法遍历json格式数据实例
2015/05/18 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
12个超实用的JQuery代码片段
2015/11/02 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
对javascript继承的理解
2016/10/11 Javascript
写给小白看的JavaScript异步
2017/11/29 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
原生JS实现留言板功能
2020/02/08 Javascript
javascript设计模式 ? 享元模式原理与用法实例分析
2020/04/15 Javascript
跟老齐学Python之从格式化表达式到方法
2014/09/28 Python
Python装饰器使用示例及实际应用例子
2015/03/06 Python
PYTHON 中使用 GLOBAL引发的一系列问题
2016/10/12 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
pandas将list数据拆分成行或列的实现
2020/12/13 Python
世界上最全面的汽车零部件和配件集合:JC Whitney
2016/09/04 全球购物
Python面试题集
2012/03/08 面试题
最新党员的自我评价分享
2013/11/04 职场文书
党员年终民主评议的自我评价
2013/11/05 职场文书
人事专员工作职责
2014/02/22 职场文书
商场周年庆活动方案
2014/08/19 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
董事长岗位职责
2015/02/13 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
财务经理岗位职责范本
2015/04/08 职场文书
奖励通知
2015/04/22 职场文书
七年级数学教学反思
2016/02/17 职场文书
Python实现socket库网络通信套接字
2021/06/04 Python