在 ECMAScript 2016 中，新增了两个 Array 扩展方法：Array.prototype.flat 和 Array.prototype.flatMap。这两个方法都是用于处理嵌套数组的，因此可以让我们在处理数组时更加方便和高效。本文将对这两个方法进行详细的介绍和解释，并提供示例代码。
Array.prototype.flat
Array.prototype.flat 方法用于将嵌套数组“展平”，即将多维数组转化为一维数组。这个方法可以接受一个可选参数 depth，表示展平的深度，默认值为 1。如果 depth 为 Infinity，则会展平所有的嵌套数组。下面是一个示例：
const arr1 = [1, 2, [3, 4]]; console.log(arr1.flat()); // [1, 2, 3, 4] const arr2 = [1, 2, [3, [4, 5]]]; console.log(arr2.flat()); // [1, 2, 3, [4, 5]] const arr3 = [1, 2, [3, [4, 5]]]; console.log(arr3.flat(2)); // [1, 2, 3, 4, 5]
在第一个例子中，只有一个嵌套数组，因此默认的 depth 值足够将它展平。在第二个例子中，arr2 中的嵌套数组有两层，因此仅使用默认的 depth 不足以展平它们。在第三个例子中，指定了 depth 值为 2，因此所有嵌套数组都被展平了。
需要注意的是，Array.prototype.flat 方法会跳过任何 undefined，null 和空元素。
Array.prototype.flatMap
Array.prototype.flatMap 方法用于对数组进行“映射”和“展平”操作。与 map 方法不同的是，flatMap 方法会在映射完成后自动将结果数组展平为一维数组。下面是一个示例：
const arr1 = [1, 2, 3, 4];
console.log(arr1.flatMap(x => [x, x * 2])); // [1, 2, 2, 4, 3, 6, 4, 8]
const arr2 = ['hello', 'world'];
console.log(arr2.flatMap(x => x.split(''))); // ['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']在第一个例子中，传给 flatMap 方法的函数返回了一个数组，该数组包含原数组中每个元素的值和它们的两倍。因此，flatMap 方法返回了一个展平的新数组，其中包含了这些值。在第二个例子中，传给 flatMap 方法的函数返回的是一个字符串，它会被展平成单个字符的数组。
需要注意的是，与 map 方法类似，flatMap 方法也会跳过值为 undefined 和 null 的元素。
结论
Array.prototype.flat 和 Array.prototype.flatMap 方法可以让我们更轻松、更高效地处理嵌套数组，特别是在数组的操作中。需要注意的是，这两个方法在一些老版本的浏览器中可能不被支持。因此，在使用它们时需要注意浏览器兼容性，或者使用 Polyfill 库来实现它们的功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673153e3eedcc8a97c945873