JavaScript Array.flat()函数用法解析


Posted in Javascript onSeptember 02, 2020

在过去的几年中,已经将许多有用的功能添加到Javascript Array全局对象中,这些功能为开发人员在编写可用于数组的代码时提供了多种选择。这些功能提供了许多优点,其中最值得注意的是,虽然在过去的一段时间里,开发人员必须实现自己的复杂逻辑来执行各种数组操作,但现在这些新功能已经不再需要这种自制的实现。本文将探讨的有用功能之一是 flat() 函数。

JavaScript的Array.flat()函数深入探讨

功能概述

flat() 函数提供了将一组数组项串联成一个全新的数组并在函数完成后返回新数组的能力。由于这个函数产生了一个全新的数组,所以一旦函数完成操作后,任何包含在原始数组中的现有的、完全独立的数组都不会被改变,在开始操作之前,不需要采取任何预防措施。

flat() 函数仅采用一个参数,该参数是可选的,唯一的参数是 depth 参数。如果原始数组包含一个或多个嵌套数组结构,则此参数决定函数将多少数组层压扁为单个层。由于该参数是可选的,所以它的默认值为 1,并且在函数完成时,只有单层数组将被平展到返回的全新数组中。

没有参数的情况

在介绍了一般的函数行为之后,让我们看一下 flat() 函数在实践中是如何工作的一些示例。以下示例说明了未指定参数值的情况:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat();
// array2: [1, 2, 3, 4, [5, 6], [[7, 8]], [[[9, 10]]]]

调用 flat() 函数时不带参数值。考虑到可选参数的默认值,此函数调用与 flat(1) 相同。这意味着原始数组中深度为 1 的任何数组都将被完全展平,以便将其所有内容单独连接到新数组。原始数组中深度为 2 或更大的任何数组的深度都将减小 1 ,并且这些数组中深度为1的任何单个数组项将单独连接到新数组。结果,原始数组中包含 3 和 4 的第一个数组被展平,以便将这两个数组项分别连接到新数组。此外,其余三个嵌套的数组中的每个数组都被串联到新的数组中,其嵌套深度减少了一个。

正深度

以下示例演示了指定正 depth 参数值的情况:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(2);
// array2: [1, 2, 3, 4, 5, 6, [7, 8], [[9, 10]]]

使用深度参数值 2 调用 flat() 函数。这意味着在原始数组中深度最大为2的任何数组都将被完全展平,以便将其所有内容单独连接到新数组。原始数组中深度为3或更大的任何数组的深度将减少2,并且这些数组中深度为1或2的任何单个数组项将单独连接到新数组。结果,包含 3 和 4 以及 5 和 6 的原始数组中的前两个数组被展平,从而将这四个数组项分别连接到新数组。另外,剩下的两个嵌套数组都连接到新数组,它们的嵌套深度减少了2。

无限深度

以下示例演示了指定无限 depth 参数值的情况:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(Infinity);
// array2: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

使用 depth 参数值 Infinity 调用 flat() 函数。这意味着原始数组中具有任何深度的所有数组都将被展平,以便将其所有内容单独连接到新数组。在与 flat() 函数一起使用诸如 Infinity 之类的值时,要记住的一件非常重要的事情是,如果应用程序遇到嵌套得足够深的数组,则它可能会耗尽内存。尽管此处使用 Infinity 来证明可以将这种值与 flat() 函数一起使用,但建议使用更小的有限参数值,以避免应用程序中发生任何无法预料的错误。

零深度

以下示例演示了将 depth 参数值指定为 0 的情况:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(0);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

使用深度参数值 0 调用 flat() 函数。这意味着原始数组中包含的任何数组都不会被展平,并且新数组的单个数组项和嵌套数组的组成与原始数组完全相同。

负深度

以下示例演示了指定负深度参数值的情况:

var array1 = [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]];
var array2 = array1.flat(-Infinity);
// array2: [1, 2, [3, 4], [[5, 6]], [[[7, 8]]], [[[[9, 10]]]]]

使用 depth 参数值 -Infinity 调用 flat() 函数。由于负深度值对于扁平嵌套数组没有意义,所以在指定负深度参数值的情况下,将使用 0 作为替代。正如前面的示例所演示的那样,当指定深度参数值为 0 时,原始数组中没有数组是扁平的,而新数组中各个数组项和嵌套数组的组成与原始数组完全相同。

经验教训

关于 flat() 函数,可以从本文中学到一些经验教训。首先要记住的是,flat() 函数不会以任何方式改变原始数组中的任何普通或嵌套数组,因此在使用该函数之前无需维护这些数组的状态。flat() 函数唯一会改变的数组是函数完成后返回的全新数组,它只是使用原始数组的所有内容构建的。

要记住的第二件事是,flat() 函数将删除原始数组中存在的所有空值。下面的示例演示了该功能的实际作用:

var array1 = [1, , 3, , 5];
var array2 = array1.flat();
// array2: [1, 3, 5]

尽管原始数组占用了五个位置,而第二个和第四个位置的值未定义,但是 flat() 函数从函数完成后返回的新数组中删除了这两个数组项。结果,新数组只包含三个数组项,它们的值不为 undefined。

关于 flat() 函数要记住的第三件事,也是最后一件事,是它的一般用途,以及它如何有助于简化逻辑,如果没有一个可用的 flat()函数,要合并任何数组中包含的所有项目,通常的方法是编写自定义的逻辑来迭代所有的数组,从一个数组中单独拉出项目,然后把它们放到另一个数组中,可能会考虑到其中的嵌套数组。这样的逻辑往往比较混乱,而且容易出错,因此,通过使用抽象的内置函数(如 flat() 函数)来避免它的出现,是一个很好的选择。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
accesskey 提交
Jun 26 Javascript
Prototype最新版(1.5 rc2)使用指南(1)
Jan 10 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
JavaScript中的类与实例实现方法
Jan 23 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
Sep 10 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
canvas实现图像截取功能
Feb 06 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
Aug 18 Javascript
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
通过实例解析JavaScript常用排序算法
Sep 02 #Javascript
手把手教你实现 Promise的使用方法
Sep 02 #Javascript
如何基于jQuery实现五角星评分
Sep 02 #jQuery
在vscode 中设置 vue模板内容的方法
Sep 02 #Javascript
JavaScript array常用方法代码实例详解
Sep 02 #Javascript
Vue前端判断数据对象是否为空的实例
Sep 02 #Javascript
详解JavaScript 事件流
Sep 02 #Javascript
You might like
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
jquery+php+ajax显示上传进度的多图片上传并生成缩略图代码
2014/10/15 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
PHPStudy下如何为Apache安装SSL证书的方法步骤
2019/01/23 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
浅谈JS之iframe中的窗口
2016/09/13 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
Vue路由切换时的左滑和右滑效果示例
2018/05/29 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Vue.js 事件修饰符的使用教程
2018/11/01 Javascript
express.js中间件说明详解
2019/03/19 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
用python实现面向对像的ASP程序实例
2014/11/10 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python通用读取vcf文件的类(复制粘贴即可用)
2020/02/29 Python
vscode调试django项目的方法
2020/08/06 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
应届毕业生求职信
2013/11/30 职场文书
竞争上岗演讲稿
2014/01/05 职场文书
收银员的岗位职责范本
2014/02/04 职场文书
大学生标准自荐书
2014/06/15 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
2016年大学迎新工作总结
2015/10/14 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书