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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
location.href语句与火狐不兼容的问题
Jul 04 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
javascript函数声明和函数表达式区别分析
Dec 02 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
Javascript 实现放大镜效果实例详解
Dec 03 Javascript
vue通过watch对input做字数限定的方法
Jul 13 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
vue中 this.$set的用法详解
Sep 06 Javascript
js如何验证密码强度
Mar 18 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 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判断数组元素中是否存在某个字符串的方法
2014/06/14 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
Smarty变量用法详解
2016/05/11 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
js jquery做的图片连续滚动代码
2008/01/06 Javascript
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
input链接页面、打开新网页等等的具体实现
2013/12/30 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
2014/07/09 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
vue实现登录后页面跳转到之前页面
2018/01/07 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
使用Vue构建可重用的分页组件
2018/03/26 Javascript
微信小程序排坑指南详解
2018/05/23 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
javascript深拷贝、浅拷贝和循环引用深入理解
2018/05/27 Javascript
详解搭建es6+devServer简单开发环境
2018/09/25 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
Python后台开发Django的教程详解(启动)
2019/04/08 Python
python实现复制大量文件功能
2019/08/31 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
安全技术说明书
2014/05/09 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书
彻底卸载VMware虚拟机的超详细步骤记录
2022/07/15 Servers