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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
javascript背投广告代码的完善
Apr 08 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
Oct 14 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
Mar 13 Javascript
js加密解密字符串可自定义密码因子
May 13 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
javascript中this的用法实践分析
Jul 29 Javascript
vue 实现input表单元素的disabled示例
Oct 28 Javascript
微信小程序订阅消息(java后端实现)开发
Jun 01 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
以文本方式上传二进制文件的PHP程序
2006/10/09 PHP
php 特殊字符处理函数
2008/09/05 PHP
PHP调试的强悍利器之PHPDBG
2016/02/22 PHP
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
2013/12/27 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
layui弹出框Tab选项卡的示例代码
2019/09/04 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
2019/09/17 Javascript
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
Python入门篇之条件、循环
2014/10/17 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python输出决策树图形的例子
2019/08/09 Python
python实现邮件发送功能
2019/08/10 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python实现npy格式文件转换为txt文件操作
2020/07/01 Python
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
护士实习自我鉴定
2013/10/22 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
售后服务经理岗位职责
2014/02/25 职场文书
房产公证书范本
2014/04/10 职场文书
幼儿园小班评语大全
2014/04/17 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
计生专干事迹
2014/05/28 职场文书
新闻稿标题
2015/07/18 职场文书
初一军训感言
2015/08/01 职场文书
财务管理制度范本
2015/08/04 职场文书
小学数学国培研修日志
2015/11/13 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis