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 相关文章推荐
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
Jul 29 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
Dec 04 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
vue filters的使用详解
Jun 11 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
JavaScript实现点击图片换背景
Nov 20 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生成自己的LOG文件
2006/10/09 PHP
php array_intersect比array_diff快(附详细的使用说明)
2011/07/03 PHP
php中防止伪造跨站请求的小招式
2011/09/02 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP如何通过表单直接提交大文件详解
2019/01/08 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
2010/12/28 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
深入理解Javascript中的valueOf与toString
2017/01/04 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
Bootstrap table 定制提示语的加载过程
2017/02/20 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
Python 变量类型及命名规则介绍
2013/06/08 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python协程的用法和例子详解
2017/09/09 Python
用matplotlib画等高线图详解
2017/12/14 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
啤酒节策划方案
2014/05/28 职场文书
运动员获奖感言
2014/08/15 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
2015年安置帮教工作总结
2015/05/22 职场文书
公司客户答谢酒会祝酒词
2015/08/11 职场文书
校园之声广播稿
2015/08/18 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL