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 相关文章推荐
利用ASP发送和接收XML数据的处理方法与代码
Nov 13 Javascript
DIV菜单层实现代码
Nov 19 Javascript
javascript判断非数字的简单例子
Jul 18 Javascript
JQuery文字列表向上滚动的代码
Nov 13 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
js判断一个字符串是否包含一个子串的方法
Jan 26 Javascript
简单实现异步编程promise模式
Jul 31 Javascript
理解javascript闭包
Dec 15 Javascript
Bootstrap实现input控件失去焦点时验证
Aug 04 Javascript
关于foreach循环中遇到的问题小结
May 08 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
vue2实现provide inject传递响应式
May 21 Vue.js
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学习之简单计算器实现代码
2011/06/09 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
php实现的二叉树遍历算法示例
2017/06/15 PHP
PHP调用其他文件中的类
2018/04/02 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
JavaScript中的事件处理
2008/01/16 Javascript
cnblogs TagCloud基于jquery的实现代码
2010/06/11 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
多种方法实现JS动态添加事件
2013/11/01 Javascript
javascript数组详解
2014/10/22 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
基于datepicker定义自己的angular时间组件的示例
2018/03/14 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
python计算书页码的统计数字问题实例
2014/09/26 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
python实现ID3决策树算法
2018/08/29 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
aec加密 php_php aes加密解密类(兼容php5、php7)
2021/03/14 PHP
《蓝色的树叶》教学反思
2014/02/24 职场文书
工伤赔偿协议书
2014/04/15 职场文书
3分钟演讲稿
2014/04/30 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
法人身份证明书
2014/10/08 职场文书
2016年世界艾滋病日宣传活动总结
2016/04/01 职场文书
2019初中学生入团申请书
2019/06/27 职场文书
编写python程序的90条建议
2021/04/14 Python
python字符串的多行输出的实例详解
2021/06/08 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis