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获取文本节点之 text()/val()/html() 方法区别
Mar 01 Javascript
js+div实现图片滚动效果代码
Feb 10 Javascript
jQuery团购倒计时特效实现方法
May 07 Javascript
JS+CSS实现滑动切换tab菜单效果
Aug 25 Javascript
javascript弹出窗口实现代码
Nov 12 Javascript
ComboBox(下拉列表框)通过url加载调用远程数据的方法
Aug 06 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
Feb 08 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 Javascript
Node.js 进程平滑离场剖析小结
Jan 24 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-redis中的sort排序函数总结
2015/07/08 PHP
yii2中添加验证码的实现方法
2016/01/09 PHP
学习PHP session的传递方式
2016/06/15 PHP
利用php生成验证码
2017/02/23 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
在js文件中如何获取basePath处理js路径问题
2013/07/10 Javascript
JS匿名函数实例分析
2016/11/26 Javascript
vue2.0父子组件及非父子组件之间的通信方法
2017/01/21 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
Python基本数据类型详细介绍
2014/03/11 Python
Python ORM框架SQLAlchemy学习笔记之安装和简单查询实例
2014/06/10 Python
python实现报表自动化详解
2017/11/16 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python 接口实现 供第三方调用的例子
2019/08/13 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
python实现发送邮件
2021/03/02 Python
Hello Molly美国:女性时尚在线
2019/08/26 全球购物
美国家居装饰店:Pier 1
2019/09/04 全球购物
实习自我评价怎么写
2013/12/02 职场文书
社区十八大感言
2014/01/19 职场文书
银行批评与自我批评
2014/02/10 职场文书
党员干部三严三实心得体会
2014/10/13 职场文书
上甘岭观后感
2015/06/10 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
mysql对于模糊查询like的一些汇总
2021/05/09 MySQL
利用Python判断你的密码难度等级
2021/06/02 Python