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

在过去的几年中，已经将许多有用的功能添加到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() 函数）来避免它的出现，是一个很好的选择。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS在Array数组中按指定位置删除或添加元素对象方法示例

    JavaScript的数据中可通过splice/slice在指定位置添加或删除元素.另外还有slice.delete等方法实现. splice简介 splice方法向/从数组中添加/删除项目,然后返回被删除的项目. 该方法会改变原始数组. arrayObject.splice(index, howmany, item1, ..., itemX) 参数 描述 index 必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置. howmany 必需.要删除的项目数量.如果设置为 0,

  • js Array.slice的8种不同用法示例

    前言 JS数组slice方法是JS语言中最强大.最常用的内建函数之一. 随着React和其他面向功能的JavaScript实践的兴起,它变得越来越重要,原因有两个: 函数式编程,尤其是高阶函数,与数据列表密切配合 函数式编程需要纯函数,即不会产生副作用或修改输入数据的函数 JavaScript 数组slice方法符合这两个标准. slice方法可以在不修改原始列表的情况下创建列表子集的浅拷贝.因此,它为编写函数式 JS 提供了一个关键的构建块. 在这篇文章中,我们将通过实例来掌握slice方法,

  • JS数组降维的实现Array.prototype.concat.apply([], arr)

    把多维数组(尤其是二维数组)转化为一维数组是业务开发中的常用逻辑,最近跟着黄轶老师学习Vue2.6.1.1版本源码时,看到源码对二维数组降维的代码,所以这里来写一篇,记录一下,加强印象 二维数组降为一维数组 循环降维 let children = [1, 2, 3, [4, 5, 6], 7, 8, [9, 10]]; function simpleNormalizeChildren(children) { let reduce = []; for (let i = 0; i < childre

  • JS Array.from()将伪数组转换成数组的方法示例

    Array.from 方法用于将两类对象转换为真正的数组: 1.类似数组的对象,可以理解为"伪数组" 2.可遍历对象(比如字符串) 什么是伪数组? 伪数组都有一个基本的特点:必须有 length 属性. let arrayLike = { "0": "a", "1": "b", "2": "c", "length": 3 } 像上面的 arrayL

  • 你应该了解的JavaScript Array.map()五种用途小结

    前言 从经典的 for 循环到 forEach() 方法,用于迭代数据集合的各种技术和方法比比皆是.但是现在比较流行的方法是 .map() 方法. .map() 通过指定函数调用一个数组中每一项元素,来创建一个新数组. .map() 是一种 non-mutating(非变异) 方法,它创建一个新数组,而不是只对调用数组进行更改的 mutating(变异) 方法.这可能很难记住. 语法: array.map(function(currentValue,index,arr), thisValue)

  • python3 dict ndarray 存成json,并保留原数据精度的实例

    如下所示: import numpy as np import codecs, json a = np.arange(10).reshape(2,5) # a 2 by 5 array b = a.tolist() # nested lists with same data, indices file_path = "/path.json" ## your path variable json.dump(b, codecs.open(file_path, 'w', encoding='

  • php array 转json及java 转换 json数据格式操作示例

    本文实例讲述了php array 转json及java 转换 json数据格式操作.分享给大家供大家参考,具体如下: php array 转json 数据 $arr = array( "demo1" => "my demo1", "demo2" => array( "demo2_demo1"=>"aaaaaaaa", "demo2_demo2"=>"bb

  • java JSONArray 遍历方式(2种)

    第一种(java8):遍历JSONArray 拼接字符串 public static void main(String[] args) { JSONArray jSONArray = new JSONArray(); JSONObject jb = new JSONObject(); jb.put("id", 1); jb.put("name", "s"); jSONArray.add(jb); JSONObject j1 = new JSONO

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

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

  • JavaScript立即执行函数用法解析

    JavaScript立即执行函数用法解析

            我们知道,在一般情况下,函数必须先调用才能执行,如下所示,我们定义了一个函数,并且调用, function fn(){ console.log(1); } fn(); 打印结果为:         如果不调用的话,我们打印的结果永远不会显示.         所以这里就会提到我们的立即执行函数,所谓立即执行函数,就是不需要调用,立马就能执行的函数. 立即执行函数有两种最常见的写法: (function(){})() (function(){}()) 举个例子: (function

  • javaScript中push函数用法实例分析

    本文实例讲述了javaScript中push函数用法.分享给大家供大家参考.具体分析如下: javaScript 中的 push 方法,将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1   [item2   [.   .   .   [itemN   ]]]]) 参数 arrayObj,必选项.一个   Array   对象. item,   item2,.   .   .   itemN, 可选项.该   Array   的新元素. 说明 push 

  • javaScript中slice函数用法实例分析

    本文实例讲述了javaScript中slice函数用法.分享给大家供大家参考.具体分析如下: javaScript 中的 slice 函数,对于array对象的slice函数,返回一个数组的一段.(仍为数组) arrayObj.slice(start, [end]) 参数: arrayObj,必选项.一个 Array 对象.  start,必选项.arrayObj 中所指定的部分的开始元素是从零开始计算的下标.  end,可选项.arrayObj 中所指定的部分的结束元素是从零开始计算的下标.

  • 关于tensorflow softmax函数用法解析

    如下所示: def softmax(logits, axis=None, name=None, dim=None): """Computes softmax activations. This function performs the equivalent of softmax = tf.exp(logits) / tf.reduce_sum(tf.exp(logits), axis) Args: logits: A non-empty `Tensor`. Must be

  • JavaScript中exec函数用法实例分析

    本文实例讲述了JavaScript中exec函数用法.分享给大家供大家参考.具体如下: javaScript 中的 exec 函数,用正则表达式模式在字符串中运行查找,并返回包含该查找结果的一个数组. rgExp.exec(str) 参数: rgExp   必选项.包含正则表达式模式和可用标志的正则表达式对象. str   必选项.要在其中执行查找的 String 对象或字符串文字. 说明: 如果 exec 方法没有找到匹配,则它返回 null.如果它找到匹配,则 exec 方法返回一个数组,并

  • javascript中动态函数用法实例分析

    本文实例讲述了javascript中动态函数用法.分享给大家供大家参考.具体分析如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态函数</title> <script

  • javascript中eval函数用法分析

    本文实例分析了javascript中eval函数用法.分享给大家供大家参考.具体分析如下: eval()只有一个参数,如果传入的参数不是字符串,则直接返回这个参数.否则会将字符串当成js代码进行编译,如果编译失败则抛出语法错误(SyntaxError)异常.如果编译成功则开始执行这段代码,并返回字符串中的最后一个表达式或语句的值:如果最后一个表达式或语句没有值,则最终返回undefined.如果字符串抛出异常,则该异常将把该调用传递给eval(); eval()最为重要的是,它使用了调用它的变量

  • JavaScript中eval()函数用法详解

    eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参数是Javascript语句,eval()将执行 Javascript 语句. 语法 复制代码 代码如下: eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句. eval()函数用法详解: 此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,下面就介绍一下eva

  • JavaScript中匿名函数用法实例

    本文实例讲述了JavaScript中匿名函数用法.分享给大家供大家参考.具体分析如下: JS中可以不用给函数名称,而是在使用时直接通过function把函数体赋值给相关的事件或者变量. 下面的JS代码给按钮设定了一个onclick事件,使用了匿名函数 <form action="#"> <input type="button" value="Click Me" id="anonbutton" /> &l

随机推荐