ES7 中数组实例的 flat() 方法-JavaScript中文网-JavaScript教程资源分享门户

在 ES7 中，JavaScript 数组新增了一个方法 flat()，通过这个方法，我们可以把多维数组压成一维数组，方便快捷地处理数据。本文将详细介绍 flat() 的用法，包括如何使用 flat() 实现数组的扁平化、利用 flat() 实现数组的去重等。

flat() 方法的基本用法

flat() 方法会按照指定的深度，将当前数组中的所有子数组都提取出来，组成一个新的数组。如果不传入参数，则默认只压扁一层子数组。

具体来说，如果原始数组中包含多个子数组，而这些子数组中又包含了其它子数组，那么如果我们希望将所有子数组都提取出来，应该怎么做呢？很简单，只需要将 flat() 方法的参数设置为 Infinity，就可以将所有子数组都提取出来。

下面是一个简单的示例：

const arr = [1, [2, [3, [4, 5]]]];

const flattenedArr = arr.flat(Infinity);

console.log(flattenedArr); // [1, 2, 3, 4, 5]

在这个示例中，我们定义了一个数组 arr，它包含了三个子数组，其中每个子数组又包含了一些其它的子数组。我们调用了 flat() 方法，并将参数设置为 Infinity，这样就将所有子数组都提取出来，并组成了一个新的一位数组 flattenedArr。

除了上面介绍的基本用法之外，flat() 方法还可以和其他数组方法组合起来使用，以实现更为丰富的功能。比如，我们可以结合 map() 方法，将数组扁平化的同时，还可以对每个元素进行一些操作。

下面是一个示例：

const arr = [1, 2, 3, 4];

const transformedArr = arr
  .map(num => [num * 2])
  .flat();

console.log(transformedArr); // [2, 4, 6, 8]

在这个示例中，我们首先使用 map() 方法将每个元素乘以 2，然后再调用 flat() 方法将多维数组压扁为一维数组。这个操作实际上可以通过嵌套的 map() 方法来实现，但是使用 flat() 方法在代码上却更加简洁、直观。

在 ES7 中，还新增了一个方法 flatMap()，它和上面提到的 map() 方法和 flat() 方法的组合使用场景类似。不过 flatMap() 方法只需要调用一次，就可以完成 map() 方法和 flat() 方法的组合操作。

具体来说，flatMap() 方法会首先对每个元素执行 map() 方法，然后再调用 flat() 方法将数组扁平化。因此，我们直接使用 flatMap() 方法就可以实现上面的示例代码，而不用嵌套 map() 和 flat() 方法。

下面是一个示例：

const arr = [1, 2, 3, 4];

const transformedArr = arr.flatMap(num => [num * 2]);

console.log(transformedArr); // [2, 4, 6, 8]

在这个示例中，我们首先使用 flatMap() 方法将每个元素乘以 2，然后再将数组扁平化。因此，最终得到的结果与上面的示例代码是一样的。

除了上面介绍的示例之外，flat() 方法还可以在数组去重中发挥作用。常规的数组去重可以通过 filter() 方法和 includes() 方法来实现，但是如果嵌套了多维数组，这种方法就涵盖不了所有情况了。

这时候，我们就可以使用 flat() 方法配合 Set 类型来实现组合操作，以实现对多维数组的去重。

下面是一个示例：

const arr = [1, 2, 3, [1, 2], [3, 4]];

const uniqueArr = [...new Set(arr.flat())];

console.log(uniqueArr); // [1, 2, 3, 4]

在这个示例中，我们定义了一个数组 arr，它包含了一些重复的数字和多维数组。我们调用了 flat() 方法将多维数组压扁，然后再使用 Set 类型对压扁后的数组去重。最终得到的结果就是一个不包含重复数字的一位数组。

本文介绍了 ES7 中数组实例的 flat() 方法，包括 flat() 方法的基本使用、和 map() 方法、flatMap() 方法的组合使用以及 flat() 方法在数组去重中的应用。相信通过这些实例，大家已经掌握了这个方法的基本用法，并且能够灵活运用在实际开发中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654640c37d4982a6eb019e68