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 插件开发备注
Aug 27 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
初识angular框架后的所思所想
Feb 19 Javascript
JavaScript 拖拽实例代码
Sep 21 Javascript
js实现3d悬浮效果
Feb 16 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
Vue发布订阅模式实现过程图解
Apr 30 Javascript
vue iview实现动态新增和删除
Jun 17 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经典面试题之设计模式(经常遇到)
2015/10/15 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
PHP中include和require的区别实例分析
2017/05/07 PHP
ThinkPHP5&5.1框架关联模型分页操作示例
2019/08/03 PHP
拖动布局之保存布局页面cookies篇
2010/10/29 Javascript
jQuery学习基础知识小结
2010/11/25 Javascript
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
JS中的substring和substr函数的区别说明
2013/05/07 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
2015/04/06 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
详解ES6 Symbol 的用途
2018/10/14 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
2019/08/20 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
2020/07/21 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
零基础学Python(一)Python环境安装
2014/08/20 Python
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
Python中的生成器和yield详细介绍
2015/01/09 Python
5种Python单例模式的实现方式
2016/01/14 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python利用itchat库向好友或者公众号发消息的实例
2019/02/21 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
Flask框架学习笔记之消息提示与异常处理操作详解
2019/08/15 Python
采购文员岗位职责
2013/11/20 职场文书
社区十八大感言
2014/01/19 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android
nginx共享内存的机制详解
2022/03/21 Servers