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中SQL语句的应用实现
May 04 Javascript
JavaScript用Number方法实现string转int
May 13 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
Jul 06 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
Sep 02 Javascript
原生js实现商品放大镜效果
Jan 12 Javascript
详解Angular Reactive Form 表单验证
Jul 06 Javascript
angularjs实现天气预报功能
Jun 16 Javascript
JavaScript使用面向对象实现的拖拽功能详解
Jun 12 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
js作用域及作用域链工作引擎
Jul 07 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
javascript+xml技术实现分页浏览
2008/07/27 Javascript
使用新的消息弹出框blackbirdjs
2008/10/16 Javascript
javascript 函数调用的对象和方法
2010/07/01 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
2016/10/10 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
2016/12/15 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python iter()函数用法实例分析
2018/03/17 Python
Atom的python插件和常用插件说明
2018/07/08 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
Python图像处理之膨胀与腐蚀的操作
2021/02/07 Python
办公室文秘自我鉴定
2013/09/21 职场文书
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
素质教育标语
2014/06/27 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
房屋买卖协议样本
2014/11/16 职场文书
2014年手术室工作总结
2014/11/26 职场文书
婚礼双方父亲致辞
2015/07/27 职场文书
小学毕业感言100字
2015/07/30 职场文书
使用JS实现简易计算器
2021/06/14 Javascript