ES9 的新特性之 Array.prototype.flat，简单遍历扁平化数组

在 ES9 中，JavaScript 引入了一个新的 Array 原型方法：Array.prototype.flat()，这个方法可以简单遍历扁平化一个数组。在之前，实现这个功能需要自己写递归或者用一些库，可以说这个新特性是一个非常实用和方便的更新。

flat() 方法的使用

Array.prototype.flat() 方法的作用是将一个多维数组变成一维数组。这个方法可以接受一个可选的参数，表示要扁平化的数组的深度。如果没有提供这个参数，那么这个方法将会默认遍历全部深度。

使用这个方法非常简单，下面是一个例子：

const arr = [1, 2, [3, 4, [5, 6]]];
const flattenedArr = arr.flat(); // [1, 2, 3, 4, [5, 6]]

上面的例子中，原始数组 arr 包含了一个嵌套数组 [3, 4, [5, 6]]。当我们调用 arr.flat() 方法时，这个嵌套数组中的元素被提取出来，与其他元素放在同一层级上，形成了扁平化的数组。

我们可以使用一个数字类型的参数来表示要扁平化的数组的深度。下面是一个例子：

const arr = [1, [2, [3]]];
const flattenedArr = arr.flat(2); // [1, 2, 3]

在上面的例子中，arr 是一个嵌套数组，有两层深度。当我们调用 arr.flat(2) 时，这个参数表示要提取两层深度的元素。所以嵌套数组中的元素被提取出来，形成了扁平化的数组。

深入理解 flat() 方法

Array.prototype.flat() 方法是一个非常实用和方便的更新，但是它的实现并不是很简单。在深入了解这个方法之前，我们先来看一下这个方法的兼容性和使用方法。

兼容性方面，flat() 方法在所有现代浏览器和 Node.js 中都已经实现，但是在 IE 上，这个方法还不支持。如果你需要在 IE 中使用这个方法，可以通过 polyfill 的方式来实现。

使用方法方面，flat() 方法接受一个可选的 depth 参数，表示要扁平化的数组的深度。如果没有提供这个参数，那么这个方法将会默认遍历全部深度。

在实现这个方法时，我们需要考虑一些特殊情况。例如，当处理一个包含 undefined 元素的数组时，这个方法会将这个 undefined 元素当作空元素并将其删除。

const arr = [1, 2, [3, undefined, 4]];
const flattenedArr = arr.flat(); // [1, 2, 3, 4]

另外一个特殊情况是当处理一个循环引用的数组时，这个方法会抛出一个 TypeError，以避免无限递归循环。

const arr = [1, 2, [3]];
arr[1] = arr;
const flattenedArr = arr.flat(); // 抛出 TypeError

除了上面的特殊情况外，flat() 方法还有一些其他值得注意的细节。例如，如果数组中的一个元素是对象或者函数，它将不会被扁平化。下面是一个例子：

const arr = [1, 2, [{name: 'John'}]];
const flattenedArr = arr.flat(); // [1, 2, {name: 'John'}]

从这个例子中可以看出，对象元素不会被扁平化，原因是对象元素不是数组类型。

flatMap() 方法的使用

在 ES9 中，还有另一个新的 Array 原型方法：Array.prototype.flatMap()。这个方法与 flat() 方法类似，但是它是一个组合方法，它在使用 map() 方法后自动调用了 flat() 方法。

使用这个方法也很简单，下面是一个例子：

const arr = [1, 2, 3];
const mappedArr = arr.flatMap(num => [num * 2]);
// [2, 4, 6]

在上面的例子中，我们首先调用了 map() 方法，将原数组中的每一个元素乘以 2。然后，flatMap() 方法自动调用了 flat() 方法，将返回的嵌套数组平展成一个扁平化的数组。

总结

Array.prototype.flat() 方法是一个非常实用和方便的更新，它可以简单遍历扁平化一个数组。在深入了解这个方法后，我们发现它的实现并不是很简单，需要考虑一些特殊情况和细节。此外，在 ES9 中还有一个与 flat() 方法类似的组合方法：Array.prototype.flatMap()。

如果你需要在项目中使用 flat() 方法和 flatMap() 方法，可以查看官方文档，了解它们的使用方法和兼容性情况。

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