引言
在 JavaScript 中，Array 是一种非常常见的数据类型，经常需要对其进行各种操作。ES7 中新增的 Array.prototype.flat() 函数，为我们提供了非常方便的方法来平铺嵌套数组，方便我们进行数组的操作，极大的提高了 JavaScript 的编程效率。
本文将深入详细介绍 ES7 Array.prototype.flat() 函数的使用方法和示例，并针对其中的关键知识点进行讲解，帮助读者深入理解其内部实现和使用方法。
Array.prototype.flat()
Array.prototype.flat() 函数是 ES7 中新增的数组扁平化函数，它的作用是将一个嵌套数组转换为一个普通的一维数组。在实际应用中，经常我们需要对嵌套数组进行操作，但是嵌套数组操作起来十分不方便，需要进行很多层的遍历和操作，这时候 Array.prototype.flat() 函数就可以派上用场了。
该函数并不会改变原数组，而是返回一个新的扁平化后的数组。其函数原型定义如下：
Array.prototype.flat(depth)
其中 depth 参数表示要递归的嵌套层数，如果不传入该参数，则默认为只扁平化一层。我们可以通过传入不同的 depth 参数来得到不同层数的扁平化数组。
使用示例：
下面我们来看一个简单的示例代码，通过 Array.prototype.flat() 函数来进行数组操作。
const arr = [1, [2, [3, 4]]]; const flatArr = arr.flat(); console.log(flatArr); // [1,2,[3,4]] -> [1,2,3,4]
在上面的示例代码中，我们定义了一个嵌套数组 arr，然后使用 Array.prototype.flat() 函数将其进行扁平化操作，得到了一个新的扁平化数组 flatArr。最后打印 flatArr 数组，可以看到其已经被完全扁平化了。
depth 参数
下面我们来看一下 depth 参数在 Array.prototype.flat() 函数中的使用方式。
const arr = [1, [2, [3, 4]]]; const flatArr1 = arr.flat(1); const flatArr2 = arr.flat(2); console.log(flatArr1); // [1, 2, [3, 4]] console.log(flatArr2); // [1, 2, 3, 4]
在上面的示例代码中，我们定义了嵌套数组 arr，然后分别使用了 depth 参数为 1 和 2 的 Array.prototype.flat() 函数来进行数组扁平化操作，并分别得到了两个新的扁平化数组 flatArr1 和 flatArr2。
可以看到，当 depth 参数为 1 时，Array.prototype.flat() 函数只会扁平化一层，将 [2, [3, 4]] 扁平化为 [2, 3, 4]，留下了一层嵌套，新数组为 [1, 2, [3, 4]]；当 depth 参数为 2 时，Array.prototype.flat() 函数将完全扁平化数组，将 [2, [3, 4]] 扁平化为 [2, 3, 4]，同时将 [1, [2, [3, 4]]] 扁平化为 [1, 2, 3, 4]，得到完全扁平化后的新数组 [1, 2, 3, 4]。
flatMap 方法
除了 Array.prototype.flat() 函数之外，ES7 还新增了一个 flatMap() 方法，该方法是将数组的每个元素按照指定的方式进行操作后，再将其扁平化。与 Array.prototype.flat() 函数不同的是，该方法先是对数组做了一次 map 操作，然后再进行一次 flat 操作，也就是说 flatMap() 方法在一次操作中完成了对数组的映射和扁平化操作。
具体使用方法如下：
// 将数组中的每个元素乘以 2，然后进行扁平化 [1, 2, 3].flatMap(x => [x * 2]); // [2, 4, 6]
在上面的代码中，我们针对数组中每个元素进行了乘以 2 的操作，然后使用 flatMap() 方法将其扁平化。可以看到，该方法非常适合需要在一次操作中完成数组的映射和扁平化操作的场景。
总结
在本文中，我们介绍了 ES7 Array.prototype.flat() 函数的使用方法和示例，并针对其中的关键知识点进行了详细的讲解，帮助读者深入了解其内部实现和使用方法。此外，我们还介绍了 flatMap() 方法的使用，并给出了示例代码。我们相信，通过本文的介绍，读者对于 Array.prototype.flat() 函数的使用已经有了更加深入的理解，希望能够对读者的实际开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a22a01add4f0e0ffa37942