ES10之Array.prototype.{flat,flatMap}-JavaScript中文网-JavaScript教程资源分享门户

ES10是JavaScript的最新版本之一，它提供了许多增强的功能，其中包括Array.prototype.{flat,flatMap}。这两个方法可以简化我们在前端开发中涉及数组嵌套的操作，使代码更加简洁、易懂和高效。本文我们将深入探讨这两个方法。

Array.prototype.flat()

Array.prototype.flat()的作用是将一个嵌套多层的数组转换为一个一维数组，其参数可以指定转换的层数。其语法如下：

let newArray = arr.flat([depth])

其中，arr是指要转换的嵌套数组，depth是可选参数，指定转化的层数。默认为1，表示只转化一层数组

下面是一个示例代码：

let arr = [1,2,3,[4,5,[6,7]]];
let newArray = arr.flat();
console.log(newArray); //[1, 2, 3, 4, 5, Array(2)]

此处，原数组包含4层嵌套，我们没有指定转化深度，则默认转换为1层嵌套。最终得到一个包含6个元素的一维数组。

如果我们指定转化为2层，则会得到下面的结果：

let arr = [1,2,3,[4,5,[6,7]]];
let newArray = arr.flat(2);
console.log(newArray); //[1, 2, 3, 4, 5, 6, 7]

这里我们得到了一个包含7个元素的一维数组。我们也可以使用无限深度，如下所示：

let arr = [1,2,3,[4,5,[6,7]]];
let newArray = arr.flat(Infinity);
console.log(newArray); // [1, 2, 3, 4, 5, 6, 7]

当我们指定为Infinity时，它将转换所有嵌套层次，以获得一个完全扁平的数组。

Array.prototype.flatMap()是一个组合了“映射”和“扁平化”功能的新方法。它首先使用映射回调函数将每个元素转换为一个新数组，然后将这些新数组扁平化为一个新数组。其语法如下：

let newArray = arr.flatMap(callback[, thisArg])

其中，arr是指要转换的数组，callback是指定的映射函数，thisArg是可选的上下文对象。

下面是一个示例代码：

let arr = [1, 2, 3, 4];
let newArray = arr.flatMap(x => [x * 2]);
console.log(newArray); //[2, 4, 6, 8]

我们将原来数组中的每个元素转换为一个新数组，并且每个新数组中只有一个元素x*2，然后扁平化这些新数组，并将其组合为一个新的一维数组。

如果我们使用嵌套数组来测试flatMap()，我们会发现，只有在我们明确返回一个扁平化数组时才会生效，例如：

let arr = [1, 2, 3, 4];
let newArray = arr.flatMap(x => [[x * 2]]);
console.log(newArray); //[[2], [4], [6], [8]]

如果返回列表没有被包装在数组中，flatMap将无法扁平化它们：

let arr = [1, 2, 3, 4];
let newArray = arr.flatMap(x => [x * 2]);
console.log(newArray); //[2, 4, 6, 8]

请注意，即使在这种情况下，给出的回调也会被调用，并将值添加到输出数组中，但是我们并没有得到一个扁平的结果数组。

Array.prototype.{flat,flatMap}是两个新的有用的工具，可以帮助我们更好地处理嵌套数组。通过这篇文章的介绍，你可以了解到：

在实际项目中，我们将遇到许多需要处理嵌套数组的场景，使用Array.prototype.{flat,flatMap}可以更加轻松和高效地解决问题，并且保持代码的简洁性和可读性。

本文介绍了ES10之Array.prototype.{flat,flatMap}的用法和示例代码，还讨论了每个方法对于处理嵌套数组的重要性。这些方法是我们在前端开发中经常使用的工具，因此熟悉它们将使您能够更轻松地处理数组，减少代码复杂性，提高代码的易读性和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/64a6817748841e9894324724