在 JavaScript 中，数组是一种非常常见的数据类型。有时候，数组中可能会嵌套着其他的数组，这就是嵌套数组。在处理数据时，可能需要将这种嵌套的数组平展开来，以便更方便地进行操作。在 ES10 中，我们可以使用 flat 和 flatMap 方法来实现这个目的。
flat 方法
flat 方法是一个数组的原型方法，用来将嵌套的数组平展开来。它会返回一个新的数组，这个数组中只包含原来嵌套数组中的元素，而不包含原来嵌套数组本身。
语法
array.flat([depth])
- array：要平展的数组。
- depth：可选参数，指定递归展开的深度。默认值为 1。
示例
const arr1 = [1, [2, [3, [4]]]]; arr1.flat(); // [1, 2, [3, [4]]] arr1.flat(2); // [1, 2, 3, [4]]
在上面的例子中，arr1 是一个嵌套了两层的数组。在使用 flat 方法时，如果不设置 depth 参数，那么只会展开一层，得到的新数组中还包含一个嵌套的数组。如果设置 depth 参数为 2，那么会展开两层，得到的新数组中已经不再包含嵌套的数组。
flatMap 方法
flatMap 方法也是一个数组的原型方法，它结合了 map 和 flat 方法的功能。它对数组中的每个元素执行传递的函数，并返回一个新数组。这个新数组将平展嵌套数组。
语法
array.flatMap(callback[, thisArg])
- callback：要执行的函数，可以返回单个元素或一个数组，这个数组在后面会被平展。
- thisArg：可选参数，执行函数时 this 的值。
示例
const arr2 = [1, 2, 3]; arr2.flatMap(x => [x, x * 2]); // [1,2,2,4,3,6]
在上面的例子中，arr2 是一个普通的数组。在使用 flatMap 方法时，传递的回调函数 x => [x, x * 2] 对于 arr2 中的每个元素都会执行一次。这个函数返回一个数组，这个数组中包含了元素 x 和元素 x 的两倍。最后将这个数组平展，得到的新数组中包含了每个元素和对应元素的两倍。
使用 flat 和 flatMap 来处理嵌套数组
嵌套数组经常出现在数据处理中。如果直接使用普通的数组方法处理嵌套数组，可能会变得非常复杂。而使用 flat 和 flatMap 方法，可以将其平展开来，变得更加简洁。
const users = [
{ name: '张三', hobbies: ['篮球', '游泳'] },
{ name: '李四', hobbies: ['足球', '羽毛球'] }
];
const flatHobbies = users.flatMap(user => user.hobbies);
// ['篮球', '游泳', '足球', '羽毛球']在这个例子中，我们有一个包含用户信息的数组。每个用户又有自己的爱好。如果要得到所有用户的爱好列表，就需要将嵌套数组平展开来。使用 flatMap 方法，一行代码即可解决这个问题。
总结
通过使用 ES10 中新增的 flat 和 flatMap 方法，我们可以轻松地处理嵌套数组。在数据处理中，使用这两个方法可以让我们的代码更加简洁。但是需要注意的是，在需要处理大量数据的情况下，这两个方法可能会有一定的性能问题，需要慎重使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65361f1d7d4982a6ebdfc0d2