解析 ES10 中的 Array.prototype.flat() 和 Array.prototype.flatMap()

在 ES10 中，新增了两个数组方法：Array.prototype.flat() 和 Array.prototype.flatMap()。它们可以极大地提高数组的处理效率和操作灵活性。本文将详细介绍这两个方法的使用方法、示例代码以及注意事项。

Array.prototype.flat()

Array.prototype.flat() 方法可以将嵌套的数组“展平”，即将多维数组变成一维数组。该方法的语法如下：

array.flat([depth])

其中，array 为要展平的数组，depth 为可选参数，表示要展平的层数。默认值为 1，表示只展平一层。如果传递的参数为负数，则不进行展平。

下面是一个示例代码：

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

在上面的代码中，原数组 arr 中包含一个嵌套的数组 [3, 4, [5, 6]]，调用 flat() 方法后，该嵌套数组被展平成了 [5, 6]，最终得到的结果是一维数组 [1, 2, 3, 4, 5, 6]。

需要注意的是，如果原数组中有空位，flat() 方法会将其删除：

const arr = [1, 2, [3, 4, , 5]];
const flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4, 5]

Array.prototype.flatMap()

Array.prototype.flatMap() 方法可以对数组进行映射和展平操作，相当于先调用 map() 方法，再调用 flat() 方法。该方法的语法如下：

array.flatMap(callback)

其中，array 为要操作的数组，callback 为回调函数，用于对数组中的每个元素进行处理。回调函数的参数和 map() 方法相同，返回值也相同。

下面是一个示例代码：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => [x, x * 2]);
console.log(flatMapArr); // [1, 2, 2, 4, 3, 6]

在上面的代码中，flatMap() 方法对数组 arr 中的每个元素进行了处理，将其变成了一个包含两个元素的数组。最终得到的结果是一维数组 [1, 2, 2, 4, 3, 6]。

需要注意的是，如果回调函数返回的是一个空数组，flatMap() 方法会将其删除：

const arr = [1, 2, 3];
const flatMapArr = arr.flatMap(x => []);
console.log(flatMapArr); // []

总结

Array.prototype.flat() 和 Array.prototype.flatMap() 是 ES10 中新增的数组方法，可以极大地提高数组的处理效率和操作灵活性。需要注意的是，flat() 方法会删除数组中的空位，而 flatMap() 方法会删除回调函数返回的空数组。

在实际开发中，我们可以根据具体的需求选择使用这两个方法，以便更加高效地处理数组数据。

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