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实现页面实时显示当前时间的简单实例
Jul 20 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
利用Node.js制作爬取大众点评的爬虫
Sep 22 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
Vue中的混入的使用(vue mixins)
Jun 01 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
关于JSON解析的实现过程解析
Oct 08 Javascript
原生js+canvas实现验证码
Nov 29 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
轻松修复Discuz!数据库
2008/05/03 PHP
ThinkPHP中I(),U(),$this->post()等函数用法
2014/11/22 PHP
分享PHP守护进程类
2015/12/30 PHP
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
easyui validatebox验证
2016/04/29 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
js学习笔记之事件处理模型
2016/10/31 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
webpack+vue中使用别名路径引用静态图片地址
2017/11/20 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
前端使用crypto.js进行加密的函数代码
2020/08/16 Javascript
解决vue props传Array/Object类型值,子组件报错的情况
2020/11/07 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
Python 代码性能优化技巧分享
2012/08/07 Python
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
python控制台实现tab补全和清屏的例子
2019/08/20 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python利用opencv实现颜色检测
2021/02/23 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
丝绸和人造花卉、植物和树木:Nearly Natural
2018/11/28 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL