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 相关文章推荐
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
Feb 25 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
Jquery解析json数据详解
Dec 26 Javascript
js日期、星座的级联显示代码
Jan 23 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
老生常谈javascript中逻辑运算符&&和||的返回值问题
Apr 13 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
Sep 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
基于pear auth实现登录验证
2010/02/26 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
javascript:;与javascript:void(0)使用介绍
2013/06/05 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
2014/04/17 Javascript
js实现div层缓慢收缩与展开的方法
2015/05/11 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
使用JS读取XML文件的方法
2016/11/25 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
JavaScript cookie详解及简单实例应用
2016/12/31 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
Python编程scoketServer实现多线程同步实例代码
2018/01/29 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
flask/django 动态查询表结构相同表名不同数据的Model实现方法
2019/08/29 Python
python创建学生成绩管理系统
2019/11/22 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
幼儿园六一儿童节主持节目串词
2014/03/21 职场文书
建材投资建议书
2014/05/16 职场文书
环境卫生标语
2014/06/09 职场文书
幼师求职信
2014/06/23 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
技术入股合作协议书
2016/03/21 职场文书
MySQL Innodb关键特性之插入缓冲(insert buffer)
2021/04/08 MySQL
Python 快速验证代理IP是否有效的方法实现
2021/07/15 Python