ES11 中数组的 flat() 和 flatMap() 方法详解

JavaScript 中的数组是一种非常重要的数据结构，它能够存储多个元素并提供一些强大的操作方法。在 ES11（也称为 ECMAScript 2020）中，JavaScript 的数组又新增了两个方法：flat() 和 flatMap()，这两个方法的作用是帮助开发者更方便地操作数组。

flat() 方法的使用

flat() 方法是一个可以把多维数组变为一维数组的方法。其实现原理很简单，就是把内部的嵌套数组去掉，将所有元素放在一个新数组中。

flat() 方法的语法如下：

array.flat([depth])

参数 depth 是一个可选参数，表示要递归转换的深度。如果不传参数，则默认为 1。如果传入参数为 0，那么数组不做展开，返回原数组。

现在我们来看一个简单的示例代码：

// 把二维数组变为一维数组
let arr = [[1, 2], [3, 4], [5, 6]];
let flatArr = arr.flat();
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

如果我们把 depth 参数设置为 2，那么就可以将一个三维数组转换为一维数组。

// 把三维数组变为一维数组
let arr = [[[1, 2]], [[3, 4]], [[5, 6]]];
let flatArr = arr.flat(2);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]

flatMap() 方法的使用

flatMap() 方法是 flat() 方法的加强版。这个方法是对数组中的每个元素进行一次映射后，再将结果压缩成一个新数组。实现过程如下：

1. 对原数组中的每个元素运行提供的函数。
2. 在新数组中，将每个元素映射为一个新值。
3. 如果有任何嵌套数组，请使用 flat() 方法将其展平为单个数组。
4. 将所有结果压缩到一个新数组中。

flatMap() 方法的语法如下：

array.flatMap(callback[, thisArg])

其中，callback 是一个针对每个元素的函数，它将接收三个参数：当前元素，当前元素的索引和当前数组。

现在我们来看一个简单的示例代码：

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

在这个例子中，我们将数组 [1, 2, 3] 中的每个元素映射为一个包含该元素和它的两倍的数组。然后使用 flatMap() 方法将每个元素映射出来的数组展平，并将结果保存到新的数组中。

两个方法的区别

flat() 方法和 flatMap() 方法的最大区别是 flatMap() 方法可以提供一个回调函数来变换元素，而 flat() 方法只是将嵌套数组展开成一维数组。在实际开发中，我们可以根据实际需要选择使用这两个方法。

总结

ES11 中的 flat() 方法和 flatMap() 方法都是很有用的数组操作方法。通过它们，我们可以更方便地操作数组，并减少循环和递归的使用。我们可以用 flat() 方法将多维数组平铺成一维数组，也可以用 flatMap() 方法应用回调函数，将多维数组映射成一个新的一维数组。这两个方法为开发者提供了一个很好的选择。

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