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 ajax方式直接提交整个表单核心代码
Aug 15 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
javascript结合fileReader 实现上传图片
Jan 30 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
Vuex中mutations与actions的区别详解
Mar 01 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 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 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
php7新特性的理解和比较总结
2019/04/14 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
2016/03/06 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
2018/04/20 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
python的几种开发工具介绍
2007/03/07 Python
Python实现的计数排序算法示例
2017/11/29 Python
Python3实现的字典、列表和json对象互转功能示例
2018/05/22 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Python 防止死锁的方法
2020/07/29 Python
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
英国工作场所设备购买网站:Slingsby
2019/05/03 全球购物
英语专业毕业个人求职自荐信
2013/09/21 职场文书
优秀毕业生推荐信
2013/11/02 职场文书
毕业研究生的自我鉴定
2013/11/30 职场文书
工业学校毕业生自荐信范文
2014/01/03 职场文书
公证委托书模板
2014/04/03 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
基层党员对照检查材料
2014/08/25 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
运动会广播稿100字
2015/08/19 职场文书
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android