在前端开发中，数组是不可或缺的一部分。JavaScript 中的数组是一种多用途、高效的数据结构，我们可以利用数组来存储和操作一系列有序的数据。不过当数组嵌套过深时，它们就会变得难以操作。这时候，Array.prototype.{flat,flatMap} 就会变得非常有用。

flat 方法
使用 Array.prototype.flat 方法可以将一个多维数组 “展平” 为一维数组，同时保留原始数组中的元素顺序。该方法接受一个可选的 depth 参数，用于指定该方法递归 “展平” 的次数。默认情况下，depth 的值为 1，表示只“展平”一层。下面是一个使用 flat 方法的例子，我们定义了一个嵌套数组，然后使用 flat 方法将其展平：

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

在上面的例子中，flat 方法仅展开了一层，因此只有最内层的嵌套数组被展开了。如果我们想要将所有嵌套数组都展开，我们可以将 depth 参数设置为一个大于需要展开的最大深度的值：

const deepNestedArr = [1, 2, [3, 4, [5, [6, 7]]]];
const deeplyFlattenedArr = deepNestedArr.flat(Infinity);
console.log(deeplyFlattenedArr); // [1, 2, 3, 4, 5, 6, 7]

在上面的例子中，我们将 depth 参数设置为 Infinity 来展开所有的嵌套数组。

flatMap 方法
使用 Array.prototype.flatMap 方法可以对一个多维数组进行转换，并返回一个新的一维数组。与 Array.prototype.map 方法类似，该方法接受一个回调函数作为参数，但它不仅能够对数组中的每个元素进行转换，还能将结果展平为一维数组。下面是一个为一个嵌套数组中的每个元素添加 “Hello, ” 前缀的例子：

//堆代码 duidaima.com
const nestedArr = ['Alice', 'Bob', ['Charlie', 'Dave']];
const flatMappedArr = nestedArr.flatMap((element) =>
  typeof element === 'string' ? `Hello, ${element}!` : element
);
console.log(flatMappedArr); // [\"Hello, Alice!\", \"Hello, Bob!\", \"Charlie\", \"Dave\"]

在上面的例子中，我们首先定义了一个嵌套数组，然后使用 flatMap 方法将每个元素转换为带有前缀的字符串。由于字符串本身是一维数据，因此它们被展平到了一个一维数组中，而嵌套数组的元素则保留了原始形式。需要注意的是，flatMap 方法默认只展开一层。如果需要展开多层，我们需要手动将其传给 Array.prototype.flat。

const deeplyNestedArr = ['Alice', 'Bob', ['Charlie', ['Dave', 'Eve']]];
const deeplyFlatMappedArr = deeplyNestedArr.flatMap((element) =>
  typeof element === 'string' ? `Hello, ${element}!` : element
);
const deeplyFlattenedArr = deeplyFlatMappedArr.flat(Infinity);
console.log(deeplyFlattenedArr); // [\"Hello, Alice!\", \"Hello, Bob!\", \"Charlie\", \"Hello, Dave!\", \"Hello, Eve!\"]

在上面的例子中，我们首先使用 flatMap 方法对嵌套数组的元素进行转换，然后使用 flat 方法将其展平。

结论
Array.prototype.{flat,flatMap} 是非常实用的方法，它们可以让我们对嵌套数组进行展开和转换操作。要注意使用 depth 参数来控制展开的深度。在使用 flatMap 方法时，我们需要手动调用 flat 方法来展开结果数组。学习和掌握这两个方法可以加快我们在前端开发中的开发效率。