es6数组的flat(),flatMap()函数用法实例分析

 更新时间:2020年04月18日 11:05:23   作者:wangliang_001  
这篇文章主要介绍了es6数组的flat(),flatMap()函数用法,结合实例形式分析了es6数组的flat(),flatMap()函数基本功能、使用方法及操作注意事项,需要的朋友可以参考下

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

相关文章

  • asp知识整理笔记3(问答模式)

    asp知识整理笔记3(问答模式)

    这是关于asp知识整理的第二份笔记,只有把最基础的问题搞清楚了,才能更好的学习ASP编程。
    2015-09-09
  • JS创建或填充任意长度数组的小技巧汇总

    JS创建或填充任意长度数组的小技巧汇总

    在JavaScript 中,我们往往会遇到需要使用某些默认值来填充数组的情况,那么都有哪些方式可以完成这样的任务呢?这篇文章主要给大家介绍了关于JS创建或填充任意长度数组的小技巧,需要的朋友可以参考下
    2021-10-10
  • 用javascrpt将指定网页保存为Excel的代码

    用javascrpt将指定网页保存为Excel的代码

    这段代码在服务器中没有权限,可以保存在本地,存为htm文件,运行即可,就可以把文本内容存为excel文件了
    2008-01-01
  • JS常用函数和常用技巧小结

    JS常用函数和常用技巧小结

    这篇文章主要介绍了JS常用函数和常用技巧小结的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-10-10
  • 使用layui定义一个模块并使用的例子

    使用layui定义一个模块并使用的例子

    今天小编就为大家分享一篇使用layui定义一个模块并使用的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript最完整的深浅拷贝实现方式详解

    JavaScript最完整的深浅拷贝实现方式详解

    这篇文章主要为大家详细介绍了JavaScript最完整的深浅拷贝实现方式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 使用原生JS添加进场和退场动画详解

    使用原生JS添加进场和退场动画详解

    总所周知啊,身为一个合格的前端搬砖工,会编写并且添加一些基础的动画效果可谓是比较基础且轻车熟路的技能了。本文将教大家如何使用原生JS添加进场和退场动画,感兴趣的可以了解一下
    2022-10-10
  • JS 9个Promise面试题

    JS 9个Promise面试题

    这篇文章主要介绍了JS 9个Promise面试题,对异步Promise感兴趣的同学,可以参考下
    2021-05-05
  • JavaScript解析URL参数示例代码

    JavaScript解析URL参数示例代码

    通过js解析URL参数,本文创建了一个js类,并引用Request.QueryString,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • js核心基础之闭包的应用实例分析

    js核心基础之闭包的应用实例分析

    这篇文章主要介绍了js核心基础之闭包的应用,结合具体实例形式分析了javascript闭包使用过程中常见问题及相应的解决方法,需要的朋友可以参考下
    2019-05-05

最新评论