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渐变发光导航菜单的实例代码
Mar 27 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
Sep 14 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
vue安装和使用scss及sass与scss的区别详解
Oct 15 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
VeeValidate 的使用场景以及配置详解
Jan 11 Javascript
详解Vue.directive 自定义指令
Mar 27 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
JavaScript实现简单图片切换
Apr 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
SSI指令
2006/11/25 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
同一个表单 根据要求递交到不同页面的实现方法小结
2009/08/05 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
js星星评分效果
2014/07/24 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
2015/09/06 Javascript
AngularJS中实现动画效果的方法
2016/07/28 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
2016/11/03 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
2017/08/30 Javascript
浅谈react 同构之样式直出
2017/11/07 Javascript
使用vue-router设置每个页面的title方法
2018/02/11 Javascript
深入了解js原型模式
2019/05/30 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
python基础教程之字典操作详解
2014/03/25 Python
深入理解Django中内置的用户认证
2017/10/06 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
python3爬虫学习之数据存储txt的案例详解
2019/04/24 Python
基于Tensorflow批量数据的输入实现方式
2020/02/05 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
python selenium操作cookie的实现
2020/03/18 Python
keras之权重初始化方式
2020/05/21 Python
python opencv实现图像配准与比较
2021/02/09 Python
酒店工作职员求职简历的自我评价
2013/10/23 职场文书
大学生简单自荐信
2013/11/10 职场文书
经销商会议欢迎词
2014/01/11 职场文书
销售顾问岗位职责
2014/02/25 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
FP-growth算法发现频繁项集——构建FP树
2021/06/24 Python
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python