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中的call()方法介绍
Mar 15 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
May 31 Javascript
Node.js数据库操作之连接MySQL数据库(一)
Mar 04 Javascript
微信小程序中多个页面传参通信的学习与实践
May 05 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 Javascript
聊聊JS ES6中的解构
Apr 29 Javascript
vue3中provide && inject的使用
Jul 01 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学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
JQuery 初体验(建议学习jquery)
2009/04/25 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
深入解读JavaScript中的Iterator和for-of循环
2015/07/28 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
jQuery中的siblings用法实例分析
2015/12/24 Javascript
js实现交通灯效果
2017/01/13 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
JavaScript实现计数器基础方法
2017/10/10 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vue中使用微信公众号js-sdk踩坑记录
2019/03/29 Javascript
Node.js 实现远程桌面监控的方法步骤
2019/07/02 Javascript
vue实现循环滚动列表
2020/06/30 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[00:23]魔方之谜解锁款式
2018/12/20 DOTA
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
Python去除、替换字符串空格的处理方法
2018/04/01 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
python正则-re的用法详解
2019/07/28 Python
Python算法中的时间复杂度问题
2019/11/19 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
python3中编码获取网页的实例方法
2020/11/16 Python
咖啡蛋糕店创业计划书
2014/01/28 职场文书
开幕式邀请函
2015/01/31 职场文书
英语教师个人工作总结
2015/02/09 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
车间质检员岗位职责
2015/04/08 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
《最后一头战象》读后感:动物也有感情
2020/01/02 职场文书
JavaWeb 入门篇:创建Web项目,Idea配置tomcat
2021/07/16 Java/Android