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 相关文章推荐
JavaScript toFixed() 方法
Apr 15 Javascript
javascript 循环读取JSON数据的代码
Jul 17 Javascript
javascript学习笔记(九)javascript中的原型(prototype)及原型链的继承方式
Apr 12 Javascript
js中arguments,caller,callee,apply的用法小结
Jan 28 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例
Aug 03 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
解决vue页面刷新或者后退参数丢失的问题
Mar 13 Javascript
在vue中使用jsx语法的使用方法
Sep 30 Javascript
如何在微信小程序中存setStorage
Dec 13 Javascript
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
通过实例解析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
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
可以保证单词完整性的PHP英文字符串截取代码分享
2014/07/15 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
JavaScript 学习笔记(十四) 正则表达式
2010/01/22 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
2019/10/30 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python实现带参数的用户验证功能装饰器示例
2018/12/14 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
解决pytorch报错:AssertionError: Invalid device id的问题
2020/01/10 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
opencv 图像腐蚀和图像膨胀的实现
2020/07/07 Python
Python必须了解的35个关键词
2020/07/16 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
Ooni英国官网:披萨烤箱
2020/05/31 全球购物
应届生船舶驾驶求职信
2013/10/19 职场文书
护理职业生涯规划书
2014/01/24 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
工商局调档介绍信
2015/10/22 职场文书
创业计划书之酒厂
2019/10/14 职场文书
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python