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 相关文章推荐
node.js中的console用法总结
Dec 15 Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 Javascript
JavaScript中innerHTML,innerText,outerHTML的用法及区别
Sep 01 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
完美的js图片轮换效果
Feb 05 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
详解AngularJS1.x学习directive 中‘& ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
用js实现before和after伪类的样式修改的示例代码
Sep 07 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 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
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
CI框架中cookie的操作方法分析
2014/12/12 PHP
PHP将session信息存储到数据库的类实例
2015/03/04 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
Javascript简单改变表单元素背景的方法
2015/07/15 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
js实现点击按钮弹出上传文件的窗口
2016/12/23 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
vue 下列表侧滑操作实例代码详解
2018/07/24 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
jQuery实现评论模块
2020/08/19 jQuery
详解JavaScript中的链式调用
2020/11/27 Javascript
python正常时间和unix时间戳相互转换的方法
2015/04/23 Python
Python多线程、异步+多进程爬虫实现代码
2016/02/17 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
python pygame模块编写飞机大战
2018/11/20 Python
啥是佩奇?使用Python自动绘画小猪佩奇的代码实例
2019/02/20 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
乌克兰巴士票购买网站:inBus
2021/03/12 全球购物
金融专业应届生求职信
2013/11/02 职场文书
销售工作岗位职责
2013/12/24 职场文书
学校安全教育月活动总结
2014/07/07 职场文书
财务总监岗位职责范本
2015/04/03 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
SpringBoot中获取profile的方法详解
2022/04/08 Java/Android